initial commit

src/features/theme/picker.tsx

@@ -0,0 +1,69 @@
+import {
+  WiMoonAltFirstQuarter,
+  WiMoonAltFull,
+  WiMoonAltNew,
+} from "solid-icons/wi";
+import {
+  Component,
+  createEffect,
+  For,
+  Match,
+  on,
+  Setter,
+  Switch,
+} from "solid-js";
+import { ColorScheme, useTheme } from "./context";
+import css from "./picker.module.css";
+import { Select } from "~/components/select";
+
+const colorSchemes: Record<ColorScheme, keyof typeof ColorScheme> =
+  Object.fromEntries(
+    Object.entries(ColorScheme).map(([k, v]) => [v, k])
+  ) as any;
+
+export const ColorSchemePicker: Component = (props) => {
+  const themeContext = useTheme();
+
+  const setScheme: Setter<ColorScheme> = (next) => {
+    if (typeof next === "function") {
+      next = next();
+    }
+
+    themeContext.setColorScheme(next);
+  };
+
+  return (
+    <>
+      <label aria-label="Color scheme picker">
+        <Select
+          id="color-scheme-picker"
+          class={css.picker}
+          value={themeContext.theme.colorScheme}
+          setValue={setScheme}
+          values={colorSchemes}
+        >
+          {(k, v) => (
+            <>
+              <Switch>
+                <Match when={k === ColorScheme.Auto}>
+                  <WiMoonAltFirstQuarter />
+                </Match>
+                <Match when={k === ColorScheme.Light}>
+                  <WiMoonAltNew />
+                </Match>
+                <Match when={k === ColorScheme.Dark}>
+                  <WiMoonAltFull />
+                </Match>
+              </Switch>
+              {v}
+            </>
+          )}
+        </Select>
+      </label>
+
+      {/* <label class={css.hue} aria-label="Hue slider">
+            <input type="range" min="0" max="360" value={theme.hue} onInput={e => setHue(e.target.valueAsNumber)} />
+        </label> */}
+    </>
+  );
+};