Improve theme management and add default theme environment variable #94

env.d.ts

@@ -13,6 +13,7 @@ interface ImportMetaEnv {
     readonly SAFETWITCH_FALLBACK_LOCALE: string
     readonly SAFETWITCH_COMMIT_HASH: string
     readonly SAFETWITCH_TAG: string
+    readonly SAFETWITCH_DEFAULT_THEME: string
     // more env variables...
   }
   

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,

substitute_environment_variables.sh

@@ -10,16 +10,16 @@ else
   export SAFETWITCH_BACKEND_DOMAIN_PLACEHOLDER=SAFETWITCH_BACKEND_DOMAIN_PLACEHOLDER
   export SAFETWITCH_INSTANCE_DOMAIN_PLACEHOLDER=SAFETWITCH_INSTANCE_DOMAIN_PLACEHOLDER
   export SAFETWITCH_HTTPS_PLACEHOLDER=SAFETWITCH_HTTPS_PLACEHOLDER
+  export SAFETWITCH_DEFAULT_THEME_PLACEHOLDER=light
 fi
 
-echo $SAFETWITCH_BACKEND_DOMAIN_PLACEHOLDER
-
 # Replace env vars in files served by NGINX
 for file in $ROOT_DIR/assets/*.js $ROOT_DIR/index.html;
 do
   sed -i 's|'${SAFETWITCH_BACKEND_DOMAIN_PLACEHOLDER}'|'${SAFETWITCH_BACKEND_DOMAIN}'|g' $file
   sed -i 's|'${SAFETWITCH_INSTANCE_DOMAIN_PLACEHOLDER}'|'${SAFETWITCH_INSTANCE_DOMAIN}'|g' $file
   sed -i 's|'${SAFETWITCH_HTTPS_PLACEHOLDER}'|'${SAFETWITCH_HTTPS}'|g' $file
+  sed -i 's|'${SAFETWITCH_DEFAULT_THEME_PLACEHOLDER}'|'${SAFETWITCH_DEFAULT_THEME}'|g' $file
   # Your other variables here...
 done
 
@@ -27,6 +27,7 @@ done
 echo -e "SAFETWITCH_BACKEND_DOMAIN_PLACEHOLDER=${SAFETWITCH_BACKEND_DOMAIN}" > .env.old
 echo -e "SAFETWITCH_INSTANCE_DOMAIN_PLACEHOLDER=${SAFETWITCH_INSTANCE_DOMAIN}" >> .env.old
 echo -e "SAFETWITCH_HTTPS_PLACEHOLDER=${SAFETWITCH_HTTPS}" >> .env.old
+echo -e "SAFETWITCH_DEFAULT_THEME_PLACEHOLDER=${SAFETWITCH_DEFAULT_THEME}" >> .env.old
 
 # Starting NGINX
 nginx -g 'daemon off;'