Add:Theme option setting #916

components/ui/LoadingIndicator.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="w-40">
-    <div class="bg-bg border border-gray-500 py-2 px-5 rounded-lg flex items-center flex-col box-shadow-md">
+    <div class="bg-bg border border-border py-2 px-5 rounded-lg flex items-center flex-col box-shadow-md">
       <div class="loader-dots block relative w-20 h-5 mt-2">
         <div class="absolute top-0 mt-1 w-3 h-3 rounded-full bg-green-500"></div>
         <div class="absolute top-0 mt-1 w-3 h-3 rounded-full bg-green-500"></div>
         <div class="absolute top-0 mt-1 w-3 h-3 rounded-full bg-green-500"></div>
         <div class="absolute top-0 mt-1 w-3 h-3 rounded-full bg-green-500"></div>
       </div>
-      <div class="text-gray-200 text-xs font-light mt-2 text-center">{{ text }}</div>
+      <div class="text-fg text-xs font-light mt-2 text-center">{{ text }}</div>
     </div>
   </div>
 </template>

pages/settings.vue

@@ -27,6 +27,12 @@
         <ui-text-input :value="languageOption" readonly append-icon="expand_more" style="max-width: 225px" />
       </div>
     </div>
+    <div class="py-3 flex items-center">
+      <p class="pr-4 w-36">{{ $strings.LabelTheme }}</p>
+      <div @click.stop="showThemeOptions">
+        <ui-text-input :value="themeOption" readonly append-icon="expand_more" style="max-width: 225px" />
+      </div>
+    </div>
 
     <!-- Playback settings -->
     <p class="uppercase text-xs font-semibold text-fg-muted mb-2 mt-10">{{ $strings.HeaderPlaybackSettings }}</p>
@@ -165,6 +171,7 @@ export default {
         autoSleepTimerAutoRewindTime: 300000, // 5 minutes
         languageCode: 'en-us'
       },
+      theme: 'dark',
       lockCurrentOrientation: false,
       settingInfo: {
         disableShakeToResetSleepTimer: {
@@ -256,6 +263,18 @@ export default {
     languageOptionItems() {
       return this.$languageCodeOptions || []
     },
+    themeOptionItems() {
+      return [
+        {
+          text: this.$strings.LabelThemeDark,
+          value: 'dark'
+        },
+        {
+          text: this.$strings.LabelThemeLight,
+          value: 'light'
+        }
+      ]
+    },
     currentJumpForwardTimeIcon() {
       return this.jumpForwardItems[this.currentJumpForwardTimeIndex].icon
     },
@@ -281,6 +300,9 @@ export default {
     languageOption() {
       return this.languageOptionItems.find((i) => i.value === this.settings.languageCode)?.text || ''
     },
+    themeOption() {
+      return this.themeOptionItems.find((i) => i.value === this.theme)?.text || ''
+    },
     sleepTimerLengthOption() {
       if (!this.settings.sleepTimerLength) return this.$strings.LabelEndOfChapter
       const minutes = Number(this.settings.sleepTimerLength) / 1000 / 60
@@ -294,6 +316,7 @@ export default {
       if (this.moreMenuSetting === 'shakeSensitivity') return this.shakeSensitivityItems
       else if (this.moreMenuSetting === 'hapticFeedback') return this.hapticFeedbackItems
       else if (this.moreMenuSetting === 'language') return this.languageOptionItems
+      else if (this.moreMenuSetting === 'theme') return this.themeOptionItems
       return []
     }
   },
@@ -324,6 +347,10 @@ export default {
       this.moreMenuSetting = 'language'
       this.showMoreMenuDialog = true
     },
+    showThemeOptions() {
+      this.moreMenuSetting = 'theme'
+      this.showMoreMenuDialog = true
+    },
     clickMenuAction(action) {
       this.showMoreMenuDialog = false
       if (this.moreMenuSetting === 'shakeSensitivity') {
@@ -335,8 +362,15 @@ export default {
       } else if (this.moreMenuSetting === 'language') {
         this.settings.languageCode = action
         this.saveSettings()
+      } else if (this.moreMenuSetting === 'theme') {
+        this.theme = action
+        this.saveTheme(action)
       }
     },
+    saveTheme(theme) {
+      document.documentElement.dataset.theme = theme
+      this.$localStore.setTheme(theme)
+    },
     autoSleepTimerTimeUpdated(val) {
       if (!val) return // invalid times return falsy
       this.saveSettings()
@@ -461,6 +495,7 @@ export default {
     },
     async init() {
       this.loading = true
+      this.theme = (await this.$localStore.getTheme()) || 'dark'
       this.deviceData = await this.$db.getDeviceData()
       this.$store.commit('setDeviceData', this.deviceData)
       this.setDeviceSettings()

plugins/init.client.js

@@ -245,6 +245,13 @@ export default ({ store, app }, inject) => {
   const eventBus = new Vue()
   inject('eventBus', eventBus)
 
+  // Set theme
+  app.$localStore?.getTheme()?.then((theme) => {
+    if (theme) {
+      document.documentElement.dataset.theme = theme
+    }
+  })
+
   // iOS Only
   //  backButton event does not work with iOS swipe navigation so use this workaround
   if (app.router && Capacitor.getPlatform() === 'ios') {

plugins/localStore.js

@@ -141,6 +141,25 @@ class LocalStorage {
       return false
     }
   }
+
+  async setTheme(theme) {
+    try {
+      await Preferences.set({ key: 'theme', value: theme })
+      console.log('[LocalStorage] Set theme', theme)
+    } catch (error) {
+      console.error('[LocalStorage] Failed to set theme', error)
+    }
+  }
+
+  async getTheme() {
+    try {
+      var obj = await Preferences.get({ key: 'theme' }) || {}
+      return obj.value || null
+    } catch (error) {
+      console.error('[LocalStorage] Failed to get theme', error)
+      return false
+    }
+  }
 }