refactor: Use CSS prefers-color-scheme instead of JS-based theme toggle

1 files changed, 30 insertions, 28 deletions

diff --git a/internal/theme/theme.go b/internal/theme/theme.go
index 691afa0..1fc6600 100644
--- a/internal/theme/theme.go
+++ b/internal/theme/theme.go
@@ -117,8 +117,8 @@ func (t *ResolvedTheme) GenerateCSS() string {
 
 	var css strings.Builder
 
-	// Generate CSS variables for dark mode
-	css.WriteString(":root.dark {\n")
+	// Generate CSS variables for dark mode (default)
+	css.WriteString(":root {\n")
 	for key, color := range t.Dark {
 		cssVar := toCSSVariableName(key)
 		css.WriteString(fmt.Sprintf("  %s: %s;\n", cssVar, color))
@@ -126,12 +126,12 @@ func (t *ResolvedTheme) GenerateCSS() string {
 	css.WriteString("}\n\n")
 
 	// Generate CSS variables for light mode
-	css.WriteString(":root, :root.light {\n")
+	css.WriteString("@media (prefers-color-scheme: light) {\n  :root {\n")
 	for key, color := range t.Light {
 		cssVar := toCSSVariableName(key)
-		css.WriteString(fmt.Sprintf("  %s: %s;\n", cssVar, color))
+		css.WriteString(fmt.Sprintf("    %s: %s;\n", cssVar, color))
 	}
-	css.WriteString("}\n")
+	css.WriteString("  }\n}\n")
 
 	return css.String()
 }
@@ -195,8 +195,8 @@ func (t *ResolvedTheme) GenerateVariableOverrides() string {
 /* 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 {
+/* Dark mode (default) - uses theme's dark colors */
+:root {
 	/* Background colors */
 	--bg-primary: var(--theme-background) !important;
 	--bg-secondary: var(--theme-background-panel) !important;
@@ -218,27 +218,29 @@ func (t *ResolvedTheme) GenerateVariableOverrides() string {
 	--status-unknown: var(--theme-text-muted) !important;
 }
 
-/* Dark mode - uses theme's dark colors */
-:root.dark {
-	/* Background colors */
-	--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) !important;
-	
-	/* Text colors */
-	--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) !important;
-	--status-warn: var(--theme-warning) !important;
-	--status-error: var(--theme-error) !important;
-	--status-unknown: var(--theme-text-muted) !important;
+/* Light mode - uses theme's light colors */
+@media (prefers-color-scheme: light) {
+	:root {
+		/* Background colors */
+		--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) !important;
+		
+		/* Text colors */
+		--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) !important;
+		--status-warn: var(--theme-warning) !important;
+		--status-error: var(--theme-error) !important;
+		--status-unknown: var(--theme-text-muted) !important;
+	}
 }
 `
 }