Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-16 19:43:29 +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"> <div className="w-full flex flex-row">
<h4 className="font-mono my-0">{`${name}`}</h4> <h4 className="font-mono my-0">{`${name}`}</h4>
<h4 className="mx-3 my-0">{separator}</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} /> <HyperlinkedText tokens={typeTokens} />
</h4> </h4>
</div> </div>
{summary && <p className="color-slate-500 mt-2">{summary}</p>} {summary && <p className="text-dark-100 mt-2">{summary}</p>}
{children} {children}
</div> </div>
</div> </div>

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

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

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

@@ -18,8 +18,8 @@ function onMenuClick() {
export function ItemSidebar({ packageName, data }: ItemListProps) { export function ItemSidebar({ packageName, data }: ItemListProps) {
return ( 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 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"> <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 content-center m-0"> <h2 className="px-2 font-mono flex items-center m-0 dark:text-white">
<VscPackage className="px-1" /> <VscPackage className="px-1" />
{`${packageName}`} {`${packageName}`}
</h2> </h2>
@@ -31,7 +31,7 @@ export function ItemSidebar({ packageName, data }: ItemListProps) {
{data.members.map((member, i) => ( {data.members.map((member, i) => (
<div key={i} className="mb-1"> <div key={i} className="mb-1">
<a <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} href={member.path}
> >
{generateIcon(member.kind, 'px-1')} {generateIcon(member.kind, 'px-1')}

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

@@ -29,21 +29,21 @@ export function MethodItem({ data }: MethodItemProps) {
return ( return (
<div className="flex flex-col"> <div className="flex flex-col">
<div className="flex content-center"> <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} /> <FiLink size={16} />
</button> </button>
<div className="flex flex-col ml-3"> <div className="flex flex-col ml-3">
<div className="w-full flex flex-row"> <div className="w-full flex flex-row">
<h4 className="font-mono my-0 break-all">{`${getShorthandName(data)}`}</h4> <h4 className="font-mono my-0 break-all">{`${getShorthandName(data)}`}</h4>
<h4 className="mx-3 my-0">:</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} /> <HyperlinkedText tokens={data.returnTypeTokens} />
</h4> </h4>
</div> </div>
</div> </div>
</div> </div>
<div className="mx-10"> <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} {data.parameters.length ? <ParameterTable className="mb-10 mx-5" data={data.parameters} /> : null}
</div> </div>
</div> </div>

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

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

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

@@ -39,7 +39,7 @@ export default function Package() {
const { packageName } = useParams(); const { packageName } = useParams();
return ( 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"> <div className="w-full lg:min-w-1/4 lg:max-w-1/4">
<ItemSidebar packageName={packageName!} data={data} /> <ItemSidebar packageName={packageName!} data={data} />
</div> </div>