add ColorThemeSelect

src/lib/ColorThemeSelect.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+    import { getColorThemeCode, setColorThemeCode } from "./globals.svelte";
+
+
+  let color_values = [
+    {name: "Default"},
+    {name: "Rei"},
+    {name: "Ai"},
+    {name: "Aqua"},
+    {name: "Neru"},
+    {name: "Gumi"},
+    {name: "Emu"},
+    {name: "Spacegray"},
+    {name: "Haku"},
+    {name: "Miku"},
+    {name: "Defoko"},
+    {name: "Kaito"},
+    {name: "Meiko"},
+    {name: "WhatsApp"},
+    {name: "Teto"},
+    {name: "Ruby"}
+  ];
+
+  // NOT AFFILIATED with the following:
+  // Oshi No Ko right holders, TwinDrill, Crypton Future Media or Meta Platforms!!
+
+  let { value = $bindable(0) } = $props();
+
+  $effect(() => {
+    if (+value !== getColorThemeCode()) {
+      setColorThemeCode(value);
+    }
+  })
+</script>
+
+<ul class="grid">
+  {#each color_values as {name: cname}, cval}
+  <li>
+    <label>
+      <input type="radio" name="color_theme" value={cval} checked={value == cval} onclick={() => {
+        value = cval;
+      }} />
+      <span class="color-nugget" style:--color={`var(--c${+cval}-accent)`}></span>
+      <span>{cname}</span>
+    </label>
+  </li>
+  {/each}
+</ul>
+
+<style>
+  .color-nugget {
+    display: inline-block;
+    height: 1em;
+    width: 1em;
+    border-radius: 1em;
+    background-color: var(--color);
+    border: 1px solid var(--color, var(--border));
+  }
+</style>

src/lib/globals.svelte.ts

@@ -65,6 +65,10 @@ export function getColorThemeCode (): number {
     return health.color_theme;
 }
 
+export function setColorThemeCode(value: number) {
+    health.color_theme = value;
+}
+
 export function isLoaded(): boolean {
     return health.loaded;
 }

src/routes/settings/+layout.svelte

@@ -16,6 +16,6 @@ let { children } = $props();
         </ul>
     {/snippet}
     {#snippet right()}
-        <button class="primary card">Save</button>
+        <button class="primary card" disabled>Save</button>
     {/snippet}
 </SLayout>

src/routes/settings/appearance/+page.svelte

@@ -1,2 +1,11 @@
+<script lang="ts">
+    import ColorThemeSelect from "$lib/ColorThemeSelect.svelte";
+    import { getColorThemeCode } from "$lib/globals.svelte";
 
-TODO
+    let color_theme = $state(getColorThemeCode());
+</script>
+
+<section>
+    <h2>Color theme</h2>
+    <ColorThemeSelect bind:value={color_theme} />
+</section>