implement dark mode

frontend/package.json

@@ -47,12 +47,17 @@
     "react-to-text": "^2.0.1"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.10.0",
     "@eslint/compat": "^1.1.1",
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.9.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
     "@playwright/test": "^1.46.1",
     "@types/cytoscape": "^3.21.8",
+    "@types/cytoscape-avsdf": "^1.0.3",
+    "@types/cytoscape-dagre": "^2.3.3",
+    "@types/cytoscape-fcose": "^2.2.4",
+    "@types/cytoscape-klay": "^3.1.4",
     "@types/d3": "^7.4.3",
     "@types/lodash": "^4.17.7",
     "@types/node": "^22.5.0",
@@ -61,7 +66,7 @@
     "@typescript-eslint/eslint-plugin": "^8.2.0",
     "@typescript-eslint/parser": "^8.2.0",
     "@vitejs/plugin-react-swc": "^3.7.0",
-    "axe-playwright": "^2.0.2",
+    "apca-check": "^0.1.1",
     "eslint-plugin-jsx-a11y": "^6.9.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react-hooks": "^4.6.2",

frontend/src/components/Alert.module.css

@@ -14,7 +14,7 @@
   inset: 0;
   background: var(--color);
   content: "";
-  opacity: 0.1;
+  opacity: 0.25;
 }
 
 .alert > svg {

frontend/src/components/DarkMode.tsx

@@ -0,0 +1,32 @@
+import { useEffect } from "react";
+import { FaRegMoon, FaRegSun } from "react-icons/fa6";
+import { useAtom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
+import Tooltip from "@/components/Tooltip";
+
+/** dark mode state */
+export const darkModeAtom = atomWithStorage("darkMode", false);
+
+/** dark mode toggle */
+export const DarkMode = () => {
+  const [darkMode, setDarkMode] = useAtom(darkModeAtom);
+
+  /** update root element data attribute that switches css color vars */
+  useEffect(() => {
+    document.documentElement.setAttribute("data-dark", String(darkMode));
+  });
+
+  return (
+    <Tooltip content={`Switch to ${darkMode ? "light" : "dark"} mode`}>
+      <button
+        type="button"
+        role="switch"
+        aria-checked={darkMode}
+        style={{ color: "currentColor" }}
+        onClick={() => setDarkMode(!darkMode)}
+      >
+        {darkMode ? <FaRegSun /> : <FaRegMoon />}
+      </button>
+    </Tooltip>
+  );
+};

frontend/src/components/Footer.module.css

@@ -3,7 +3,7 @@
   padding: 40px 20px;
   gap: 10px;
   background: var(--deep);
-  box-shadow: var(--shadow);
+  box-shadow: var(--box-shadow);
   color: var(--white);
   text-align: center;
 }

frontend/src/components/Header.module.css

@@ -13,7 +13,7 @@
   margin-bottom: var(--header-shrink);
   padding: calc(20px - var(--header-padding-shrink));
   background: var(--deep);
-  box-shadow: var(--shadow);
+  box-shadow: var(--box-shadow);
   color: var(--white);
 }
 

frontend/src/components/Header.tsx

@@ -3,6 +3,7 @@ import { FaBars, FaXmark } from "react-icons/fa6";
 import clsx from "clsx";
 import { useElementSize } from "@reactuses/core";
 import Logo from "@/assets/logo.svg?react";
+import { DarkMode } from "@/components/DarkMode";
 import Flex from "@/components/Flex";
 import Link from "@/components/Link";
 import Tooltip from "@/components/Tooltip";
@@ -64,6 +65,7 @@ const Header = () => {
         <Link className={classes.link} to="/about">
           About
         </Link>
+        <DarkMode />
       </nav>
     </Flex>
   );

frontend/src/components/Network.module.css

@@ -2,7 +2,7 @@
   display: grid;
   grid-template-columns: max-content auto;
   width: 100%;
-  box-shadow: var(--shadow);
+  box-shadow: var(--box-shadow);
 }
 
 .expanded {
@@ -19,7 +19,7 @@
   overflow-x: hidden;
   overflow-y: auto;
   background: var(--white);
-  box-shadow: inset -5px 0 5px -5px #00000020;
+  box-shadow: inset -5px 0 5px -7px var(--black);
   overflow-wrap: anywhere;
 }
 

