feat(theme): make default theme configurable

.env.example

@@ -9,6 +9,9 @@ VITE_FETCH_ALL_BLOCKS=false
 # Limit for recent blocks and associated transactions displayed in the UI
 VITE_RECENT_BLOCK_LIMIT=50
 
+# Default color theme when the user has no saved preference (light or dark)
+VITE_DEFAULT_THEME=dark
+
 # URL for CoinGecko API or custom proxy
 VITE_COINGECKO_URL=https://api.coingecko.com
 

env.d.ts

@@ -11,6 +11,7 @@ interface ImportMetaEnv {
     readonly VITE_GITHUB_API_URL?: string,
     readonly VITE_PINGPUB_API_URL?: string,
     readonly VITE_IBC_USE_GITHUB_API?: string,
+    readonly VITE_DEFAULT_THEME?: 'light' | 'dark',
 }
 
 interface ImportMeta {

src/stores/useBaseStore.ts

@@ -9,14 +9,21 @@ import { fromBase64 } from '@cosmjs/encoding';
 // `"false"` is a truthy string, so compare explicitly.
 const FETCH_ALL_BLOCKS = import.meta.env.VITE_FETCH_ALL_BLOCKS === 'true';
 const RECENT_BLOCKS_LIMIT = Number(import.meta.env.VITE_RECENT_BLOCK_LIMIT) || 50;
+type Theme = 'light' | 'dark';
+const DEFAULT_THEME: Theme = import.meta.env.VITE_DEFAULT_THEME === 'light' ? 'light' : 'dark';
+
+function initialTheme(): Theme {
+  const storedTheme = window.localStorage.getItem('theme');
+  return storedTheme === 'light' || storedTheme === 'dark' ? storedTheme : DEFAULT_THEME;
+}
 
 export const useBaseStore = defineStore('baseStore', {
   state: () => {
     return {
       earliest: {} as Block,
       latest: {} as Block,
       recents: [] as Block[],
-      theme: (window.localStorage.getItem('theme') || 'dark') as 'light' | 'dark',
+      theme: initialTheme(),
       connected: false,
     };
   },