implement theme setting

src/View/Components/optionButton.tsx

@@ -0,0 +1,21 @@
+import * as React from "bloatless-react";
+
+export function OptionButton<T>(
+    text: string,
+    value: T,
+    selection: React.State<T>,
+) {
+    function select() {
+        selection.value = value;
+    }
+    const isSelected = React.createProxyState(
+        [selection],
+        () => selection.value == value,
+    );
+
+    return (
+        <button class="standard" toggle:selected={isSelected} on:click={select}>
+            {text}
+        </button>
+    );
+}

src/View/Components/optionButtonList.tsx

@@ -0,0 +1,19 @@
+import * as React from "bloatless-react";
+import { OptionButton } from "./optionButton";
+
+export function OptionButtonList<T>(
+    options: React.ListState<[string, T]>,
+    selection: React.State<T>,
+) {
+    function OptionToView(option: [string, T]) {
+        const [text, value] = option;
+        return OptionButton(text, value, selection);
+    }
+
+    return (
+        <div
+            class="flex-column gap"
+            children:append={[options, OptionToView]}
+        ></div>
+    );
+}