Finish theme selector

src/App.vue

@@ -4,11 +4,13 @@ import NavbarItem from './components/NavbarView.vue'
 import FooterItem from './components/FooterView.vue'
 import DevWarning from './components/DevWarning.vue'
 
+import { getTheme } from '@/settingsManager'
+
 const dev = import.meta.env.DEV
 </script>
 
 <template class="h-full flex flex-row">
-  <div class="light bg-primary">
+  <div :class="getTheme()" class="bg-primary">
     <dev-warning v-if="dev"></dev-warning>
     <navbar-item></navbar-item>
 

src/locales

@@ -1 +1 @@
-Subproject commit b0f6c8230dceb847d2df2eb79cdd272aa2cd85f4
+Subproject commit ab47fd80cc24baa7df8a53a9f481ff367ca74e6d

src/settingsManager.ts

@@ -83,6 +83,10 @@ export function getSetting(key: string): boolean | string {
     return parsed[key].selected
 }
 
+export function getTheme() {
+    return localStorage.getItem('theme') || "light"
+}
+
 export function chatVisible() {
     const p = getSetting('chatVisible')
     // Flip becuase on the setting page it's

src/views/SettingsView.vue

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { ref } from 'vue'
 import { getDefaultSettings, syncUserSettings, setLanguage, themeList } from '@/settingsManager'
 
 export default {
@@ -13,9 +14,12 @@ export default {
       settings = JSON.parse(storedSettings)
     }
 
+    let selectedTheme = localStorage.getItem('theme') || "light"
+
     return {
       settings,
-      themeList
+      themeList,
+      selectedTheme: ref(selectedTheme)
     }
   },
   methods: {
@@ -24,8 +28,18 @@ export default {
       localStorage.setItem('settings', settings)
       setLanguage(this.settings.language.selected, this.$i18n)
 
+      this.setTheme()
       // Reload needed
       location.href = "/"
+    },
+    setTheme() {
+      localStorage.setItem('theme', this.selectedTheme)
+    },
+    highlight(theme: string) {
+      if (this.selectedTheme == theme) {
+        return 'border-purple'
+      }
+      return "border-none"
     }
     //     download() {
     //         var hiddenElement = document.createElement('a');
@@ -57,18 +71,14 @@ export default {
     <ul class="w-full space-y-1">
       <li v-for="setting in settings" :key="setting.type">
         <div v-if="setting.type == 'checkbox'" class="justify-between items-center flex">
-          <label :for="setting.name">{{ $t(`settings.${setting.name}`)  }}</label>
+          <label :for="setting.name">{{ $t(`settings.${setting.name}`) }}</label>
           <input :name="setting.name" type="checkbox" v-model="setting.selected" />
         </div>
 
         <div v-else-if="setting.type == 'option'" class="justify-between items-center flex">
           <label :for="setting.name">{{ $t(`settings.${setting.name}`) }}</label>
-          <select
-            :name="setting.name"
-            type="checkbox"
-            v-model="setting.selected"
-            class="text-black rounded-md h-8 p-0 pr-8 pl-2"
-          >
+          <select :name="setting.name" type="checkbox" v-model="setting.selected"
+            class="text-black rounded-md h-8 p-0 pr-8 pl-2">
             <option v-for="option of setting.options" :key="option" :value="option">
               {{ option }}
             </option>
@@ -77,11 +87,17 @@ export default {
       </li>
     </ul>
 
-    <h1 class="font-bold text-3xl mt-2">{{ $t("nav.theme") }}</h1>
+    <h1 class="font-bold text-3xl mt-2">{{ $t("main.themes") }}</h1>
     <hr class="my-2" />
-    <ul>
-      <li v-for="theme in themeList" :key="theme.name">
-      {{ theme.name }}</li>
+    <ul class="flex space-x-2 ">
+      <!-- 
+        Use theme colors for preview
+       -->
+      <li v-for="theme in themeList" :key="theme.name" class="hover:scale-110 border-2 rounded-md transition-transform" :class="highlight(theme.name)">
+        <button @click="selectedTheme = theme.name" class="p-5 py-1.5 border-4 rounded-md" :style="`border-color: ${theme.extend.colors.primary}; background:${theme.extend.colors.crust}; color:${theme.extend.colors.contrast};`">
+          <p>{{ theme.name }}</p>
+        </button>
+      </li>
     </ul>
 
     <div class="space-x-2 mt-3">