Add dark mode for docs

docsgen/markdown.tsx

@@ -2,7 +2,7 @@ import { Node } from "commonmark";
 import highlight from "highlight.js";
 import * as React from "react";
 import { createNodeId, getNodeText } from "./markdownUtils";
-import { component } from "./style";
+import { component, darkMode } from "./style";
 
 interface MarkdownProps {
     root: Node;
@@ -149,18 +149,32 @@ const CodeBlock = component("code-block", "code", {
     },
 });
 
-const CodeInline = component("code-inline", "code", {
-    color: "#6272a4",
-    fontSize: 18,
-});
+const CodeInline = component(
+    "code-inline",
+    "code",
+    {
+        color: "#6272a4",
+        fontSize: 18,
+    },
+    darkMode({
+        color: "#919dc0",
+    }),
+);
 
-export const Link = component("link", "a", {
-    color: "#008075",
-    textDecoration: "none",
-    $nest: {
-        "&:hover": {
-            color: "#00B3A4",
-            textDecoration: "underline",
+export const Link = component(
+    "link",
+    "a",
+    {
+        color: "#008075",
+        textDecoration: "none",
+        $nest: {
+            "&:hover": {
+                color: "#00B3A4",
+                textDecoration: "underline",
+            },
         },
     },
-});
+    darkMode({
+        color: "#2EE6D6",
+    }),
+);

docsgen/page.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { Link, Markdown } from "./markdown";
 import { PageModel } from "./pageModel";
 import { Sidebar } from "./sidebar";
-import { component, mobile } from "./style";
+import { component, darkMode, mobile } from "./style";
 
 interface PageProps {
     pages: PageModel[];
@@ -59,6 +59,10 @@ const Contents = component(
         background: "#EBF1F5",
         boxShadow: "inset 15px 0 30px -30px #182026",
     },
+    darkMode({
+        background: "#323543",
+        color: "#F5F8FA",
+    }),
     mobile({ overflow: "visible", boxShadow: "inset 0 15px 30px -30px #182026" }),
 );
 
@@ -80,9 +84,16 @@ const EndMatter = component("end-matter", "div", {
     fontSize: 14,
 });
 
-const License = component("license", "div", {
-    marginTop: 20,
-    color: "#738694",
-    textShadow: "0 1px 0 white",
-    fontSize: 12,
-});
+const License = component(
+    "license",
+    "div",
+    {
+        marginTop: 20,
+        color: "#738694",
+        textShadow: "0 1px 0 white",
+        fontSize: 12,
+    },
+    darkMode({
+        textShadow: "0 1px 0 black",
+    }),
+);

docsgen/sidebar.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { classes, style } from "typestyle";
 import { MarkdownChildren } from "./markdown";
 import { PageModel } from "./pageModel";
-import { component, mobile, styles } from "./style";
+import { component, darkMode, mobile, styles } from "./style";
 
 interface SidebarProps {
     pages: PageModel[];
@@ -38,7 +38,12 @@ export const Sidebar: React.FunctionComponent<SidebarProps> = ({ pages, selected
     return (
         <Container>
             {links}
-            <PageLink className={selectedPage} href="https://github.com/jscheiny/safe-units">
+            <PageLink
+                className={selectedPage}
+                href="https://github.com/jscheiny/safe-units"
+                rel="noreferrer"
+                target="_blank"
+            >
                 <GithubIcon src="images/github-icon.png" /> View on GitHub
             </PageLink>
         </Container>
@@ -56,6 +61,9 @@ const Container = component(
         fontSize: 14,
         overflow: "auto",
     },
+    darkMode({
+        background: "#272a35",
+    }),
     mobile({ overflow: "visible" }),
 );
 
@@ -82,18 +90,30 @@ const PageLink = component(
             },
         },
     },
+    darkMode({
+        color: "#E1E8ED",
+        background: "#1C1E26",
+        $nest: {
+            "&:hover": {
+                background: "#323643",
+            },
+        },
+    }),
     mobile({ display: "block" }),
 );
 
-const homeLink = style({
-    color: HOME_COLOR,
-});
+const homeLink = style(
+    {
+        color: HOME_COLOR,
+    },
+    darkMode({ color: "#919dc0" }),
+);
 
 const pageLink = style({
     color: LINK_COLOR,
 });
 
-const selectedPage = style({
+const selectedPageStyles = styles({
     color: "#F5F8FA",
     background: HOME_COLOR,
     $nest: {
@@ -104,6 +124,8 @@ const selectedPage = style({
     },
 });
 
+const selectedPage = style(selectedPageStyles, darkMode(selectedPageStyles));
+
 const SectionLink = component(
     "section-link",
     "a",
@@ -116,6 +138,14 @@ const SectionLink = component(
             },
         },
     },
+    darkMode({
+        color: "#E1E8ED",
+        $nest: {
+            "&:hover": {
+                background: HOME_COLOR,
+            },
+        },
+    }),
     mobile({ display: "none" }),
 );
 

docsgen/style.ts

@@ -26,6 +26,14 @@ export function mobile(...styles: CSSProps[]): CSSProps {
     return media({ maxWidth: 700 }, ...styles);
 }
 
+export function darkMode(styles: CSSProps): CSSProps {
+    return {
+        $nest: {
+            "@media (prefers-color-scheme: dark)": styles,
+        },
+    };
+}
+
 cssRule("body", {
     fontFamily: `"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif`,
     fontSize: 16,
@@ -59,5 +67,9 @@ cssRule(
         paddingTop: 25,
         marginLeft: -20,
     },
+    darkMode({
+        color: "#919dc0",
+        textShadow: "1px 1px 2px #1c1e26",
+    }),
     mobile({ marginLeft: 0 }),
 );