feat: light mode theme and transparency redesign - #276
Open
dimavedenyapin wants to merge 7 commits into
Open
Conversation
Introduce a complete theme system with light and dark mode support, matching the Codex desktop app design reference. Replace all hardcoded dark-only colors with CSS custom properties that adapt to the active theme. Key changes: - Add light/dark theme CSS variables in globals.css with @theme registration for Tailwind CSS 4 utility class generation - Add theme toggle (Light/Dark/System) to Settings > Application Preferences - Add theme state to ui-store with localStorage persistence and system preference detection - Replace 20+ hardcoded hex colors (#141a26, #1a2030, #131820, #0d1117, #161b22, etc.) in canvas components with theme-aware CSS variables - Add translucent sidebar with backdrop-blur-xl effect - Add IPC handler to sync window titlebar/background color on theme change - Update mobile CSS with matching theme variable structure - Update remotion/theme.ts with new palette values - Apply data-theme attribute early in main.tsx to prevent flash Light mode palette: Background #FFFFFF, Foreground #1A1C1F, Accent #339CFF Dark mode palette: Background #181818, Foreground #FFFFFF, Accent #339CFF Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Enable Electron's native vibrancy effect on macOS so the sidebar shows the desktop wallpaper through it, matching the Codex design reference. - BrowserWindow: transparent + vibrancy 'under-window' + visualEffectState 'active' - html/body/#root backgrounds transparent on macOS so native blur shows through - Top bar gets backdrop-blur-xl with semi-transparent background - Sidebar's rgba background (0.70 opacity) + backdrop-blur lets vibrancy through - Main content area retains opaque bg-background - Windows/Linux keep opaque backgrounds (no native vibrancy available) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Remove transparent:true from BrowserWindow (conflicts with vibrancy on Electron 34)
- Re-apply setVibrancy('under-window') in ready-to-show and on theme switch
- Disable CSS backdrop-filter on macOS vibrancy elements to prevent compositing layer conflicts
- Add light/dark terminal color palettes with live theme switching
- Terminal background and colors now update when app theme changes
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This reverts commit 2d28f0a.
Replace Electron's built-in vibrancy API with electron-liquid-glass which uses native NSGlassEffectView on macOS 26+ (Liquid Glass) and falls back to NSVisualEffectView on older systems. Key changes: - Install electron-liquid-glass for native glass effect - Remove `vibrancy` from BrowserWindow (conflicts with glass view) - Keep `transparent: true` + `backgroundColor: '#00000000'` - Apply glass view after did-finish-load via liquidGlass.addView() - Glass sits behind all web content — semi-transparent CSS areas (sidebar, top bar) let it through; opaque areas block it - Add light/dark terminal color palettes with live theme switching Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…canvas minimap Use dark: variant prefixes for text colors that were too faint on light backgrounds (badges, dashboard status columns, source badges). Update dialog overlays to use --color-overlay CSS variable for proper theme-aware dimming. Make canvas minimap viewport rect and panel strokes adapt to current theme. Reduce shadow intensity in light mode for a softer look. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
dimavedenyapin
force-pushed
the
feat/light-mode-theme-redesign
branch
from
May 9, 2026 03:39
0beb73d to
d65f328
Compare
The rebase conflict resolution incorrectly kept select-none on panels, conflicting with PR #285 which intentionally removed it for text selection. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
data-themeattribute), Tailwind CSS 4@themetokens, and a Light/Dark/System toggle in Settingselectron-liquid-glass— usesNSGlassEffectViewon macOS 26+ (Liquid Glass) and falls back toNSVisualEffectViewon older macOSglobals.cssupdated with the same theme variable structureKey design values
#FFFFFFbg,#1A1C1Ffg,#339CFFaccent, translucent sidebarrgba(255,255,255,0.70)#181818bg,#FFFFFFfg,#339CFFaccent, translucent sidebarrgba(24,24,24,0.70)Native glass approach (macOS)
electron-liquid-glasswhich wraps nativeNSGlassEffectViewtransparent: true+backgroundColor: '#00000000'on BrowserWindowvibrancyoption — it conflicts with the glass view and makes things blurrydid-finish-loadvialiquidGlass.addView()rgba(255,255,255,0.70), top barbg-background/80) let it through; opaque areas (bg-background) block itNSVisualEffectViewon older macOS, no-op on Windows/LinuxTest plan
tsconfig.node.jsonandtsconfig.web.json)🤖 Generated with Claude Code