Add dark mode, refactor styles

src/demo/App.module.css

@@ -1,16 +1,34 @@
+.light {
+  --color-text: black;
+  --color-background: white;
+}
+
+.dark {
+  --color-text: white;
+  --color-background: black;
+}
+
+/* derived variables */
+.page {
+  --color-control-background: rgb(from var(--color-background) r g b / 50%);
+}
+
 .page {
   position: relative;
   height: 100dvh;
+  color: var(--color-text);
 }
 
 .controls {
   position: absolute;
+  display: flex;
+  gap: 1rem;
   left: 50%;
   translate: -50% 0;
   bottom: 2rem;
   padding: 1rem;
   border-radius: 1rem;
-  background: #fffa;
+  background: var(--color-control-background);
   backdrop-filter: blur(0.5rem);
   user-select: none;
 }
@@ -21,7 +39,7 @@
   left: 1rem;
   padding: 1rem;
   border-radius: 1rem;
-  background: #fffa;
+  background: var(--color-control-background);
   backdrop-filter: blur(0.5rem);
   user-select: none;
 }

src/demo/App.tsx

@@ -1,4 +1,10 @@
-import { Show, createEffect, createSignal, onCleanup } from 'solid-js'
+import {
+  Show,
+  createEffect,
+  createMemo,
+  createSignal,
+  onCleanup,
+} from 'solid-js'
 import ui from './App.module.css'
 import { useCamera } from '@/lib/CameraContext'
 import { eventToClip } from '@/utils/eventToClip'
@@ -8,9 +14,11 @@ import {
   closestFirstCircle,
   closestSecondCircle,
   closestThirdCircle,
+  colorScheme,
   debug,
   growUntilRadius,
   nextAnimationFrame,
+  setColorScheme,
   setDebug,
 } from './state'
 import { useCanvas } from '@/lib/CanvasContext'
@@ -19,36 +27,8 @@ import { vec2 } from 'wgpu-matrix'
 import { Root } from '@/lib/Root'
 import { AutoCanvas } from '@/lib/AutoCanvas'
 import { WheelZoomCamera2D } from './WheelZoomCamera2D'
-import { Circles, CircleStyle } from '@/demo/Circles'
-import { vec4f } from 'typegpu/data'
-
-const normalStyle: CircleStyle = {
-  rimColor: vec4f(0, 0, 0, 1),
-  fadeColor: vec4f(0, 0, 0, 1),
-}
-const selectedStyle: CircleStyle = {
-  rimColor: vec4f(0, 0, 0, 1),
-  fadeColor: vec4f(0.5, 0.8, 1, 1),
-}
-const debugStyleFirst: CircleStyle = {
-  rimColor: vec4f(0, 0, 0, 1),
-  fadeColor: vec4f(1, 0, 0, 1),
-}
-const debugStyleSecond: CircleStyle = {
-  rimColor: vec4f(0, 0, 0, 1),
-  fadeColor: vec4f(0, 1, 0, 1),
-}
-const debugStyleThird: CircleStyle = {
-  rimColor: vec4f(0, 0, 0, 1),
-  fadeColor: vec4f(0, 0, 1, 1),
-}
-const circleStyles = [
-  selectedStyle,
-  debugStyleFirst,
-  debugStyleSecond,
-  debugStyleThird,
-  normalStyle,
-]
+import { Circles } from '@/demo/Circles'
+import { CircleStyleType, getTheme } from './style'
 
 function Inside() {
   const {
@@ -129,38 +109,51 @@ function Inside() {
     })
   })
 
