Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-10 00:23:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(theme): better dark theme

Browse Source
This commit is contained in:
iCrawl
2022-07-18 02:35:34 +02:00
parent cd13a4a902
commit ec230faa4d
6 changed files with 19 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/website/src/components/CodeListing.tsx
View File

@@ -30,11 +30,11 @@ export function CodeListing({
<div className="w-full flex flex-row">
<h4 className="font-mono my-0">{`${name}`}</h4>
<h4 className="mx-3 my-0">{separator}</h4>
<h4 className="font-mono color-blue-800 my-0">
<h4 className="font-mono text-blue-800 dark:text-blue-400 my-0">
<HyperlinkedText tokens={typeTokens} />
</h4>
</div>
{summary && <p className="color-slate-500 mt-2">{summary}</p>}
{summary && <p className="text-dark-100 mt-2">{summary}</p>}
{children}
</div>
</div>

18
packages/website/src/components/DocContainer.tsx
View File

@@ -1,6 +1,6 @@
import type { ReactNode } from 'react';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vs } from 'react-syntax-highlighter/dist/cjs/styles/prism';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
import { HyperlinkedText } from './HyperlinkedText';
import { Section } from './Section';
import { TypeParamTable } from './TypeParamTable';
@@ -20,38 +20,38 @@ export interface DocContainerProps {
export function DocContainer({ name, kind, excerpt, summary, typeParams, children, extendsTokens }: DocContainerProps) {
return (
<>
<div className="bg-white border-b-solid border-gray border-width-0.5 sticky top-0 px-10 py-2">
<h2 className="flex items-center font-mono break-all m-0">
<div className="bg-white dark:bg-dark border-b-solid border-gray border-width-0.5 sticky top-0 px-10 py-2">
<h2 className="flex items-center font-mono break-all m-0 dark:text-white">
{generateIcon(kind, 'mr-2')}
{name}
</h2>
</div>
<div className="p-10">
<div className="px-10 pt-5 pb-10">
<div>
<SyntaxHighlighter
wrapLines
wrapLongLines
language="typescript"
style={vs}
style={vscDarkPlus}
codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
>
{excerpt}
</SyntaxHighlighter>
</div>
{extendsTokens?.length ? (
<div className="flex flex-row items-center">
<div className="flex flex-row items-center dark:text-white">
<h2 className="mr-5">Extends</h2>
<p className="font-mono">
<HyperlinkedText tokens={extendsTokens} />
</p>
</div>
) : null}
<Section title="Summary">
<p className="color-slate-500">{summary ?? 'No summary provided.'}</p>
<Section title="Summary" className="dark:text-white">
<p className="text-dark-100 dark:text-gray-400">{summary ?? 'No summary provided.'}</p>
</Section>
{typeParams?.length ? (
<Section title="Type Parameters">
<Section title="Type Parameters" className="dark:text-white">
<TypeParamTable data={typeParams} className="mb-5 p-3" />
</Section>
) : null}

6
packages/website/src/components/ItemSidebar.tsx
View File

@@ -18,8 +18,8 @@ function onMenuClick() {
export function ItemSidebar({ packageName, data }: ItemListProps) {
return (
<div className="flex flex-col max-h-full min-w-[270px] lg:border-r-solid border-b-solid border-gray border-width-0.5">
<div className="flex justify-between content-center items-center border-b-solid border-gray border-width-0.5 py-2">
<h2 className="px-2 font-mono flex items-center content-center m-0">
<div className="flex justify-between items-center border-b-solid border-gray border-width-0.5 py-2">
<h2 className="px-2 font-mono flex items-center m-0 dark:text-white">
<VscPackage className="px-1" />
{`${packageName}`}
</h2>
@@ -31,7 +31,7 @@ export function ItemSidebar({ packageName, data }: ItemListProps) {
{data.members.map((member, i) => (
<div key={i} className="mb-1">
<a
className="flex content-center items-center align-center font-mono no-underline break-all color-blue-500"
className="flex items-center align-center font-mono no-underline break-all text-blue-500 dark:text-blue-300"
href={member.path}
>
{generateIcon(member.kind, 'px-1')}

6
packages/website/src/components/MethodItem.tsx
View File

@@ -29,21 +29,21 @@ export function MethodItem({ data }: MethodItemProps) {
return (
<div className="flex flex-col">
<div className="flex content-center">
<button className="bg-transparent border-none cursor-pointer" onClick={onAnchorClick}>
<button className="bg-transparent border-none cursor-pointer dark:text-white" onClick={onAnchorClick}>
<FiLink size={16} />
</button>
<div className="flex flex-col ml-3">
<div className="w-full flex flex-row">
<h4 className="font-mono my-0 break-all">{`${getShorthandName(data)}`}</h4>
<h4 className="mx-3 my-0">:</h4>
<h4 className="font-mono color-blue-800 my-0 break-all ">
<h4 className="font-mono text-blue-800 dark:text-blue-400 my-0 break-all ">
<HyperlinkedText tokens={data.returnTypeTokens} />
</h4>
</div>
</div>
</div>
<div className="mx-10">
{data.summary && <p className="color-slate-500 mt-2">{data.summary}</p>}
{data.summary && <p className="text-dark-100 dark:text-gray-400 mt-2">{data.summary}</p>}
{data.parameters.length ? <ParameterTable className="mb-10 mx-5" data={data.parameters} /> : null}
</div>
</div>

2
packages/website/src/components/Sections.tsx
View File

@@ -23,7 +23,7 @@ export interface MethodsSectionProps {
export function MethodsSection({ data }: MethodsSectionProps) {
return data.length ? (
<Section title="Methods">
<Section title="Methods" className="dark:text-white">
<MethodList data={data} />
</Section>
) : null;

2
packages/website/src/routes/docs/$branchName/packages/$packageName.tsx
View File

@@ -39,7 +39,7 @@ export default function Package() {
const { packageName } = useParams();
return (
<div className="flex flex-col lg:flex-row overflow-hidden max-w-full h-full dark:bg-slate-800">
<div className="flex flex-col lg:flex-row overflow-hidden max-w-full h-full bg-white dark:bg-dark">
<div className="w-full lg:min-w-1/4 lg:max-w-1/4">
<ItemSidebar packageName={packageName!} data={data} />
</div>