Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-14 02:23:31 +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

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}