Open
Conversation
Add a new "Green" forest-green color theme alongside the existing Light, Dark Navy, and Dark Black themes. Covers the full surface area: CSS variables, Monaco editor, Monaco diff viewer, terminal sessions, and all dark-mode guards updated to use `effectiveTheme !== 'light'` so future dark themes don't need per-file changes. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
@534N is attempting to deploy a commit to the General Action Team on Vercel. A member of the Team first needs to authorize it. |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Your free trial has ended. If you'd like to continue receiving code reviews, you can add a payment method here.
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughAdds a new "green" theme across the app: settings/types, ThemeProvider, CSS variables, Monaco editor/diff themes and colors, a new terminal theming module, and updates many components to treat any non- Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ThemeProvider
participant Document
participant TerminalUtils
participant Monaco
participant Components
User->>ThemeProvider: selectTheme('green')
ThemeProvider->>Document: add classes ('dark','green'), remove previous
ThemeProvider->>Monaco: request getMonacoTheme('green')
Monaco-->>ThemeProvider: 'custom-green'
ThemeProvider->>Components: notify effectiveTheme change
Components->>TerminalUtils: getTerminalContainerClass('green', agent?)
TerminalUtils-->>Components: bg class / themeOverride
Components->>Monaco: apply editor/diff theme 'custom-green'
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
src/renderer/components/ChatInterface.tsx (1)
1252-1264:⚠️ Potential issue | 🟡 MinorHandle green wrapper backgrounds for
charmandmistraltoo.This container still uses the pre-green background mapping. With the new overrides below,
charmfalls back to white on green andmistralkeeps the navy shell, so the rounded terminal container no longer matches the terminal surface.Suggested fix
className={`relative mx-auto h-full max-w-4xl overflow-hidden rounded-md ${ agent === 'charm' ? effectiveTheme === 'dark-black' ? 'bg-black' + : effectiveTheme === 'green' + ? 'bg-[`#365A3C`]' : effectiveTheme === 'dark' ? 'bg-card' : 'bg-white' : agent === 'mistral' ? effectiveTheme !== 'light' ? effectiveTheme === 'dark-black' ? 'bg-[`#141820`]' - : 'bg-[`#202938`]' + : effectiveTheme === 'green' + ? 'bg-[`#365A3C`]' + : 'bg-[`#202938`]' : 'bg-white' : '' }`}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/renderer/components/ChatInterface.tsx` around lines 1252 - 1264, The container className conditional in ChatInterface uses old theme mappings so agent === 'charm' and agent === 'mistral' don't handle the new "green" effectiveTheme; update the ternary branches that check agent ('charm' and 'mistral') in the className expression to include a case for effectiveTheme === 'green' (matching the new green background values used elsewhere) so the rounded terminal wrapper matches the terminal surface; locate the className in the ChatInterface component and add the green branch alongside the existing dark, dark-black, and light branches for charm and mistral.src/renderer/components/TaskTerminalPanel.tsx (1)
762-770:⚠️ Potential issue | 🟡 MinorAdd a green branch to the Mistral wrapper background.
Line 764 now routes
greenthrough the non-light path, but this branch still rendersbg-[#202938]for every non-dark-blackMistral theme. The terminal canvas turns green viathemeOverride, so you end up with a navy frame/loading surface around it.Suggested fix
<div className={cn( 'bw-terminal relative flex-1 overflow-hidden', effectiveTheme !== 'light' ? agent === 'mistral' ? effectiveTheme === 'dark-black' ? 'bg-[`#141820`]' - : 'bg-[`#202938`]' + : effectiveTheme === 'green' + ? 'bg-[`#2E5234`]' + : 'bg-[`#202938`]' : 'bg-card' : 'bg-white' )} >🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/renderer/components/TaskTerminalPanel.tsx` around lines 762 - 770, The Mistral wrapper always falls back to 'bg-[`#202938`]' for non-light, non-`dark-black` themes, causing a navy frame when the terminal canvas is overridden to green; update the className conditional in TaskTerminalPanel (the ternary that checks effectiveTheme and agent === 'mistral') to explicitly handle effectiveTheme === 'green' and return the green background class used by the terminal canvas instead of 'bg-[`#202938`]' so the Mistral frame matches the green theme.src/renderer/components/MultiAgentTask.tsx (1)
675-700:⚠️ Potential issue | 🟡 MinorSync the outer Mistral shell with this new green terminal override.
These lines make the terminal itself green, but Line 565 also causes
greento flow through the existingisDarkwrapper path lower in the file, which still usesbg-[#202938]for Mistral. That leaves a navy container/frame around a green terminal.Follow-up to apply where the outer wrapper class is chosen
className={`mx-auto h-full max-w-4xl overflow-hidden rounded-md ${ v.agent === 'mistral' - ? isDark - ? 'bg-[`#202938`]' - : 'bg-white' + ? effectiveTheme === 'dark-black' + ? 'bg-[`#141820`]' + : effectiveTheme === 'green' + ? 'bg-[`#365A3C`]' + : isDark + ? 'bg-[`#202938`]' + : 'bg-white' : isDark ? 'bg-card' : 'bg-white' }`}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/renderer/components/MultiAgentTask.tsx` around lines 675 - 700, The outer wrapper that currently falls back to the hardcoded class bg-[`#202938`] for Mistral needs to be synced with the new green terminal override: in the MultiAgentTask component, locate the outer wrapper element that sets className 'bg-[`#202938`]' for Mistral (it uses v.agent and effectiveTheme/isDark there) and change its conditional to check for effectiveTheme === 'green' && v.agent === 'mistral' and use the same green used in the terminal override (use '#365A3C' for Mistral-green); keep existing dark/other branches unchanged so the container/frame color matches the terminal.
🧹 Nitpick comments (2)
src/renderer/components/IntegrationsCard.tsx (1)
31-34: Update the stale theme comment to match current behavior.Line 31 still documents only “Dark / dark-black”, but Line 34 now uses
effectiveTheme !== 'light'. Please update the comment to avoid future confusion.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/renderer/components/IntegrationsCard.tsx` around lines 31 - 34, The comment above SvgLogo is outdated: it mentions only “Dark / dark-black” but the code sets isDark using effectiveTheme !== 'light', which treats any non-light theme as dark; update the comment to reflect current behavior (e.g., "Light mode: original SVG colors. Any non-light theme: primary colour") so it accurately documents the logic in useTheme/effectiveTheme and the isDark check in SvgLogo.src/renderer/lib/monaco-themes.ts (1)
46-46: Rename the section comment to avoid ambiguity.Line 46 says “Green terminal theme”, but this file defines Monaco editor themes. Consider “Green editor theme” for clarity.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/renderer/lib/monaco-themes.ts` at line 46, The comment "Green terminal theme" in src/renderer/lib/monaco-themes.ts is misleading for Monaco editor themes; update that section comment to "Green editor theme" (or similar) right above the green theme definition so it clearly refers to the Monaco editor theme (locate the spot by searching for the existing comment "Green terminal theme" and the green theme constant/definition).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/renderer/components/EditorMode.tsx`:
- Line 558: The theme prop is hardcoded to 'vs-dark' for any non-'light' value,
which prevents custom themes (e.g., 'green') from resolving; replace the ternary
expression with the mapping function used in src/renderer/lib/monaco-themes.ts
(use getMonacoTheme or the exported mapping) so the Monaco editor receives
getMonacoTheme(effectiveTheme) (or the equivalent map lookup) instead of the
current effectiveTheme !== 'light' ? 'vs-dark' : 'vs' logic; update the theme
prop in EditorMode (where effectiveTheme is used) to call that mapper so custom
themes like 'custom-green' are applied.
---
Outside diff comments:
In `@src/renderer/components/ChatInterface.tsx`:
- Around line 1252-1264: The container className conditional in ChatInterface
uses old theme mappings so agent === 'charm' and agent === 'mistral' don't
handle the new "green" effectiveTheme; update the ternary branches that check
agent ('charm' and 'mistral') in the className expression to include a case for
effectiveTheme === 'green' (matching the new green background values used
elsewhere) so the rounded terminal wrapper matches the terminal surface; locate
the className in the ChatInterface component and add the green branch alongside
the existing dark, dark-black, and light branches for charm and mistral.
In `@src/renderer/components/MultiAgentTask.tsx`:
- Around line 675-700: The outer wrapper that currently falls back to the
hardcoded class bg-[`#202938`] for Mistral needs to be synced with the new green
terminal override: in the MultiAgentTask component, locate the outer wrapper
element that sets className 'bg-[`#202938`]' for Mistral (it uses v.agent and
effectiveTheme/isDark there) and change its conditional to check for
effectiveTheme === 'green' && v.agent === 'mistral' and use the same green used
in the terminal override (use '#365A3C' for Mistral-green); keep existing
dark/other branches unchanged so the container/frame color matches the terminal.
In `@src/renderer/components/TaskTerminalPanel.tsx`:
- Around line 762-770: The Mistral wrapper always falls back to 'bg-[`#202938`]'
for non-light, non-`dark-black` themes, causing a navy frame when the terminal
canvas is overridden to green; update the className conditional in
TaskTerminalPanel (the ternary that checks effectiveTheme and agent ===
'mistral') to explicitly handle effectiveTheme === 'green' and return the green
background class used by the terminal canvas instead of 'bg-[`#202938`]' so the
Mistral frame matches the green theme.
---
Nitpick comments:
In `@src/renderer/components/IntegrationsCard.tsx`:
- Around line 31-34: The comment above SvgLogo is outdated: it mentions only
“Dark / dark-black” but the code sets isDark using effectiveTheme !== 'light',
which treats any non-light theme as dark; update the comment to reflect current
behavior (e.g., "Light mode: original SVG colors. Any non-light theme: primary
colour") so it accurately documents the logic in useTheme/effectiveTheme and the
isDark check in SvgLogo.
In `@src/renderer/lib/monaco-themes.ts`:
- Line 46: The comment "Green terminal theme" in
src/renderer/lib/monaco-themes.ts is misleading for Monaco editor themes; update
that section comment to "Green editor theme" (or similar) right above the green
theme definition so it clearly refers to the Monaco editor theme (locate the
spot by searching for the existing comment "Green terminal theme" and the green
theme constant/definition).
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: 7ed8b221-df5f-4e0d-b094-9b1eba177209
📒 Files selected for processing (20)
src/main/settings.tssrc/renderer/components/AgentLogo.tsxsrc/renderer/components/ChatInterface.tsxsrc/renderer/components/EditorMode.tsxsrc/renderer/components/HomeView.tsxsrc/renderer/components/IntegrationsCard.tsxsrc/renderer/components/MultiAgentTask.tsxsrc/renderer/components/TaskTerminalPanel.tsxsrc/renderer/components/ThemeCard.tsxsrc/renderer/components/ThemeProvider.tsxsrc/renderer/components/diff-viewer/FileDiffView.tsxsrc/renderer/components/mcp/McpServerCard.tsxsrc/renderer/components/skills/SkillDetailModal.tsxsrc/renderer/components/skills/SkillIconRenderer.tsxsrc/renderer/components/ui/markdown-renderer.tsxsrc/renderer/hooks/useEditorDiffDecorations.tssrc/renderer/index.csssrc/renderer/lib/monaco-themes.tssrc/renderer/lib/monacoDiffColors.tssrc/renderer/lib/monacoDiffThemes.ts
- Create terminalThemeColors.ts with shared constants (GREEN_COLORS, TERMINAL_BACKGROUNDS, MISTRAL_BACKGROUNDS, TERMINAL_SELECTION) and helpers (getTerminalThemeOverride, getTerminalContainerClass) - Replace 40+ lines of nested ternaries in ChatInterface and MultiAgentTask with single function calls - Fix charm agent bg-white bug on green theme (was falling through) - Fix green-on-green diff contrast by using blue tint for insertions - Merge duplicate scrollbar CSS selectors for dark-black and green - Use GREEN_COLORS constants in Monaco theme files Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/renderer/lib/terminalThemeColors.ts (1)
43-43: DeriveEffectiveThemefrom the shared theme map.This union duplicates
TERMINAL_BACKGROUNDS, so the next theme addition still requires editing two sources in the same file. Using the map as the source of truth keeps the helper signatures in sync with the supported theme set.♻️ Proposed refactor
-type EffectiveTheme = 'light' | 'dark' | 'dark-black' | 'green'; +type EffectiveTheme = keyof typeof TERMINAL_BACKGROUNDS;🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/renderer/lib/terminalThemeColors.ts` at line 43, Replace the hard-coded union type EffectiveTheme with a type derived from the shared TERMINAL_BACKGROUNDS map so theme changes only live in one place: remove the literal "light | dark | dark-black | green" union and declare EffectiveTheme as the keys of the TERMINAL_BACKGROUNDS object (e.g., using keyof typeof TERMINAL_BACKGROUNDS), then update any function signatures or helpers that reference EffectiveTheme (such as getEffectiveTheme / functions that accept an EffectiveTheme) to use the new derived type so they stay in sync with the map.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/renderer/lib/terminalThemeColors.ts`:
- Line 100: The runtime template literal `bg-[${GREEN_COLORS.card}]` prevents
Tailwind from generating the class; replace the dynamic interpolation with a
literal class string so the exact arbitrary-value class is present at build
time: update the branch that checks effectiveTheme === 'green' to return a
literal class like "bg-[`#xxxxxx`]" using the actual hex value from
GREEN_COLORS.card (or add that literal to a mapping used by the theme helper),
ensuring the GREEN_COLORS.card value is inlined into the returned string so
Tailwind's content scanner can pick it up and the green background used by the
MultiAgentTask component renders.
---
Nitpick comments:
In `@src/renderer/lib/terminalThemeColors.ts`:
- Line 43: Replace the hard-coded union type EffectiveTheme with a type derived
from the shared TERMINAL_BACKGROUNDS map so theme changes only live in one
place: remove the literal "light | dark | dark-black | green" union and declare
EffectiveTheme as the keys of the TERMINAL_BACKGROUNDS object (e.g., using keyof
typeof TERMINAL_BACKGROUNDS), then update any function signatures or helpers
that reference EffectiveTheme (such as getEffectiveTheme / functions that accept
an EffectiveTheme) to use the new derived type so they stay in sync with the
map.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: 8fdd6e3c-e4a1-44c6-b2c1-c999dc4c8094
📒 Files selected for processing (8)
src/renderer/components/ChatInterface.tsxsrc/renderer/components/MultiAgentTask.tsxsrc/renderer/components/TaskTerminalPanel.tsxsrc/renderer/index.csssrc/renderer/lib/monaco-themes.tssrc/renderer/lib/monacoDiffColors.tssrc/renderer/lib/monacoDiffThemes.tssrc/renderer/lib/terminalThemeColors.ts
🚧 Files skipped from review as they are similar to previous changes (6)
- src/renderer/lib/monaco-themes.ts
- src/renderer/lib/monacoDiffColors.ts
- src/renderer/lib/monacoDiffThemes.ts
- src/renderer/components/ChatInterface.tsx
- src/renderer/components/TaskTerminalPanel.tsx
- src/renderer/index.css
- Use getMonacoTheme() in EditorMode so green theme gets custom-green instead of vs-dark - Use literal Tailwind class string instead of template interpolation so the content scanner can generate the CSS Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Updated base green from #2E5234 to #21462E to match the user's macOS terminal background exactly. All derived colors shifted proportionally. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/renderer/lib/terminalThemeColors.ts (1)
76-84: Make non-agent light override explicit to avoid implicit default coupling.On Line [84], non-agent
lightfalls through toundefinedwhile Line [106] explicitly renders a light container class. Making the light terminal override explicit here would reduce future regressions if terminal defaults change.♻️ Suggested patch
// Non-agent-specific: only override for themes that differ from the dark default + if (effectiveTheme === 'light') { + return { background: TERMINAL_BACKGROUNDS.light, ...selection }; + } if (effectiveTheme === 'dark-black') { return { background: '#000000', ...selection }; } if (effectiveTheme === 'green') { return { background: GREEN_COLORS.background, ...selection }; }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/renderer/lib/terminalThemeColors.ts` around lines 76 - 84, The non-agent light theme currently falls through to undefined in the terminal theme resolver, coupling behavior to implicit defaults; update the function handling effectiveTheme (look for the effectiveTheme checks around 'dark-black' and 'green' and the use of selection and GREEN_COLORS) to add an explicit branch for the 'light' theme that returns a clear light terminal color object (e.g., a light background and selection overrides) instead of returning undefined so the renderer no longer relies on external defaults.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/renderer/lib/terminalThemeColors.ts`:
- Around line 76-84: The non-agent light theme currently falls through to
undefined in the terminal theme resolver, coupling behavior to implicit
defaults; update the function handling effectiveTheme (look for the
effectiveTheme checks around 'dark-black' and 'green' and the use of selection
and GREEN_COLORS) to add an explicit branch for the 'light' theme that returns a
clear light terminal color object (e.g., a light background and selection
overrides) instead of returning undefined so the renderer no longer relies on
external defaults.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 6083390d-e84f-4137-8d39-c3f311a0f58c
📒 Files selected for processing (2)
src/renderer/index.csssrc/renderer/lib/terminalThemeColors.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- src/renderer/index.css
Bumped saturation (36→42%) and lightness (20→22%) so the rendered color matches the target terminal RGB (33, 70, 46) after Electron's color pipeline. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Contributor
|
Thank you for your interest in contributing and for opening the PR @534N We are about to launch the Beta of a new Emdash version and once its out, we will dedicate more time to being able to customize the themes of the overall app / terminals, and other parts of Emdash. Would love to have your feedback once its out. |
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
2 participants
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
effectiveTheme === 'dark' || effectiveTheme === 'dark-black'toeffectiveTheme !== 'light'so future dark themes don't need per-file updatesTest plan
🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
User Interface