Docs, ticks, working app

webapp/src/lib/useSettingsPanel.ts

@@ -19,20 +19,22 @@ import {
 /** `data-*` marker used to find/remove previously-injected CSS tags on re-apply. */
 const INJECTED_CSS_ATTR = 'data-ottyl-css-id'
 
+/** Themes selectable independently of `system`, each backed by a `html.<name>` block in `index.css`. */
+const THEME_CLASSES = ['light', 'dark', 'grey', 'red', 'green', 'blue', 'yellow', 'pink', 'orange'] as const
+
 /**
- * Resolves `colorScheme` to an effective `light`/`dark` value (following the
- * OS preference for `system`) and reflects it onto `<html>` as both a class
- * (`light`/`dark`) and a `data-color-scheme` attribute. The app's Tailwind
- * classes are mostly hardcoded to a dark palette (see `index.css`) rather
- * than using `dark:` variants, so "Light" mode is necessarily limited to
- * whatever `index.css` explicitly overrides for `.light` — this is a known,
- * documented limitation rather than a full theme system.
+ * Resolves `colorScheme` to an effective theme (following the OS preference
+ * for `system`, which only ever resolves to `light`/`dark`) and reflects it
+ * onto `<html>` as both a class (see `THEME_CLASSES`) and a
+ * `data-color-scheme` attribute. Every visual role the app uses is a CSS
+ * custom property keyed off that class (see `index.css`), so switching it
+ * re-skins the whole app, not just the base page background.
  */
 function applyColorScheme(colorScheme: ColorScheme) {
   const root = document.documentElement
   const prefersDark = window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? true
   const effective = colorScheme === 'system' ? (prefersDark ? 'dark' : 'light') : colorScheme
-  root.classList.remove('light', 'dark')
+  root.classList.remove(...THEME_CLASSES)
   root.classList.add(effective)
   root.dataset.colorScheme = colorScheme
 }