Skip to content

Commit bc86fd8

Browse files
josh-collinsworthdavis9001donjo
authored
Add dark mode (denoland#1038)
Co-authored-by: davis9001 <[email protected]> Co-authored-by: John Donmoyer <[email protected]>
1 parent c1655b7 commit bc86fd8

17 files changed

+543
-186
lines changed

‎_components/Footer.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ const data = [
108108

109109
export default function Footer() {
110110
return (
111-
<footer class="w-full border-t border-gray-200 pt-12">
111+
<footer class="w-full border-t border-foreground-secondary/20 pt-12">
112112
<div class="max-w-screen-xl mx-auto pb-16 px-4 sm:px-8 md:px-16">
113113
<div class="grid md:grid-cols-2 lg:grid-cols-4 md:-mx-8">
114114
{data.map((category) => (
@@ -118,7 +118,7 @@ export default function Footer() {
118118
{category.items.map((item) => (
119119
<li>
120120
<a
121-
class="block items-center py-1 text-gray-600 hover:text-primary hover:underline"
121+
class="block items-center py-1 text-foreground-secondary hover:text-primary hover:underline"
122122
href={item.to ?? item.href}
123123
>
124124
{item.label}

‎_components/Header.tsx

+41-8
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import Logo from "./Logo.tsx";
2+
13
export default function Header({
24
url,
35
hasSidebar,
@@ -8,14 +10,14 @@ export default function Header({
810
const reference = url.startsWith("/api");
911
return (
1012
<header
11-
class={`bg-white shadow z-30 ${
13+
class={`bg-background-primary text-foreground-primary border-b border-foreground-tertiary z-30 ${
1214
reference ? "" : "sticky top-0 left-0 right-0"
1315
}`}
1416
>
1517
<nav class="p-4 py-3 md:px-6 min-h-16 flex items-center justify-between">
1618
<div class="flex items-center">
1719
{hasSidebar && (
18-
<button class="mr-2 lg:hidden" id="sidebar-open">
20+
<button class="mr-2 xl:hidden" id="sidebar-open">
1921
<svg
2022
width="24"
2123
height="24"
@@ -34,8 +36,8 @@ export default function Header({
3436
</button>
3537
)}
3638
<a class="flex gap-2.5 mr-5" href="/">
37-
<div class="block w-24 h-auto">
38-
<img src="/img/deno-docs.svg" alt="Deno Docs" />
39+
<div class="w-auto h-9">
40+
<Logo />
3941
</div>
4042
{/* custom font size for logo */}
4143
</a>
@@ -60,7 +62,9 @@ export default function Header({
6062
name="API reference"
6163
hideOnMobile
6264
/>
63-
<span class="hidden lg:inline-block text-gray-300 mx-2">//</span>
65+
<span class="hidden xl:inline-block text-foreground-secondary mx-2">
66+
//
67+
</span>
6468
<HeaderItem
6569
url={url}
6670
activeOn="/deploy"
@@ -89,12 +93,41 @@ export default function Header({
8993
<orama-search-button />
9094
<orama-search-box />
9195
</div>
96+
<div class="dark-mode-toggle">
97+
<button class="dark-mode-toggle button p-1 rounded bg-background-primary ring ring-transparent hover:ring-foreground-tertiary">
98+
<span class="dark:hidden">
99+
<svg
100+
class="fill-foreground-primary w-6 h-6"
101+
viewBox="0 0 20 20"
102+
xmlns="http://www.w3.org/2000/svg"
103+
>
104+
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z">
105+
</path>
106+
</svg>
107+
</span>
108+
<span class="hidden dark:block">
109+
<svg
110+
class="fill-foreground-primary w-6 h-6"
111+
viewBox="0 0 20 20"
112+
xmlns="http://www.w3.org/2000/svg"
113+
>
114+
<path
115+
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1
116+
0 100-2H3a1 1 0 000 2h1z"
117+
fill-rule="evenodd"
118+
clip-rule="evenodd"
119+
>
120+
</path>
121+
</svg>
122+
</span>
123+
</button>
124+
</div>
92125
</div>
93126
</nav>
94127

95128
{reference &&
96129
(
97-
<nav className="px-4 md:px-6 pt-2 pb-3 text-sm bg-white flex items-center justify-between border-box border-t border-gray-200 z-[1000]">
130+
<nav className="px-4 md:px-6 py-3 text-sm bg-background-primary flex items-center justify-between border-box border-t border-foreground-tertiary z-[1000]">
98131
<ul className="flex">
99132
<li>
100133
<HeaderItem
@@ -149,11 +182,11 @@ function HeaderItem({
149182
<a
150183
class={`${
151184
firstItem ? "ml-0" : ""
152-
} mx-1 px-2 text-md hover:text-primary hover:bg-blue-50 ring-1 ring-transparent hover:ring-blue-100 hover:rounded transition-colors duration-200 ease-in-out text-nowrap flex items-center ${
185+
} mx-1 px-2 text-md hover:bg-background-secondary ring-1 ring-transparent hover:ring-background-tertiary hover:rounded transition-colors duration-200 ease-in-out text-nowrap flex items-center ${
153186
activeOn && url.startsWith(activeOn)
154187
? "text-primary mx-2.5 px-0.5 underline font-semibold underline-offset-[6px] decoration-primary/20"
155188
: ""
156-
} ${hideOnMobile ? "max-lg:!hidden" : ""}`}
189+
} ${hideOnMobile ? "max-xl:!hidden" : ""}`}
157190
href={href}
158191
>
159192
{name}

‎_components/Logo.tsx

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
export default function Logo() {
2+
return (
3+
<svg
4+
width="100%"
5+
height="100%"
6+
viewBox="0 0 1025 331"
7+
version="1.1"
8+
xmlns="http://www.w3.org/2000/svg"
9+
xmlSpace="preserve"
10+
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
11+
>
12+
<g
13+
id="background"
14+
transform="matrix(1,0,0,1,0.000105977,0.000105977)"
15+
>
16+
<path
17+
d="M28.829,227.937C19.958,208.794 15.007,187.472 15.007,165.002C15.007,159.187 15.339,153.448 15.984,147.805C16.639,142.102 17.61,136.506 18.877,131.032C25.997,100.328 42.557,73.224 65.329,52.95C84.456,35.944 107.887,23.81 133.573,18.31C143.71,16.145 154.224,15.006 165.003,15.006C168.781,15.01 172.586,15.155 176.414,15.447C194.568,16.833 211.723,21.403 227.373,28.568C239.998,34.354 251.683,41.842 262.135,50.737C288.388,73.101 306.697,104.254 312.786,139.213C314.241,147.592 314.999,156.209 314.999,165.002C314.996,168.786 314.85,172.597 314.557,176.431C313.451,190.92 310.316,204.773 305.453,217.733C298.665,235.784 288.494,252.185 275.715,266.161C259.094,283.132 237.972,290.684 220.331,290.37C207.503,290.141 194.952,285.037 186.279,277.569C173.889,266.9 168.885,254.704 167.169,241.095C166.743,237.712 166.993,228.494 168.754,222.111C170.066,217.353 173.394,208.165 178.261,204.146C172.568,201.694 165.24,196.354 162.93,193.791C162.362,193.161 162.436,192.174 162.944,191.495C163.453,190.817 164.344,190.549 165.143,190.836C170.038,192.516 175.999,194.173 182.285,195.225C190.552,196.607 200.833,198.347 211.248,198.859C236.643,200.106 263.169,188.708 271.402,166.029C279.634,143.35 276.44,120.918 246.906,107.463C217.371,94.007 203.728,78.008 179.865,68.359C164.278,62.056 146.93,65.798 129.119,75.641C81.145,102.153 38.164,185.92 57.977,263.528C58.26,264.59 57.782,265.708 56.819,266.237C55.916,266.732 54.806,266.591 54.058,265.906C48.292,259.57 43.06,252.74 38.435,245.485C34.857,239.871 31.645,234.01 28.829,227.937Z"
18+
class="fill-black dark:fill-transparent"
19+
/>
20+
</g>
21+
<g
22+
id="outline"
23+
transform="matrix(1,0,0,1,0.000105977,0.000105977)"
24+
>
25+
<path
26+
d="M172.67,0.181C263.638,4.413 334.056,81.702 329.825,172.67C325.593,263.638 248.303,334.055 157.336,329.823C66.368,325.592 -4.05,248.303 0.181,157.336C4.413,66.368 81.702,-4.05 172.67,0.181ZM211.248,198.859C200.833,198.347 190.552,196.607 182.285,195.225C175.999,194.173 170.038,192.516 165.143,190.836C164.344,190.549 163.453,190.817 162.944,191.495C162.436,192.174 162.362,193.161 162.93,193.791C165.24,196.354 172.568,201.694 178.261,204.146C173.394,208.165 170.066,217.353 168.754,222.111C166.993,228.494 166.743,237.712 167.169,241.095C168.885,254.704 173.889,266.9 186.279,277.569C194.952,285.037 207.503,290.141 220.331,290.37C238.033,290.685 259.24,283.08 275.887,265.985C297.652,242.124 311.91,211.098 314.557,176.431C320.86,93.885 258.961,21.75 176.414,15.447C93.869,9.144 21.734,71.044 15.431,153.59C12.167,196.339 27.195,236.296 53.912,265.76C54.656,266.569 55.856,266.766 56.819,266.237C57.782,265.708 58.26,264.59 57.977,263.528C38.164,185.92 81.145,102.153 129.119,75.641C146.93,65.798 164.278,62.056 179.865,68.359C203.728,78.008 217.371,94.007 246.906,107.463C276.44,120.918 279.634,143.35 271.402,166.029C263.169,188.708 236.643,200.106 211.248,198.859Z"
27+
class="fill-transparent dark:fill-white"
28+
/>
29+
</g>
30+
<g id="eye" transform="matrix(1,0,0,1,0.000105977,0.000105977)">
31+
<path
32+
d="M159.634,78.772C167.726,78.138 174.786,85.044 176.003,94.229C177.627,106.464 173.136,119.103 158.37,119.394C145.756,119.646 141.934,106.925 142.77,99.219C143.6,91.513 149.952,79.532 159.634,78.772Z"
33+
class="fill-black"
34+
/>
35+
</g>
36+
<g transform="matrix(12.6005,0,0,12.6005,-6934.5,-3216.05)">
37+
<path
38+
d="M600.234,274.47C596.514,274.47 594.018,271.926 594.018,268.422C594.018,264.918 596.514,262.374 600.234,262.374C603.882,262.374 606.474,264.822 606.474,268.422C606.474,272.022 603.882,274.47 600.234,274.47ZM600.234,271.662C601.938,271.662 603.282,270.318 603.282,268.422C603.282,266.502 601.986,265.182 600.234,265.182C598.41,265.182 597.186,266.574 597.186,268.422C597.186,270.246 598.458,271.662 600.234,271.662ZM613.662,274.47C610.182,274.47 607.638,272.022 607.638,268.422C607.638,264.822 610.182,262.374 613.806,262.374C615.678,262.374 617.598,263.118 618.774,264.606L616.662,266.43C616.038,265.71 615.126,265.182 613.926,265.182C612.054,265.182 610.806,266.502 610.806,268.398C610.806,270.318 612.102,271.662 613.95,271.662C615.198,271.662 616.134,271.086 616.686,270.462L618.822,272.358C617.814,273.534 616.014,274.47 613.662,274.47ZM624.615,274.47C622.743,274.47 621.159,273.87 619.863,272.766L621.399,270.582C622.359,271.494 623.367,271.95 624.639,271.95C625.551,271.95 626.079,271.566 626.079,270.99C626.079,270.438 625.479,270.174 623.943,269.694C622.023,269.046 620.343,268.134 620.343,265.878C620.343,263.766 622.167,262.374 624.567,262.374C626.199,262.374 627.519,262.806 628.839,263.838L627.327,266.142C626.415,265.278 625.383,264.894 624.519,264.894C624.015,264.894 623.367,265.158 623.367,265.782C623.367,266.262 623.991,266.598 625.143,267.03C627.687,267.966 629.175,268.518 629.175,270.822C629.175,272.91 627.687,274.47 624.615,274.47ZM582.487,274.278L582.487,262.374L586.791,262.374C590.556,262.374 592.977,264.822 592.977,268.342C592.977,271.847 590.708,274.278 586.841,274.278L582.487,274.278ZM585.58,271.444L586.623,271.444C588.438,271.444 589.632,270.053 589.632,268.342C589.632,266.565 588.421,265.207 586.858,265.207L585.58,265.207L585.58,271.444Z"
39+
class="fill-black dark:fill-white"
40+
/>
41+
</g>
42+
</svg>
43+
);
44+
}

‎_components/Sidebar.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ function SidebarSection(
5757
<a href={headingLink}>
5858
<h2
5959
id={categoryTitle}
60-
class="border-b border-gray-200 pt-2 pb-1.5 -mx-5 px-8 mt-4 mb-2 text-sm font-semibold hover:bg-blue-50 current:bg-blue-50 current:text-blue-500 text-gray-3 capitalize"
60+
class="border-b border-foreground-tertiary pt-2 pb-1.5 -mx-5 px-8 mt-4 mb-2 text-sm font-semibold hover:bg-background-secondary current:bg-background-secondary current:text-blue-500 text-foreground-primary capitalize"
6161
aria-current={props.url === headingLink ? "page" : undefined}
6262
>
6363
{props.section.title}
@@ -67,7 +67,7 @@ function SidebarSection(
6767
: (
6868
<h2
6969
id={categoryTitle}
70-
class="border-b border-gray-200 pt-2 pb-0.5 -mx-5 px-8 mt-4 mb-3 text-sm font-semibold text-gray-3 capitalize"
70+
class="border-b border-foreground-tertiary pt-2 pb-0.5 -mx-5 px-8 mt-4 mb-3 text-sm font-semibold text-foreground-primary capitalize"
7171
>
7272
{props.section.title}
7373
</h2>
@@ -99,7 +99,7 @@ function SidebarSection(
9999
}
100100

101101
const LINK_CLASS =
102-
"block px-3 py-1.5 text-[.8125rem] leading-4 font-normal text-gray-500 rounded-md hover:bg-blue-50 ring-1 ring-transparent hover:ring-blue-100 current:bg-blue-50 current:text-blue-500 current:font-semibold transition-colors duration-200 ease-in-out select-none";
102+
"block px-3 py-1.5 text-[.8125rem] leading-4 font-normal text-foreground-secondary rounded-md ring-1 ring-transparent hover:ring-background-tertiary hover:bg-background-secondary current:bg-background-secondary current:text-blue-500 current:font-semibold transition-colors duration-200 ease-in-out select-none";
103103

104104
function SidebarItem(props: {
105105
item: string | SidebarDoc_ | SidebarLink_;
@@ -156,15 +156,15 @@ function SidebarCategory(props: {
156156
>
157157
{props.item.label}
158158
<svg
159-
class="transition duration-300 size-5"
159+
class="transition duration-300 text-foreground-secondary size-4"
160160
xmlns="http://www.w3.org/2000/svg"
161161
viewBox="0 0 24 24"
162162
style={{
163163
transform: containsCurrent ? "rotate(180deg)" : "rotate(90deg)",
164164
}}
165165
>
166166
<path
167-
fill="rgba(0,0,0,0.5)"
167+
fill="currentColor"
168168
d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"
169169
>
170170
</path>

‎_config.ts

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import lume from "lume/mod.ts";
2+
import esbuild from "lume/plugins/esbuild.ts";
23
import jsx from "lume/plugins/jsx_preact.ts";
34
import prism from "lume/plugins/prism.ts";
4-
import search from "lume/plugins/search.ts";
5-
import esbuild from "lume/plugins/esbuild.ts";
65
import redirects from "lume/plugins/redirects.ts";
6+
import search from "lume/plugins/search.ts";
77
import sitemap from "lume/plugins/sitemap.ts";
88
import postcss from "lume/plugins/postcss.ts";
99

@@ -19,24 +19,24 @@ import "npm:[email protected]/components/prism-json5.js";
1919

2020
Prism.languages.jsonc = Prism.languages.json5;
2121

22-
import { full as emoji } from "npm:markdown-it-emoji@3";
22+
import title from "https://deno.land/x/[email protected]/title.ts";
23+
import toc from "https://deno.land/x/[email protected]/toc.ts";
24+
import { CSS as GFM_CSS } from "https://jsr.io/@deno/gfm/0.8.2/style.ts";
2325
import anchor from "npm:markdown-it-anchor@9";
24-
import relativeLinksPlugin from "./markdown-it/relative-path.ts";
25-
import replacerPlugin from "./markdown-it/replacer.ts";
26+
import { full as emoji } from "npm:markdown-it-emoji@3";
2627
import admonitionPlugin from "./markdown-it/admonition.ts";
2728
import codeblockCopyPlugin from "./markdown-it/codeblock-copy.ts";
2829
import codeblockTitlePlugin from "./markdown-it/codeblock-title.ts";
29-
import toc from "https://deno.land/x/[email protected]/toc.ts";
30-
import title from "https://deno.land/x/[email protected]/title.ts";
31-
import { CSS as GFM_CSS } from "https://jsr.io/@deno/gfm/0.8.2/style.ts";
30+
import relativeLinksPlugin from "./markdown-it/relative-path.ts";
31+
import replacerPlugin from "./markdown-it/replacer.ts";
32+
import { apiDocumentContentTypeMiddleware } from "./middleware.ts";
3233
import {
3334
deploy as oramaDeploy,
3435
generateDocumentsForExamples,
3536
generateDocumentsForPage,
3637
generateDocumentsForSymbols,
3738
OramaDocument,
3839
} from "./orama.ts";
39-
import { apiDocumentContentTypeMiddleware } from "./middleware.ts";
4040

4141
const site = lume(
4242
{
@@ -62,7 +62,7 @@ const site = lume(
6262
`<span class="sr-only">Jump to heading</span><span aria-hidden="true" class="anchor-end">#</span>`,
6363
placement: "after",
6464
}),
65-
getTokensText(tokens) {
65+
getTokensText(tokens: { type: string; content: string }[]) {
6666
return tokens
6767
.filter((t) => ["text", "code_inline"].includes(t.type))
6868
.map((t) => t.content.replaceAll(/ \([0-9/]+?\)/g, ""))

0 commit comments

Comments
 (0)