fix(editor): follow app theme in Monaco editor panes#171
fix(editor): follow app theme in Monaco editor panes#171mvanhorn wants to merge 1 commit intodanshapiro:mainfrom
Conversation
The Monaco editor was hardcoded to vs-dark theme regardless of the app's light/dark mode setting. Now reads the theme from settings and resolves to vs-dark or vs accordingly. Fixes danshapiro#144
![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
Here are some automated review suggestions for this pull request.
Reviewed commit: 1ec3153e5c
ℹ️ About Codex in GitHub
Codex has been enabled to automatically 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 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| const isDark = | ||
| theme === 'dark' ? true : theme === 'light' ? false : getSystemPrefersDark() |
There was a problem hiding this comment.
When settings.theme is system, this hook recomputes matchMedia on every editor render, but the app theme class is only updated when settings.theme changes (useThemeEffect depends on theme), so an OS light/dark change during a session can make Monaco switch themes while the rest of the app stays on the previous one. In practice, after a system theme flip, any editor re-render (typing, cursor movement, etc.) can cause the editor pane to stop matching the current app theme.
Useful? React with 👍 / 👎.
1 participant
Summary
vs-darktheme regardless of the app's light/dark mode settingvs-darkorvs(light) accordinglyuseThemeEffect(respects dark/light/system settings)Fixes #144
Changes
src/components/panes/EditorPane.tsx: AddeduseMonacoTheme()hook that reads the settings theme and returns the correct Monaco theme stringtest/unit/client/components/panes/EditorPane.test.tsx: Added tests verifying dark and light theme rendering, updated Monaco mock to capture theme propTest plan
npm run typecheckpassesThis contribution was developed with AI assistance (Claude Code).