Implement light mode

docusaurus.config.js

@@ -75,7 +75,7 @@ const config = {
     // Supported and default color modes
     colorMode: {
       defaultMode: "dark",
-      disableSwitch: true,
+      disableSwitch: false,
       respectPrefersColorScheme: false,
     },
     // Theme configuration specific to the docs plugin
@@ -179,6 +179,10 @@ const config = {
           type: "custom-AccessibilityOptions",
           position: "right",
         },
+        {
+          type: "custom-Spacer",
+          position: "right",
+        },
       ],
     },
     footer: {

src/components/NavbarItem/Spacer.js

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function Spacer({ mobile }) {
+  if (mobile) {
+    return null;
+  }
+
+  return <div class="navbar-spacer"></div>;
+}

src/css/custom.css

@@ -16,6 +16,12 @@ html[data-theme="dark"] {
   --ifm-color-primary-lightest: #dfedfc;
   --ifm-background-color: #101215;
 
+  --scan-line-1: #0e0e0e;
+  --scan-line-2: #101215;
+
+  --ifm-a11y-button-color: var(--ifm-color-primary-dark);
+  --ifm-a11y-button-hover-color: var(--ifm-color-primary-darkest);
+
   --ifm-color-info-contrast-background: rgb(25 60 71 / 50%);
   --ifm-color-warning-contrast-background: rgb(77 56 0 / 50%);
   --ifm-color-danger-contrast-background: rgb(75 17 19 / 50%);
@@ -36,6 +42,45 @@ html[data-theme="dark"] {
   --ifm-global-radius: 0;
 }
 
+/* covers both accessibility states */
+html[data-theme="light"] {
+  --ifm-color-primary: #161616;
+  --ifm-color-primary-dark: #5796e4;
+  --ifm-color-primary-darker: #060f18;
+  --ifm-color-primary-darkest: #0d59c4;
+  --ifm-color-primary-light: #56585a;
+  --ifm-color-primary-lighter: #323335;
+  --ifm-color-primary-lightest: #1a1818;
+  --ifm-background-color: #c6c8cc;
+
+  --scan-line-1: #c6c8cc;
+  --scan-line-2: #c6c8cc;
+
+  --ifm-a11y-button-color: var(--ifm-color-primary-light);
+  --ifm-a11y-button-hover-color: var(--ifm-color-primary-lightest);
+
+  --ifm-color-info-contrast-background: rgba(78, 193, 228, 0.5);
+  --ifm-color-warning-contrast-background: rgba(206, 151, 0, 0.5);
+  --ifm-color-danger-contrast-background: rgba(204, 47, 52, 0.5);
+
+  --ifm-navbar-background-color: var(--ifm-background-color);
+  --ifm-footer-background-color: var(--ifm-background-color);
+  --ifm-dropdown-background-color: var(--ifm-background-color);
+  --ifm-card-background-color: var(--ifm-background-color);
+
+  --ifm-link-color: var(--ifm-color-primary);
+
+  --ifm-heading-color: var(--ifm-color-primary-darker);
+  --ifm-color-content: var(--ifm-color-primary);
+  --ifm-link-color: var(--ifm-color-primary-darkest);
+  --ifm-navbar-link-hover-color: var(--ifm-color-primary-darker);
+  --ifm-menu-color: var(--ifm-color-primary);
+  --ifm-toc-link-color: var(--ifm-color-primary);
+
+  --ifm-breadcrumb-border-radius: 0;
+  --ifm-global-radius: 0;
+}
+
 html:not([data-accessible="true"]) {
   --ifm-font-family-base: "whiterabbit-webfont";
 }
@@ -88,12 +133,18 @@ a.wikilink-new {
   color: var(--ifm-color-danger);
 }
 
+.navbar-spacer {
+  content: "";
+  width: 12px;
+  height: 36px;
+}
+
 .navbar-a11y::before {
   content: "";
   width: 36px;
   height: 36px;
   display: flex;
-  background-color: var(--ifm-navbar-link-color);
+  background-color: var(--ifm-a11y-button-color);
   border: none;
   mask-image: url("../../assets/universal-access.svg");
   mask-size: 100% auto;
@@ -102,19 +153,27 @@ a.wikilink-new {
 }
 
 .navbar-a11y:hover::before {
-  background-color: var(--ifm-navbar-link-hover-color);
+  background-color: var(--ifm-a11y-button-hover-color);
 }
 
 .main-wrapper:not([data-accessible="true"]) {
   background-image: repeating-linear-gradient(
-    #0e0e0e,
-    #0e0e0e 2px,
-    #101215 2px,
-    #101215 4px
+    var(--scan-line-1),
+    var(--scan-line-1) 2px,
+    var(--scan-line-2) 2px,
+    var(--scan-line-2) 4px
   );
   background-size: 100% 4px;
 }
 
+.color-tag {
+  /* isnt visible in dark mode, but may be nice to toggle this in the future */
+  text-shadow:
+    0.5px 0.5px 1px rgb(0, 0, 0),
+    0 0 0.1em rgb(0, 0, 0),
+    0 0 0.1em rgb(0, 0, 0);
+}
+
 .color-tag[data-tag="a"] {
   color: #000000;
 }

src/plugins/rehype/autocolor.js

@@ -49,9 +49,9 @@ const regexGC =
 function colorScript(_fullMatch, user, script) {
   const isTrust = trustUsers.includes(user);
   return [
-    h("span", { class: `color-${isTrust ? "trust" : "user"}` }, user),
+    h("span", { class: `color-tag color-${isTrust ? "trust" : "user"}` }, user),
     u("text", "."),
-    h("span", { class: "color-script" }, script),
+    h("span", { class: "color-tag color-script" }, script),
   ];
 }
 
@@ -61,12 +61,12 @@ function colorTag(_fullMatch, tag, inner) {
 
 function colorKvp(_fullMatch, key, value) {
   if (!value) {
-    return h("span", { class: "color-key" }, key);
+    return h("span", { class: "color-tag color-key" }, key);
   }
   return [
-    h("span", { class: "color-key" }, key),
+    h("span", { class: "color-tag color-key" }, key),
     u("text", ": "),
-    h("span", { class: "color-value" }, value),
+    h("span", { class: "color-tag color-value" }, value),
   ];
 }
 
@@ -82,16 +82,20 @@ function colorGC(_fullMatch, q, t, b, m, k, units) {
 
   for (const [letter, value] of letters_and_values) {
     if (value) {
-      out.push(h("span", { class: "color-gc-text" }, value));
+      out.push(h("span", { class: "color-tag color-gc-text" }, value));
       out.push(
-        h("span", { class: `color-gc-${letter}` }, letter.toUpperCase()),
+        h(
+          "span",
+          { class: `color-tag color-gc-${letter}` },
+          letter.toUpperCase(),
+        ),
       );
     }
   }
   if (units) {
-    out.push(h("span", { class: "color-gc-text" }, units));
+    out.push(h("span", { class: "color-tag color-gc-text" }, units));
   }
-  out.push(h("span", { class: "color-gc-end" }, "GC"));
+  out.push(h("span", { class: "color-tag color-gc-end" }, "GC"));
 
   return out;
 }

src/theme/NavbarItem/ComponentTypes.js

@@ -8,6 +8,7 @@ import DocSidebarNavbarItem from "@theme/NavbarItem/DocSidebarNavbarItem";
 import DocsVersionNavbarItem from "@theme/NavbarItem/DocsVersionNavbarItem";
 import DocsVersionDropdownNavbarItem from "@theme/NavbarItem/DocsVersionDropdownNavbarItem";
 import AccessibilityOptions from "@site/src/components/NavbarItem/AccessibilityOptions";
+import Spacer from "@site/src/components/NavbarItem/Spacer";
 
 const ComponentTypes = {
   default: DefaultNavbarItem,
@@ -23,4 +24,5 @@ const ComponentTypes = {
 export default {
   ...ComponentTypes,
   "custom-AccessibilityOptions": AccessibilityOptions,
+  "custom-Spacer": Spacer,
 };