-  function styleIndex(circleIndex: number) {
+  const theme = createMemo(() => getTheme(colorScheme()))
+
+  function style(circleIndex: number): CircleStyleType {
     if (circleIndex === selectedCircleIndex()) {
-      return 0
+      return 'selected'
     } else if (debug()) {
       switch (circleIndex) {
         case firstCircleIndex():
-          return 1
+          return 'debugFirst'
         case secondCircleIndex():
-          return 2
+          return 'debugSecond'
         case thirdCircleIndex():
-          return 3
+          return 'debugThird'
       }
     }
-    return 4
+    return 'normal'
   }
 
   return (
     <Circles
       circles={circles.map((c, i) => ({
         ...c,
-        styleIndex: styleIndex(i),
+        styleIndex: theme().getStyleIndex(style(i)),
       }))}
-      styles={circleStyles}
+      clearColor={colorScheme() === 'light' ? [1, 1, 1, 1] : [0, 0, 0, 1]}
+      styles={theme().styles}
     />
   )
 }
 
 export function App() {
   return (
-    <div class={ui.page}>
+    <div class={ui.page} classList={{ [ui[colorScheme()]]: true }}>
       <div class={ui.circleCounter}>Number of Circles: {circles.length}</div>
       <div class={ui.controls}>
+        <label>
+          <input
+            type="checkbox"
+            checked={colorScheme() === 'dark'}
+            onChange={(ev) =>
+              setColorScheme(ev.target.checked ? 'dark' : 'light')
+            }
+          />{' '}
+          Dark
+        </label>
         <label>
           <input
             type="checkbox"

src/demo/state.ts

@@ -2,6 +2,7 @@ import { Accessor, createSignal } from 'solid-js'
 import { createStore, produce, unwrap } from 'solid-js/store'
 import { vec2 } from 'wgpu-matrix'
 import { v2f, vec2f } from 'typegpu/data'
+import { getPreferredColorScheme } from '@/utils/getPreferredColorScheme'
 
 const { sign, sqrt, abs, min, max } = Math
 
@@ -38,6 +39,9 @@ function vec2Normalize(a: v2f) {
 // }))
 export const [circles, setCircles] = createStore<Circle[]>([])
 export const [debug, setDebug] = createSignal(false)
+export const [colorScheme, setColorScheme] = createSignal(
+  getPreferredColorScheme(),
+)
 
 export function chooseOrCreateCircle(xy: v2f): number {
   const circles_ = unwrap(circles)

src/demo/style.ts

@@ -0,0 +1,76 @@
+import { vec4f } from 'typegpu/data'
+import { CircleStyle } from './Circles'
+import { enumerate } from '@/utils/enumerate'
+
+export type CircleStyleType =
+  | 'normal'
+  | 'selected'
+  | 'debugFirst'
+  | 'debugSecond'
+  | 'debugThird'
+
+type CircleStyles = Record<CircleStyleType, CircleStyle>
+
+const light: CircleStyles = {
+  normal: {
+    rimColor: vec4f(0, 0, 0, 1),
+    fadeColor: vec4f(0, 0, 0, 1),
+  },
+  selected: {
+    rimColor: vec4f(0, 0, 0, 1),
+    fadeColor: vec4f(0.5, 0.8, 1, 1),
+  },
+  debugFirst: {
+    rimColor: vec4f(0, 0, 0, 1),
+    fadeColor: vec4f(1, 0, 0, 1),
+  },
+  debugSecond: {
+    rimColor: vec4f(0, 0, 0, 1),
+    fadeColor: vec4f(0, 1, 0, 1),
+  },
+  debugThird: {
+    rimColor: vec4f(0, 0, 0, 1),
+    fadeColor: vec4f(0, 0, 1, 1),
+  },
+}
+
+const dark: CircleStyles = {
+  normal: {
+    rimColor: vec4f(1, 1, 1, 1),
+    fadeColor: vec4f(1, 1, 1, 1),
+  },
+  selected: {
+    rimColor: vec4f(1, 1, 1, 1),
+    fadeColor: vec4f(0.1, 0.3, 0.8, 1),
+  },
+  debugFirst: {
+    rimColor: vec4f(1, 1, 1, 1),
+    fadeColor: vec4f(1, 0, 0, 1),
+  },
+  debugSecond: {
+    rimColor: vec4f(1, 1, 1, 1),
+    fadeColor: vec4f(0, 1, 0, 1),
+  },
+  debugThird: {
+    rimColor: vec4f(1, 1, 1, 1),
+    fadeColor: vec4f(0, 0, 1, 1),
+  },
+}
+
+const themes = {
+  light,
+  dark,
+}
+
+export function getTheme(themeKey: keyof typeof themes) {
+  const theme = themes[themeKey]
+  const styleKeyToIndexMap = Object.fromEntries(
+    enumerate(Object.keys(theme)).map(([i, key]) => [key, i]),
+  ) as Record<CircleStyleType, number>
+  return {
+    styles: Object.values(theme),
+    getStyleIndex(styleKey: CircleStyleType) {
+      return styleKeyToIndexMap[styleKey]
+    },
+  }
+}

src/index.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');
+
 html,
 body {
   margin: 0;

src/utils/enumerate.ts

@@ -0,0 +1,6 @@
+export function* enumerate<T>(items: Iterable<T>) {
+  let i = 0
+  for (const item of items) {
+    yield [i++, item] as const
+  }
+}

src/utils/getPreferredColorScheme.ts

@@ -0,0 +1,4 @@
+export type ColorScheme = 'light' | 'dark'
+export function getPreferredColorScheme(): ColorScheme {
+  return window.matchMedia('(prefers-color-scheme: dark)') ? 'dark' : 'light'
+}