feat: add support for multiple colorschemes

package.json

@@ -40,6 +40,7 @@
     "@vitejs/plugin-vue": "^4.6.2",
     "autoprefixer": "^10.4.20",
     "tailwindcss": "^3.4.10",
+    "tw-colors": "^3.3.2",
     "typescript": "^5.5.4",
     "vite": "^4.5.3",
     "vue-tsc": "^2.0.29"

src/App.vue

@@ -3,6 +3,7 @@ import { StartupState } from "./types";
 import GettingStarted from "./pages/GettingStarted.vue";
 import { ref } from "vue";
 import { invoke } from "@tauri-apps/api/core";
+import { useColorMode } from "@vueuse/core";
 import PageFrame from "./PageFrame.vue";
 import { Toaster } from "@/components/ui/sonner";
 import {
@@ -33,6 +34,28 @@ const isNew = ref(
     potentiallyNewVersion: versionDetails.version,
   }),
 );
+
+let mode = useColorMode({
+  modes: {
+    "Rose Pine Dawn": "rosePineDawn",
+    "Rose Pine Moon": "rosePineMoon",
+    "Rose Pine Dark": "rosePine",
+    "Simple Dark": "simpleDark",
+    "Simple Light": "simpleLight",
+  },
+});
+console.log(mode.value);
+
+switch (mode.value) {
+  case "light":
+    mode.value = "Simple Light";
+    break;
+  case "dark":
+    mode.value = "Rose Pine Moon";
+    break;
+  case "auto":
+    mode.value = "Simple Light";
+}
 </script>
 
 <template>

src/components/ExportButton.vue

@@ -106,7 +106,7 @@ whenever(keys.ctrl_shift_e, async () => {
       "
     >
       <div class="flex bottom-0 justify-center py-3">
-        <Button variant="destructive"> Export </Button>
+        <Button> Export </Button>
       </div>
     </DialogTrigger>
     <DialogContent class="select-none">

src/main.ts

@@ -1,6 +1,5 @@
 import { createApp } from "vue";
 import { createRouter, createWebHistory } from "vue-router";
-import { useDark } from "@vueuse/core";
 
 import App from "./App.vue";
 import Settings from "./pages/settings/Index.vue";
@@ -45,5 +44,3 @@ const app = createApp(SyncApp);
 app.use(router);
 
 app.mount("#app");
-
-useDark();

src/pages/settings/Settings.vue

@@ -18,7 +18,7 @@ import { type Ref, ref, watch, reactive, nextTick } from "vue";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import type { Settings } from "@/types";
-import { useDark } from "@vueuse/core";
+import { useColorMode } from "@vueuse/core";
 import {
   Collapsible,
   CollapsibleContent,
@@ -41,8 +41,17 @@ import {
 } from "@/components/ui/number-field";
 import EnableStanza from "@/components/EnableStanza.vue";
 import { Separator } from "@/components/ui/separator";
+import StyledCombobox from "@/components/StyledCombobox.vue";
 
-const isDark = useDark();
+const mode = useColorMode({
+  modes: {
+    "Rose Pine Dawn": "rosePineDawn",
+    "Rose Pine Moon": "rosePineMoon",
+    "Rose Pine Dark": "rosePine",
+    "Simple Dark": "simpleDark",
+    "Simple Light": "simpleLight",
+  },
+});
 const router = useRouter();
 
 const installed = await invoke<boolean>("check_stanza_installed").catch(
@@ -214,7 +223,18 @@ async function newLanguage(language: string) {
           title="Appearance"
           description="Configure how Kalba looks"
         />
-        <Switch id="theme" v-model:checked="isDark" />
+        <StyledCombobox
+          id="theme"
+          v-model="mode"
+          item-being-selected="colorscheme"
+          :options="[
+            'Rose Pine Dawn',
+            'Rose Pine Moon',
+            'Rose Pine Dark',
+            'Simple Dark',
+            'Simple Light',
+          ]"
+        />
         <Label for="theme">Use dark mode</Label>
 
         <h2 class="mt-1">Definition styling</h2>