fix(desktop): swap IDE icons to dark variants in dark mode

[skevetter]

Summary

• Dark-on-transparent IDE icons (code-server, cursor, bob, plus the existing jupyter/none/zed) were hard to see against the dark theme background in the workspace wizard.
• WorkspaceWizard.svelte now resolves IDE icon paths reactively via MediaQuery("(prefers-color-scheme: dark)") — the same pattern LanguageIcon.svelte already uses — and loads *_dark.svg companions for any icon name listed in IDE_ICON_DARK_VARIANTS.
• Adds hand-tuned _dark SVG variants for code-server, cursor, bob, and marimo. (marimo isn't a selectable IDE today; included for forward compat since the swap list and asset are cheap.)

Notes

• WorkspaceDetailPage.svelte's IDE selector renders labels only, so no swap is needed there.
• Color transforms used:
  • code-server: mono path, fill set to #ffffff.
  • marimo: brand teal #1C7361 → #5FBFA3.
  • cursor: cube grays lifted (#43413c → #8c8a85, #55544f → #a8a6a1, #72716d → #c2c0bb); #d6d5d2/#fff highlights preserved.
  • bob: outer stroke #262626 → #888888; eye-socket fills (.st13) kept dark since they sit inside the white face.
• Upstream coder/code-server ships an alternative pattern (inline @media (prefers-color-scheme: dark) inside the SVG itself) that could replace the JS swap for mono icons in a follow-up. Sticking with the _dark + MediaQuery approach here to match the existing LanguageIcon convention.

Summary by CodeRabbit

• Improvements
  • IDE selection interface now correctly displays dark-themed icon variants when dark mode is active on your system
  • Enhanced workspace wizard icon rendering to automatically adapt to and reflect your current system theme preference
  • Improved visual consistency of IDE option icons across both light and dark color modes throughout the application

[netlify]

✅ Deploy Preview for devsydev canceled.

Name	Link
🔨 Latest commit	5a5c06b
🔍 Latest deploy log	https://app.netlify.com/projects/devsydev/deploys/6a1865e0b8a1070008a973fb

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR adds dark mode theme detection to IDE icon selection in the WorkspaceWizard component. It imports MediaQuery to detect dark mode, introduces IDE-specific dark icon variants, refactors the icon derivation logic to select theme-appropriate paths, and updates both the component state and UI rendering to use the new approach.

Changes

Dark Mode IDE Icons

Layer / File(s)	Summary
Dark mode detection and icon variant setup desktop/src/renderer/src/lib/components/workspace/WorkspaceWizard.svelte	Imports MediaQuery from svelte/reactivity, establishes a darkMode reactive query, defines IDE_ICON_DARK_VARIANTS set, updates ideIcon() function to return dark or light icon paths based on theme, and refactors IDE_GROUPS metadata to store iconName instead of precomputed icon paths.
Apply dark mode icons to component state and rendering desktop/src/renderer/src/lib/components/workspace/WorkspaceWizard.svelte	Updates ideIconSrc derived state to compute the selected IDE's icon using ideIcon(selectedIdeEntry.iconName) and updates the IDE dropdown template to render icons via ideIcon(ide.iconName) instead of ide.icon.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• devsy-org/devsy#452: Both PRs modify WorkspaceWizard.svelte's IDE icon helper logic—fix(ide): use relative path for IDE icons #452 changes the icon URL base to relative paths, while this PR extends the same icon derivation to pick dark/light variants via MediaQuery and iconName.

Suggested labels

size/m

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: swapping IDE icons to dark variants when in dark mode, which aligns with the core problem being solved.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

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.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

desktop/src/renderer/src/lib/components/workspace/WorkspaceWizard.svelte (1)

55-58: ⚖️ Poor tradeoff

Reactivity dependency tracking should work—no required refactor

ideIcon() reads darkMode.current when it’s executed inside reactive contexts (ideIconSrc = $derived(...) at ~line 159 and the template call ideIcon(ide.iconName) at ~line 584), so theme changes should still update the rendered icon. LanguageIcon.svelte’s $derived.by() usage is mainly for explicitness/consistency rather than a required reactivity fix here.

🤖 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 `@desktop/src/renderer/src/lib/components/workspace/WorkspaceWizard.svelte`
around lines 55 - 58, The ideIcon function correctly reads darkMode.current so
reactive uses (ideIconSrc = $derived(...) and template calls
ideIcon(ide.iconName)) will update on theme changes; do not refactor away from
ideIcon/IDE_ICON_DARK_VARIANTS—leave ideIcon, darkMode.current, ideIconSrc and
the template call as-is; if you want explicit consistency with
LanguageIcon.svelte, optionally mirror its pattern by deriving the variant via
$derived.by in that component, but no change to ideIcon is required.

🤖 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.

Nitpick comments:
In `@desktop/src/renderer/src/lib/components/workspace/WorkspaceWizard.svelte`:
- Around line 55-58: The ideIcon function correctly reads darkMode.current so
reactive uses (ideIconSrc = $derived(...) and template calls
ideIcon(ide.iconName)) will update on theme changes; do not refactor away from
ideIcon/IDE_ICON_DARK_VARIANTS—leave ideIcon, darkMode.current, ideIconSrc and
the template call as-is; if you want explicit consistency with
LanguageIcon.svelte, optionally mirror its pattern by deriving the variant via
$derived.by in that component, but no change to ideIcon is required.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 529ba7df-a5ec-4f6e-9e98-4b110b69e335

📥 Commits

Reviewing files that changed from the base of the PR and between e8ee7f4 and 5a5c06b.

⛔ Files ignored due to path filters (4)

• desktop/src/renderer/public/icons/ides/bob_dark.svg is excluded by !**/*.svg
• desktop/src/renderer/public/icons/ides/code-server_dark.svg is excluded by !**/*.svg
• desktop/src/renderer/public/icons/ides/cursor_dark.svg is excluded by !**/*.svg
• desktop/src/renderer/public/icons/ides/marimo.svg is excluded by !**/*.svg

📒 Files selected for processing (1)

• desktop/src/renderer/src/lib/components/workspace/WorkspaceWizard.svelte