Add light mode + toggle

docs/guides/misc/autoretirement.mdx

@@ -8,6 +8,8 @@ Documentation for hackmud's automatic inactive account retirement.
 
 In order to preserve performance of the Multi-User Domain over time, it is necessary to remove users and records from the database. Users that belong to accounts which have gone inactive for 60 days will automatically retire.
 
+To avoid auto-retirement, it is sufficent to log into the account, once you do so the timer will be reset for all users associated with that account.
+
 ## Email Reminders
 
 Players who wish to be notified of retirement can sign up for reminder emails by linking your steam account to the [hackmud forums](https://hackmud.com/forums).

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
@@ -175,6 +175,10 @@ const config = {
             },
           ],
         },
+        {
+          type: "custom-AccessibilityOptions",
+          position: "right",
+        },
       ],
     },
     footer: {

src/components/NavbarItem/AccessibilityOptions.js

@@ -0,0 +1,41 @@
+import React from "react";
+
+export default function AccessibilityOptions({ mobile }) {
+  if (mobile) {
+    return null;
+  }
+
+  let accessibilityMode = null;
+
+  if (typeof window !== "undefined") {
+    const storedMode = window.localStorage.getItem("accessibilityMode");
+    setAccessibilityMode(storedMode === "true" ? "true" : "false");
+  }
+
+  function setAccessibilityMode(value) {
+    accessibilityMode = value;
+    window.localStorage.setItem("accessibilityMode", accessibilityMode);
+
+    document.documentElement.setAttribute("data-accessible", accessibilityMode);
+    for (let elem of document.getElementsByClassName("main-wrapper")) {
+      elem.setAttribute("data-accessible", accessibilityMode);
+    }
+  }
+
+  const toggleAccessibilityMode = () => {
+    setAccessibilityMode(accessibilityMode === "true" ? "false" : "true");
+  };
+
+  function handleClick() {
+    toggleAccessibilityMode();
+  }
+
+  return (
+    <div
+      class="navbar-a11y"
+      aria-label="Toggle accessible reading mode"
+      title="Toggle accessible reading mode"
+      onClick={handleClick}
+    ></div>
+  );
+}

src/css/custom.css

@@ -16,11 +16,16 @@ 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%);
 
-  --ifm-font-family-base: "whiterabbit-webfont";
   --ifm-navbar-background-color: var(--ifm-background-color);
   --ifm-footer-background-color: var(--ifm-background-color);
   --ifm-dropdown-background-color: var(--ifm-background-color);
@@ -29,6 +34,80 @@ html[data-theme="dark"] {
   --ifm-heading-color: var(--ifm-color-primary-lighter);
   --ifm-color-content: var(--ifm-color-primary);
   --ifm-link-color: var(--ifm-color-primary-lightest);
+  --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;
+}
+
+/* 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";
+}
+
+html[data-theme="dark"][data-accessible="true"] {
+  --ifm-color-primary: #dce0e6;
+  --ifm-color-primary-dark: #589ef1;
+  --ifm-color-primary-darker: #4795f0;
+  --ifm-color-primary-darkest: #1b7bec;
+  --ifm-color-primary-light: #b6d2f1;
+  --ifm-color-primary-lighter: #89b6ec;
+  --ifm-color-primary-lightest: #e8ebee;
+  --ifm-background-color: #101215;
+
+  --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%);
+
+  --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-heading-color: var(--ifm-color-primary-lighter);
+  --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);
 
@@ -54,12 +133,30 @@ a.wikilink-new {
   color: var(--ifm-color-danger);
 }
 
-.main-wrapper {
+.navbar-a11y::before {
+  content: "";
+  width: 36px;
+  height: 36px;
+  display: flex;
+  background-color: var(--ifm-a11y-button-color);
+  border: none;
+  margin-right: 10px;
+  mask-image: url("../../assets/universal-access.svg");
+  mask-size: 100% auto;
+  transition: background-color var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
+}
+
+.navbar-a11y:hover::before {
+  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;
 }

src/theme/NavbarItem/ComponentTypes.js

@@ -0,0 +1,26 @@
+import DefaultNavbarItem from "@theme/NavbarItem/DefaultNavbarItem";
+import DropdownNavbarItem from "@theme/NavbarItem/DropdownNavbarItem";
+import LocaleDropdownNavbarItem from "@theme/NavbarItem/LocaleDropdownNavbarItem";
+import SearchNavbarItem from "@theme/NavbarItem/SearchNavbarItem";
+import HtmlNavbarItem from "@theme/NavbarItem/HtmlNavbarItem";
+import DocNavbarItem from "@theme/NavbarItem/DocNavbarItem";
+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";
+
+const ComponentTypes = {
+  default: DefaultNavbarItem,
+  localeDropdown: LocaleDropdownNavbarItem,
+  search: SearchNavbarItem,
+  dropdown: DropdownNavbarItem,
+  html: HtmlNavbarItem,
+  doc: DocNavbarItem,
+  docSidebar: DocSidebarNavbarItem,
+  docsVersion: DocsVersionNavbarItem,
+  docsVersionDropdown: DocsVersionDropdownNavbarItem,
+};
+export default {
+  ...ComponentTypes,
+  "custom-AccessibilityOptions": AccessibilityOptions,
+};