Improve theme management and add default theme environment variable #94

src/settingsManager.ts

@@ -203,8 +203,24 @@ export function getFollows(): string[] {
  * @returns the name of the current theme
  * @default string light
  */
-export function getTheme() {
-  return localStorage.getItem('theme') || 'light'
+export function getTheme(): string {
+  const selectedTheme = localStorage.getItem('theme') || import.meta.env.SAFETWITCH_DEFAULT_THEME
+
+  if (selectedTheme === "") {
+    return 'light'
+  }
+
+  // Make sure theme exists
+  const t = themeList.filter(theme => theme.name === selectedTheme)
+  if (t.length === 0) {
+    console.error(`Theme ${selectedTheme} does not exist... Perhaps improperly setup instance defaults or improper config?
+    Stored Theme: ${localStorage.getItem('theme')}
+    Default Theme: ${import.meta.env.SAFETWITCH_DEFAULT_THEME}
+    `)
+    return 'light'
+  }
+
+  return selectedTheme
 }
 
 // every avaliable theme

src/views/HomepageView.vue

@@ -11,7 +11,6 @@ import type { CategoryPreview as CategoryPreviewInterface } from '@/types'
 import { getFollows } from '@/settingsManager'
 
 export default {
-  inject: ['protocol'],
   async setup() {
     let data = ref<CategoryPreviewInterface[]>()
     let status = ref<'ok' | 'error'>()

src/views/SettingsView.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { ref } from 'vue'
-import { getDefaultSettings, syncUserSettings, setLanguage, themeList } from '@/settingsManager'
+import { getDefaultSettings, syncUserSettings, setLanguage, themeList, getTheme } from '@/settingsManager'
 import type { Settings } from '@/settingsManager'
 
 export default {
@@ -18,7 +18,7 @@ export default {
       settings = syncResp.settings
     }
 
-    let selectedTheme = localStorage.getItem('theme') || 'light'
+    let selectedTheme = getTheme()
 
     return {
       settings,