implement themes (#36)

* draft themes

* implement persistent setting

* design selected/unselected graphics and tooltips

* add themes

* localize

* reset the current theme to the default theme if it doesn't exist anymore

* lint check

---------

Co-authored-by: nae <[email protected]>

src/components/settings/Appearance.vue

@@ -2,6 +2,31 @@
   <v-card :title="$t('settings.appearance.title')" :subtitle="$t('settings.appearance.description')" color="transparent" flat>
     <v-divider />
     <v-card-text>
+      <v-row>
+        <v-col :cols="12">
+          <p class="text-h6" label color="secondary">
+            {{ $t('settings.appearance.theme') }}
+          </p>
+        </v-col>
+        <v-col :cols="12" :md="8">
+          <v-btn
+            v-for="(theme_id, key) in theme.themes.value"
+            icon
+            variant="flat"
+            :color="theme_id.colors.primary"
+            class="mr-2 mb-2 border-md"
+            :class="(key === appearanceStore.current_theme) ? 'theme_selected' : 'theme_unselected'"
+            @click="set_theme(key)"
+          >
+            <v-tooltip
+              activator="parent"
+              location="top"
+              :text="to_title_case(key.replace('_', ' '))"
+            />
+          </v-btn>
+        </v-col>
+        <v-divider />
+      </v-row>
       <v-row>
         <v-col :cols="12">
           <p class="text-h6" label color="secondary">
@@ -144,16 +169,19 @@
 </template>
 
 <script lang="ts">
+import { useTheme } from 'vuetify'
 import { useAppearanceStore } from '@/stores/appearance'
 import { get_fonts } from '@/helpers/get_fonts'
 
 export default {
   name: 'SettingsGeneral',
   setup() {
     const appearanceStore = useAppearanceStore()
+    const theme = useTheme()
 
     return {
       appearanceStore,
+      theme,
     }
   },
   data() {
@@ -176,6 +204,31 @@ export default {
       if (link)
         window.open(link, '_blank')
     },
+    to_title_case(str: string): string {
+      return str.replace(/\w\S*/g, (str2) => {
+        return str2.charAt(0).toUpperCase() + str2.substring(1).toLowerCase()
+      })
+    },
+    set_theme(selected_theme: string) {
+      this.theme.global.name.value = selected_theme // Immediately set the current theme to the selected theme.
+      this.appearanceStore.current_theme = selected_theme // Store the setting.
+    },
   },
 }
 </script>
+
+<style>
+.v-tooltip > .v-overlay__content {
+  background: #222 !important;
+  color: #ddd !important;
+  transition-property: opacity !important;
+}
+
+.theme_selected {
+  border-color: rgba(255,255,255,1) !important;
+}
+
+.theme_unselected {
+  border-color: rgba(255,255,255,0.25) !important;
+}
+</style>

src/pages/Home.vue

@@ -21,6 +21,7 @@
 <script lang="ts">
 // import {ipcRenderer} from "electron"
 import { useDisplay } from 'vuetify'
+import { useTheme } from 'vuetify'
 
 import is_electron from '@/helpers/is_electron'
 
@@ -40,6 +41,7 @@ export default {
   },
   setup() {
     const { height } = useDisplay()
+    const theme = useTheme()
 
     const settingsStore = useSettingsStore()
     const appearanceStore = useAppearanceStore()
@@ -66,6 +68,7 @@ export default {
       font_name,
       font_subtype,
       height,
+      theme,
     }
   },
   data() {
@@ -103,6 +106,11 @@ export default {
     outer_size: () => is_electron() ? '90px' : '55px',
   },
   mounted() {
+    if (this.appearanceStore.current_theme in this.theme.themes.value)
+      this.theme.global.name.value = this.appearanceStore.current_theme // Set the theme from the user's settings.
+    else
+      this.theme.global.name.value = 'midnight_purple'
+
     this.overlay_main = this.settingsStore.welcome
     this.onResize()
   },

src/plugins/localization/en.ts

@@ -79,6 +79,7 @@ export default {
     appearance: {
       title: 'Appearance',
       description: 'Change the appearance of the app',
+      theme: 'Theme',
       text: {
         title: 'Text Settings',
         font_family: 'Font family',

src/plugins/localization/es.ts

@@ -77,6 +77,7 @@ export default {
     appearance: {
       title: 'Apariencia',
       description: 'Cambiar la apariencia de la aplicación',
+      theme: 'Tema',
       text: {
         title: 'Ajusts de Texto',
         font_family: 'Fuente',

src/plugins/localization/ja.ts

@@ -79,6 +79,7 @@ export default {
     appearance: {
       title: 'テーマ',
       description: 'アプリのテーマを変更',
+      theme: 'テーマ',
       text: {
         title: '文字設定',
         font_family: 'フォント',

src/plugins/themes/forest_dark.ts

@@ -0,0 +1,7 @@
+export const forest_dark = {
+  dark: true,
+  colors: {
+    primary: '#4CAF50',
+    toggle: '#4CAF50',
+  },
+}

src/plugins/themes/forest_light.ts

@@ -0,0 +1,7 @@
+export const forest_light = {
+  dark: false,
+  colors: {
+    primary: '#4CAF50',
+    toggle: '#4CAF50',
+  },
+}

src/plugins/themes/gold_dark.ts

@@ -0,0 +1,7 @@
+export const gold_dark = {
+  dark: true,
+  colors: {
+    primary: '#FFD700',
+    toggle: '#FFD700',
+  },
+}

src/plugins/themes/gold_light.ts

@@ -0,0 +1,7 @@
+export const gold_light = {
+  dark: false,
+  colors: {
+    primary: '#FFD700',
+    toggle: '#FFD700',
+  },
+}

src/plugins/themes/red_dark.ts

@@ -0,0 +1,7 @@
+export const red_dark = {
+  dark: true,
+  colors: {
+    primary: '#FF5252',
+    toggle: '#FF5252',
+  },
+}

src/plugins/themes/red_light.ts

@@ -0,0 +1,7 @@
+export const red_light = {
+  dark: false,
+  colors: {
+    primary: '#FF5252',
+    toggle: '#FF5252',
+  },
+}

src/plugins/vuetify.ts

@@ -8,13 +8,25 @@ import { createVuetify } from 'vuetify'
 // themes
 import { midnight_purple } from '@/plugins/themes/midnight_purple'
 import { cotton_candy } from '@/plugins/themes/cotton_candy'
+import { red_light } from '@/plugins/themes/red_light'
+import { red_dark } from '@/plugins/themes/red_dark'
+import { gold_dark } from '@/plugins/themes/gold_dark'
+import { gold_light } from '@/plugins/themes/gold_light'
+import { forest_dark } from '@/plugins/themes/forest_dark'
+import { forest_light } from '@/plugins/themes/forest_light'
 
 export default createVuetify({
   theme: {
     defaultTheme: 'midnight_purple',
     themes: {
       midnight_purple,
       cotton_candy,
+      red_light,
+      red_dark,
+      gold_dark,
+      gold_light,
+      forest_dark,
+      forest_light,
     },
   },
 })

src/stores/appearance.ts

@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
 
 export const useAppearanceStore = defineStore('appearance', {
   state: () => ({
+    current_theme: 'midnight_purple',
     text: {
       color: '#FFFFFF',
       interim_color: '#BC96FF', // ⑅•ᴗ•⑅)◜..°♡