fix: Prevent flash of light mode on page load

- Default to dark mode by setting class="dark" on html element
- Move theme CSS before external stylesheet to prevent flash
- Only remove dark class if light mode is explicitly preferred
- Add !important to theme variable overrides for precedence

1 files changed, 26 insertions, 24 deletions

diff --git a/internal/theme/theme.go b/internal/theme/theme.go
index 9e3d30b..691afa0 100644
--- a/internal/theme/theme.go
+++ b/internal/theme/theme.go
@@ -185,6 +185,7 @@ func GetColorMapping() map[string]string {
 
 // GenerateVariableOverrides generates CSS that maps OpenCode theme to Kaze's CSS variables
 // This is the proper approach - override the root CSS variables that style.css uses
+// Uses !important to ensure theme overrides take precedence over external CSS
 func (t *ResolvedTheme) GenerateVariableOverrides() string {
 	if t == nil {
 		return ""
@@ -192,51 +193,52 @@ func (t *ResolvedTheme) GenerateVariableOverrides() string {
 
 	return `
 /* OpenCode Theme - Override Kaze CSS Variables */
+/* Uses !important to prevent flash when external CSS loads */
 
 /* Light mode - uses theme's light colors */
 :root, :root.light {
 	/* Background colors */
-	--bg-primary: var(--theme-background);
-	--bg-secondary: var(--theme-background-panel);
-	--bg-tertiary: var(--theme-background-element);
+	--bg-primary: var(--theme-background) !important;
+	--bg-secondary: var(--theme-background-panel) !important;
+	--bg-tertiary: var(--theme-background-element) !important;
 	
 	/* Border color */
-	--border-color: var(--theme-border);
+	--border-color: var(--theme-border) !important;
 	
 	/* Text colors */
-	--text-primary: var(--theme-text);
-	--text-secondary: var(--theme-text-muted);
-	--text-tertiary: var(--theme-text-muted);
-	--text-dim: var(--theme-border);
+	--text-primary: var(--theme-text) !important;
+	--text-secondary: var(--theme-text-muted) !important;
+	--text-tertiary: var(--theme-text-muted) !important;
+	--text-dim: var(--theme-border) !important;
 	
 	/* Status colors */
-	--status-ok: var(--theme-success);
-	--status-warn: var(--theme-warning);
-	--status-error: var(--theme-error);
-	--status-unknown: var(--theme-text-muted);
+	--status-ok: var(--theme-success) !important;
+	--status-warn: var(--theme-warning) !important;
+	--status-error: var(--theme-error) !important;
+	--status-unknown: var(--theme-text-muted) !important;
 }
 
 /* Dark mode - uses theme's dark colors */
 :root.dark {
 	/* Background colors */
-	--bg-primary: var(--theme-background);
-	--bg-secondary: var(--theme-background-panel);
-	--bg-tertiary: var(--theme-background-element);
+	--bg-primary: var(--theme-background) !important;
+	--bg-secondary: var(--theme-background-panel) !important;
+	--bg-tertiary: var(--theme-background-element) !important;
 	
 	/* Border color */
-	--border-color: var(--theme-border);
+	--border-color: var(--theme-border) !important;
 	
 	/* Text colors */
-	--text-primary: var(--theme-text);
-	--text-secondary: var(--theme-text-muted);
-	--text-tertiary: var(--theme-text-muted);
-	--text-dim: var(--theme-border);
+	--text-primary: var(--theme-text) !important;
+	--text-secondary: var(--theme-text-muted) !important;
+	--text-tertiary: var(--theme-text-muted) !important;
+	--text-dim: var(--theme-border) !important;
 	
 	/* Status colors */
-	--status-ok: var(--theme-success);
-	--status-warn: var(--theme-warning);
-	--status-error: var(--theme-error);
-	--status-unknown: var(--theme-text-muted);
+	--status-ok: var(--theme-success) !important;
+	--status-warn: var(--theme-warning) !important;
+	--status-error: var(--theme-error) !important;
+	--status-unknown: var(--theme-text-muted) !important;
 }
 `
 }