frontend/src/components/Network.tsx

@@ -17,12 +17,25 @@ import {
 } from "react-icons/fa6";
 import clsx from "clsx";
 import cytoscape from "cytoscape";
-import type { Core, Css, EdgeSingular, Layouts, NodeSingular } from "cytoscape";
-import avsdf from "cytoscape-avsdf";
+import type {
+  BreadthFirstLayoutOptions,
+  CircleLayoutOptions,
+  ConcentricLayoutOptions,
+  Core,
+  CoseLayoutOptions,
+  Css,
+  EdgeSingular,
+  GridLayoutOptions,
+  LayoutOptions,
+  Layouts,
+  NodeSingular,
+  RandomLayoutOptions,
+} from "cytoscape";
+import avsdf, { type AvsdfLayoutOptions } from "cytoscape-avsdf";
 import cola from "cytoscape-cola";
-import dagre from "cytoscape-dagre";
-import fcose from "cytoscape-fcose";
-import klay from "cytoscape-klay";
+import dagre, { type DagreLayoutOptions } from "cytoscape-dagre";
+import fcose, { type FcoseLayoutOptions } from "cytoscape-fcose";
+import klay, { type KlayLayoutOptions } from "cytoscape-klay";
 import spread from "cytoscape-spread";
 import { extent } from "d3";
 import { omit, orderBy, startCase, truncate } from "lodash";
@@ -176,6 +189,9 @@ cytoscape.use(klay);
 cytoscape.use(avsdf);
 cytoscape.use(spread);
 
+/** extra props on layout options */
+type LayoutExtras = { label: string };
+
 /** layout algorithms and their options */
 const layouts = [
   {
@@ -184,7 +200,7 @@ const layouts = [
     label: "Random",
     padding,
     boundingBox,
-  },
+  } satisfies RandomLayoutOptions & LayoutExtras,
   {
     /** https://js.cytoscape.org/#layouts/grid */
     name: "grid",
@@ -196,7 +212,7 @@ const layouts = [
     spacingFactor: 1.5,
     condense: true,
     sort: undefined,
-  },
+  } satisfies GridLayoutOptions & LayoutExtras,
   {
     /** https://js.cytoscape.org/#layouts/circle */
     name: "circle",
@@ -209,7 +225,7 @@ const layouts = [
     startAngle: (3 / 2) * Math.PI,
     clockwise: true,
     sort: undefined,
-  },
+  } satisfies CircleLayoutOptions & LayoutExtras,
   {
     /** https://js.cytoscape.org/#layouts/concentric */
     name: "concentric",
@@ -221,7 +237,7 @@ const layouts = [
     minNodeSpacing: minNodeSize,
     avoidOverlap: true,
     spacingFactor: 1,
-  },
+  } satisfies ConcentricLayoutOptions & LayoutExtras,
   /** https://js.cytoscape.org/#layouts/breadthfirst */
   {
     name: "breadthfirst",
@@ -233,34 +249,35 @@ const layouts = [
     grid: false,
     spacingFactor: 1.5,
     avoidOverlap: true,
-  },
+  } satisfies BreadthFirstLayoutOptions & LayoutExtras,
   {
     /** https://js.cytoscape.org/#layouts/cose */
     name: "cose",
     label: "CoSE",
     padding,
     boundingBox,
     componentSpacing: maxNodeSize,
-    idealEdgeLength: edgeLength,
-  },
+    idealEdgeLength: () => edgeLength,
+  } satisfies CoseLayoutOptions & LayoutExtras,
   {
     /** https://github.com/iVis-at-Bilkent/cytoscape.js-fcose?tab=readme-ov-file#api */
     name: "fcose",
     label: "fCoSE",
     padding,
-    quality: "default",
+    quality: "proof",
+    randomize: false,
     animate: false,
     nodeSeparation: minNodeSize,
     idealEdgeLength: edgeLength,
-  },
+  } satisfies FcoseLayoutOptions & LayoutExtras,
   {
     /** https://github.com/cytoscape/cytoscape.js-dagre?tab=readme-ov-file#api */
     name: "dagre",
     label: "Dagre",
     padding,
     boundingBox,
     spacingFactor: 1,
-  },
+  } satisfies DagreLayoutOptions & LayoutExtras,
   {
     /** https://github.com/cytoscape/cytoscape.js-cola?tab=readme-ov-file#api */
     name: "cola",
@@ -273,7 +290,7 @@ const layouts = [
     edgeLength: edgeLength,
     edgeSymDiffLength: edgeLength,
     edgeJaccardLength: edgeLength,
-  },
+  } as LayoutOptions & LayoutExtras,
   {
     /** https://github.com/cytoscape/cytoscape.js-klay?tab=readme-ov-file#api */
     name: "klay",
@@ -288,23 +305,23 @@ const layouts = [
       spacing: minNodeSize,
       thoroughness: 7,
     },
-  },
+  } satisfies KlayLayoutOptions & LayoutExtras,
   {
     /** https://github.com/iVis-at-Bilkent/cytoscape.js-avsdf?tab=readme-ov-file#api */
     name: "avsdf",
     label: "AVSDF",
     padding,
     animate: false,
     nodeSeparation: edgeLength,
-  },
+  } satisfies AvsdfLayoutOptions & LayoutExtras,
   {
     /** https://github.com/cytoscape/cytoscape.js-spread?tab=readme-ov-file#api */
     name: "spread",
     label: "Spread",
     padding,
     boundingBox,
     minDist: edgeLength,
-  },
+  } as LayoutOptions & LayoutExtras,
 ] as const;
 
 /** layout algorithm dropdown options */

