From e9b6a40fcbc9585f40cdd889223874bff5d43e76 Mon Sep 17 00:00:00 2001
From: 2xburnt <169301814+2xburnt@users.noreply.github.com>
Date: Tue, 18 Aug 2026 15:59:07 +0200
Subject: [PATCH] feat(theme): make default theme configurable

---
 .env.example               | 3 +++
 env.d.ts                   | 1 +
 src/stores/useBaseStore.ts | 9 ++++++++-
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/.env.example b/.env.example
index 4921ff88f8..80f7b15b6d 100644
--- a/.env.example
+++ b/.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
 
diff --git a/env.d.ts b/env.d.ts
index d3de3b4197..7cb13c7597 100644
--- a/env.d.ts
+++ b/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 {
diff --git a/src/stores/useBaseStore.ts b/src/stores/useBaseStore.ts
index 5246435752..82edb3ede4 100644
--- a/src/stores/useBaseStore.ts
+++ b/src/stores/useBaseStore.ts
@@ -9,6 +9,13 @@ 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: () => {
@@ -16,7 +23,7 @@ export const useBaseStore = defineStore('baseStore', {
       earliest: {} as Block,
       latest: {} as Block,
       recents: [] as Block[],
-      theme: (window.localStorage.getItem('theme') || 'dark') as 'light' | 'dark',
+      theme: initialTheme(),
       connected: false,
     };
   },