Only save the themeColor setting on end of input (#5618)

* Only save the themeColor setting on end of input

Closes #4463 by making this input sliders less eager to write to disk,
which was gumming up the works.

* fmt

src/lib/settings/initialSettings.tsx

@@ -154,25 +154,42 @@ export function createSettings() {
         defaultValue: '264.5',
         description: 'The hue of the primary theme color for the app',
         validate: (v) => Number(v) >= 0 && Number(v) < 360,
-        Component: ({ value, updateValue }) => (
+        Component: ({ value, updateValue }) => {
+          const preview = (e: React.SyntheticEvent) =>
+            e.isTrusted &&
+            'value' in e.currentTarget &&
+            document.documentElement.style.setProperty(
+              `--primary-hue`,
+              String(e.currentTarget.value)
+            )
+          const save = (e: React.SyntheticEvent) =>
+            e.isTrusted &&
+            'value' in e.currentTarget &&
+            e.currentTarget.value &&
+            updateValue(String(e.currentTarget.value))
+          return (
             <div className="flex item-center gap-4 px-2 m-0 py-0">
               <div
                 className="w-4 h-4 rounded-full bg-primary border border-solid border-chalkboard-100 dark:border-chalkboard-30"
                 style={{
-                backgroundColor: `oklch(var(--primary-lightness) var(--primary-chroma) ${value})`,
+                  backgroundColor: `oklch(var(--primary-lightness) var(--primary-chroma) var(--primary-hue))`,
                 }}
               />
               <input
                 type="range"
-              onChange={(e) => updateValue(e.currentTarget.value)}
+                onInput={preview}
-              value={value}
+                onMouseUp={save}
+                onKeyUp={save}
+                onPointerUp={save}
+                defaultValue={value}
                 min={0}
                 max={259}
                 step={1}
                 className="block flex-1"
               />
             </div>
-        ),
+          )
+        },
       }),
       /**
        * Whether to show the debug panel, which lets you see