frontend/src/components/Popover.module.css

@@ -7,7 +7,7 @@
   gap: 20px;
   border-radius: var(--rounded);
   background: var(--white);
-  box-shadow: 0 0 0 9999px #00000040;
+  box-shadow: 0 0 0 9999px var(--shadow);
 }
 
 .arrow {

frontend/src/components/Section.module.css

@@ -8,7 +8,7 @@
 }
 
 .section:nth-child(even) {
-  background: #fafafa;
+  background: var(--alt-white);
 }
 
 .fill {

frontend/src/components/Select.module.css

@@ -44,7 +44,7 @@
   padding: 0;
   outline: none;
   background: var(--white);
-  box-shadow: var(--shadow);
+  box-shadow: var(--box-shadow);
   list-style: none;
 }
 

frontend/src/components/TableOfContents.module.css

@@ -7,7 +7,7 @@
   translate: 0 calc(-1 * var(--header-shrink));
   border-radius: 0 0 var(--rounded) 0;
   background: var(--white);
-  box-shadow: var(--shadow);
+  box-shadow: var(--box-shadow);
 }
 
 .heading {

frontend/src/components/TextBox.module.css

@@ -32,7 +32,7 @@
   padding: 5px 10px;
   border: solid 2px transparent;
   border-radius: var(--rounded);
-  box-shadow: var(--shadow);
+  box-shadow: var(--box-shadow);
   transition: border-color var(--fast);
 }
 

frontend/src/components/ViewCorner.module.css

@@ -10,7 +10,7 @@
   height: 30px;
   border-radius: 999px;
   background: var(--deep);
-  box-shadow: var(--shadow);
+  box-shadow: var(--box-shadow);
   color: var(--white);
   transition: background var(--fast);
 }

frontend/src/global/effects.css

@@ -4,7 +4,7 @@
   padding: 20px;
   border-radius: var(--rounded);
   background: var(--white);
-  box-shadow: var(--shadow);
+  box-shadow: var(--box-shadow);
   color: var(--black);
 }
 

frontend/src/global/styles.css

@@ -16,6 +16,8 @@ html {
 
 body {
   margin: 0;
+  background: var(--white);
+  color: var(--black);
 }
 
 #app {
@@ -177,8 +179,13 @@ td {
   border-right: solid 1px var(--light-gray);
 }
 
+thead tr:nth-child(odd),
 tr:nth-child(even) {
-  background: #fafafa;
+  background: var(--white);
+}
+
+tr:nth-child(odd) {
+  background: var(--alt-white);
 }
 
 thead tr {
@@ -213,7 +220,9 @@ textarea {
   appearance: none;
   min-width: 0;
   padding: 5px;
-  border: solid 1px black;
+  border: solid 1px var(--black);
+  background: var(--white);
+  color: var(--black);
   font: inherit;
 }