🤖 feat: add light theme support with toggle keybind #623
Conversation
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
mux/src/components/Messages/MarkdownComponents.tsx
Lines 98 to 102 in 731d241
Re-run code block highlighting when theme changes
The CodeBlock effect renders Shiki HTML once and only depends on [code, language]. When App toggles the data-theme attribute, existing code blocks keep the colors from the previous theme because the effect never re‑executes to call getShikiTheme() again. Users who switch to light mode (or reload with light mode persisted) will still see dark-theme code blocks until the message is re-rendered, which defeats the new theme toggle for a common UI element.
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Implement a light theme for mux with keyboard shortcut to toggle between light and dark themes. Changes: - Add light theme CSS variables in globals.css using [data-theme='light'] selector - Add theme state management in App.tsx using usePersistedState (global, not per-workspace) - Add 'Toggle Theme' command in command palette with Cmd+Option+T / Ctrl+Alt+T keybind - Update Shiki syntax highlighting to dynamically use theme-appropriate colors (min-light vs min-dark) - Update Mermaid diagrams to re-initialize with current theme on render - Add THEME_KEY constant to storage.ts for theme persistence - Default theme remains dark for existing users The theme preference persists across reloads via localStorage and applies to all code blocks, diffs, and mermaid diagrams. _Generated with `mux`_
- Remove Cmd+Option+T / Ctrl+Alt+T keybind for theme toggle - Keep theme toggle as command palette action only - Add Storybook global theme switcher in toolbar - All stories now support both light and dark theme preview - Theme switcher appears as sun/moon icons in Storybook toolbar
kylecarbs
force-pushed
the
light-theme-implementation
branch
from
731d241 to
0a0d979
Compare
Tailwind CSS v4's @theme directive doesn't support nested selectors. Use standard CSS selector [data-theme='light'] { } instead.
- Apply theme to both document.documentElement and document.body - Wrap Story in div with data-theme attribute and background/foreground colors - Ensures theme persists and doesn't flash back to dark
- Create ThemeContext with useTheme hook for cleaner theme access - Remove duplicate theme logic from App.tsx - Simplify Storybook decorator to just apply data-theme attribute - Components can now use useTheme() instead of reading document.documentElement - Centralize all theme logic in one place
1 participant
Implements a light theme for mux with a keyboard shortcut to toggle between light and dark themes.
Implementation
Theme System
[data-theme="light"]selector for light theme overridesdata-themeattribute on root HTML elementChanges
globals.cssApp.tsxusingusePersistedStatemin-lighttheme for light mode,min-darkfor dark modedefaulttheme for light,darktheme for dark mode)Color Strategy
Light theme inverts the semantic meaning while maintaining contrast ratios:
hsl(0 0% 98%))hsl(0 0% 15%))Testing
Net LoC
+230 lines (180 for light theme CSS, 50 for state management and dynamic theme application)
Generated with
mux