edit editor background color#993
Open
hatemhosny wants to merge 2 commits into
Open
Conversation
✅ Deploy Preview for livecodes ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Deploying livecodes with
|
| Latest commit: |
5feec17
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://e661f9bb.livecodes.pages.dev |
| Branch Preview URL: | https://ui-fixes.livecodes.pages.dev |
Contributor
|
Size Change: 0 B Total Size: 1.1 MB ℹ️ View Unchanged
|
Contributor
WalkthroughDark and light theme color/CSS values were updated across Prism, CodeMirror, Monaco, and console styles. CodeMirror gained rainbow-bracket integration with importmap, vendor URL bump, and build externals; package.json had formatting-only config changes. ChangesDark Theme Palette Update
CodeMirror rainbow-brackets integration
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 Stylelint (17.12.0)src/livecodes/styles/app.scssConfigurationError: Could not find "stylelint-config-sass-guidelines". Do you need to install the package or use the "configBasedir" option? Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![pullfrog[bot]](https://avatars.githubusercontent.com/in/1768019?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
✅ No new issues found.
Reviewed changes — visual refinement of the dark editor theme across all three editors (Prism/CodeJar, CodeMirror, Monaco) and the console, lightening the main background from #16191d to #181c20 with corresponding adjustments to panels, gutters, widgets, and line highlights.
- Prism/CodeJar — dark theme background
#16191d→#181c20in the base64-encoded CSS data URI; light theme re-encoded with CRLF line endings (no color change). - CodeMirror — background, gutters, and panel borders updated; active line styling changed from cyan overlay to dark semi-transparent + solid outline; tooltip styled with background, border-radius, and padding.
- Monaco — editor surface, gutter, minimap, overview ruler border, suggest widget, and several overlay elements updated to
#181c20; widget/hover/dropdown bodies use the old darker#16191dfor visual layering; line highlight and sticky scroll colors adjusted. - Console — added
background-color: hsl(214, 14%, 11%)for.luna-console-theme-dark.
The two-layer approach (editor surface at #181c20, floating overlays at #16191d) is consistent and well-documented in comments. No drift, stale references, or inconsistencies found.
DeepSeek Pro (free via Pullfrog for OSS) ｜ 𝕏
|
Contributor
There was a problem hiding this comment.
✅ No new issues found.
Reviewed changes — added rainbow bracket highlighting across editors and restructured CodeMirror SCSS, atop the prior background-color refinement.
- Added
rainbowbracketsCodeMirror extension — imported with@ts-ignoreand activated as a default extension incodemirror.ts:30,298 - Updated vendor and build config —
@live-codes/codemirrorbumped 0.3.4 → 0.4.0 invendors.ts:93;rainbowbracketsadded to esbuild externals inscripts/build.js:90and import map inapp.html:41 - Monaco bracket foreground3 refresh —
#c9b8ff→#ee82ee(dark) and#6b4fc4→#9d159d(light) inmonaco-themes.ts, aligning with the SCSS bracket palette - CodeMirror tooltip polish — added
borderRadiusandpaddingto both dark and light tooltip themes; dark tooltip bg#111b2c→#16191dincodemirror-themes.ts - SCSS restructure — nested all CodeMirror styles (
.cm-wrap,.cm-scroller,#console-input, rainbow brackets, Codeium ghost text) under.cm-editor; added rainbow bracket CSS classes.rainbow-bracket-redthrough-violetwith dark-palette colors - package.json formatting — prettier and jest config arrays expanded to multi-line,
resolveJsonModule: trueadded
DeepSeek Pro (free via Pullfrog for OSS) ｜ 𝕏
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/livecodes/styles/app.scss`:
- Around line 2004-2006: The rule for .cm-ghostText:hover uses a hardcoded light
color (`#eee`); replace it with a theme-aware CSS variable (e.g. background:
var(--ghost-hover-bg, rgba(0,0,0,0.06))) or reference the editor hover
background variable (e.g. var(--vscode-editor-hoverBackground)) so dark themes
get appropriate color, and if needed add a dark-theme selector (e.g. .theme-dark
or [data-theme="dark"]) to provide a dark-specific fallback value; update
.cm-ghostText:hover to use that variable instead of `#eee` and ensure the variable
is defined in your theme tokens.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: dfe0e621-4fd2-4966-b3d6-fbe1024300b1
📒 Files selected for processing (8)
package.jsonscripts/build.jssrc/livecodes/editor/codemirror/codemirror-themes.tssrc/livecodes/editor/codemirror/codemirror.tssrc/livecodes/editor/monaco/monaco-themes.tssrc/livecodes/html/app.htmlsrc/livecodes/styles/app.scsssrc/livecodes/vendors.ts
✅ Files skipped from review due to trivial changes (1)
- package.json
🚧 Files skipped from review as they are similar to previous changes (2)
- src/livecodes/editor/codemirror/codemirror-themes.ts
- src/livecodes/editor/monaco/monaco-themes.ts
Comment on lines
+2004
to
+2006
| .cm-ghostText:hover { | ||
| background: #eee; | ||
| } |
Contributor
There was a problem hiding this comment.
Hardcoded light color breaks dark theme consistency.
The ghost text hover background uses #eee (light gray), which will have poor contrast and appear out of place in dark theme. Since this PR specifically updates dark theme colors across the application, this hardcoded value is inconsistent with the theming approach.
Use a CSS variable or conditional styling:
🎨 Proposed fix using CSS variable
.cm-ghostText:hover {
- background: `#eee`;
+ background: var(--btn-bg-active);
}Or with conditional styling:
.cm-ghostText:hover {
- background: `#eee`;
+ background: var(--input-bg-active);
}
+}
+
+:root.light .cm-editor {
+ .cm-ghostText:hover {
+ background: `#eee`;
}
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| .cm-ghostText:hover { | |
| background: #eee; | |
| } | |
| .cm-ghostText:hover { | |
| background: var(--btn-bg-active); | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/livecodes/styles/app.scss` around lines 2004 - 2006, The rule for
.cm-ghostText:hover uses a hardcoded light color (`#eee`); replace it with a
theme-aware CSS variable (e.g. background: var(--ghost-hover-bg,
rgba(0,0,0,0.06))) or reference the editor hover background variable (e.g.
var(--vscode-editor-hoverBackground)) so dark themes get appropriate color, and
if needed add a dark-theme selector (e.g. .theme-dark or [data-theme="dark"]) to
provide a dark-specific fallback value; update .cm-ghostText:hover to use that
variable instead of `#eee` and ensure the variable is defined in your theme
tokens.
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 by CodeRabbit
New Features
Style