From 90d9451d7cdae596adf42362fed6c3fa54884193 Mon Sep 17 00:00:00 2001 From: Fuwn Date: Tue, 20 Jan 2026 04:41:41 -0800 Subject: 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 --- internal/theme/theme.go | 50 +++++++++++++++++++++++++------------------------ 1 file changed, 26 insertions(+), 24 deletions(-) (limited to 'internal/theme') 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; } ` } -- cgit v1.2.3