Fix poor dark-mode contrast in the code editor#21
Merged
Conversation
The vendored Ace "textmate" theme hardcodes light-only syntax colours (plain blue #0000FF keywords/numbers), which read poorly against the dark theme's background. Rather than patch textmate's colours, vendor a second Ace theme actually designed for dark backgrounds and swap the whole theme alongside the app's light/dark toggle: - public/libs/theme-tomorrow_night.js: vendored from ace-builds@1.44.0 (same version as the already-committed ace.js), src-noconflict variant to match the existing theme-textmate.js. Fully local - embedded into the binary via cpp-embedlib at build time like every other file under public/, no runtime fetch. - public/script.js: ACE_THEME_LIGHT/ACE_THEME_DARK constants; applyTheme() now calls aceEditor.setTheme(...) alongside the CSS [data-theme] flip, and initializeEditor() picks the right one on first load. Moved the aceEditor declaration earlier in the file so applyTheme() can read it at the app's very first (pre-editor-init) theme application without a temporal-dead- zone error. - public/style.css: removed the now-dead [data-theme="dark"] .ace-tm overrides from the previous round (dark mode no longer uses the .ace-tm class at all, since it's a different theme now). - AGENTS.md: updated to describe the theme-swap approach. Co-Authored-By: Claude Sonnet 5 <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
tomorrow_night, fromace-builds@1.44.0- same version as the already-committedace.js) instead of patching textmate's colours.script.jsnow swaps the whole Ace theme (ACE_THEME_LIGHT/ACE_THEME_DARK) alongside the app's[data-theme]flip.public/libs/, embedded into the binary at build time exactly like every other frontend asset - no runtime network fetch, same as the rest of the app..ace-tmdark CSS overrides from the previous round (dark mode uses a different theme's class now, not.ace-tm).Test plan
node --check public/script.jspasses.function/letkeywordsrgb(0,0,255)(unchanged, textmate's original blue - fine on white).rgb(178,148,187)(purple), numbersrgb(222,147,95)(orange), commentsrgb(150,152,150)(grey), function namesrgb(129,162,190)(blue-grey) - thetomorrow_nightpalette, all legible against thergb(30,28,25)dark background.Generated with Claude Code