fix: dark-mode contrast bugs from the Studio light-mode rollout

[jackgranatowski]

Summary

Fixes 4 dark-mode contrast bugs flagged by CodeRabbit review on codeslash-dev/SLASHED-Plugins#154 (which vendors this code), left over from the #506–#510 light-mode rollout.

Fixes

• SliderRow.svelte — the default: {rawDefault} helper text used dark:text-slate-700, which is darker than the light-mode value, making it worse on the dark shell instead of better. Swapped to dark:text-slate-400.
• CheatsheetPanel.svelte — search input placeholder had no dark: variant, staying at placeholder:text-slate-600 (low contrast on the dark input background). Added dark:placeholder:text-slate-400.
• HomePanel.svelte — same missing dark:placeholder:* gap on the quick-save input.
• ThemesPanel.svelte — same missing dark:placeholder:* gap on the save-form input, plus the "No saved themes yet" empty-state text had no dark: variant at all.

🤖 Generated with Claude Code

---

Generated by Claude Code

Summary by CodeRabbit

• Style
  • Improved dark-mode readability across several input fields and hint texts.
  • Updated placeholder and empty-state text colors so they are easier to see in dark themes.
  • Refined the appearance of search, save, slider, and theme-related UI elements for a more consistent look.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: c1ddf677-9872-4d73-8f42-a5c0d69e1a62

📥 Commits

Reviewing files that changed from the base of the PR and between ce4dfac and 637c701.

📒 Files selected for processing (4)

• configurator/src/components/inputs/SliderRow.svelte
• configurator/src/components/panels/CheatsheetPanel.svelte
• configurator/src/components/panels/HomePanel.svelte
• configurator/src/components/panels/ThemesPanel.svelte

---

📝 Walkthrough

Walkthrough

This PR updates Tailwind dark-mode CSS classes across four Svelte components in the configurator app, adjusting text and placeholder colors for improved dark mode readability. No logic, behavior, or component interfaces were changed.

Changes

Dark Mode Styling Fixes

Layer / File(s)	Summary
Dark-mode text and placeholder color updates configurator/src/components/inputs/SliderRow.svelte, configurator/src/components/panels/CheatsheetPanel.svelte, configurator/src/components/panels/HomePanel.svelte, configurator/src/components/panels/ThemesPanel.svelte	Adjusted dark-mode Tailwind classes: default-value hint text color, search/save/theme input placeholder colors, and empty-state text color, all switched to slate-400 shades.

Estimated code review effort: 1 (Trivial) | ~3 minutes

Possibly related PRs

• codeslash-dev/SLASHED#434: Overlaps with this PR's changes to CheatsheetPanel.svelte's dark-mode styling on the search input.

Suggested labels: codex

🚥 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 accurately summarizes the PR’s main change: fixing dark-mode contrast issues left from the Studio light-mode rollout.
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.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/dark-mode-contrast-fixes

---

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

[qodo-code-review]

PR Summary by Qodo

Fix dark-mode contrast for placeholders and helper text in Studio configurator

🐞 Bug fix 🕐 10-20 Minutes

AI Description

• Fix unreadable dark-mode helper text on slider rows.
• Add missing dark-mode placeholder colors to search/save inputs.
• Ensure Themes empty-state text has a dark-mode color variant.

Diagram

graph TD
  App["Configurator UI"] --> Slider["SliderRow"] --> Tw{{"Tailwind dark variants"}}
  App --> Cheat["CheatsheetPanel"] --> Tw
  App --> Home["HomePanel"] --> Tw
  App --> Themes["ThemesPanel"] --> Tw

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Centralize input styling (shared component or utility class)

• ➕ Prevents repeated placeholder/contrast mistakes across panels
• ➕ Makes future theme rollouts a single-point change
• ➖ Follow-up refactor effort; touches more files than this targeted fix

2. Add dark-mode visual regression checks

• ➕ Catches contrast regressions automatically (placeholders, helper text, empty states)
• ➕ Protects future design rollouts
• ➖ Requires screenshot infra/baselines; higher maintenance cost

3. Use semantic color tokens instead of hardcoded `slate-*`

• ➕ Themeable contrast control without hunting per-component classes
• ➕ Better alignment with design-token goals
• ➖ Requires token design decisions and wider migration work

Recommendation: Land this PR as-is: it’s a low-risk, targeted contrast fix. Consider a follow-up to centralize shared input class strings (placeholders/background/border/text) to reduce repeated dark: omissions.

Files changed (4) +5 / -5

Bug fix (4) +5 / -5

SliderRow.svelteFix dark-mode contrast for the “default:” helper text +1/-1

Fix dark-mode contrast for the “default:” helper text

• Adjusts the helper text color used when showing the default raw value. Replaces an overly-dark 'dark:text-slate-700' with 'dark:text-slate-400' to keep the hint readable on dark shells.

configurator/src/components/inputs/SliderRow.svelte

CheatsheetPanel.svelteAdd dark-mode placeholder color for cheatsheet search +1/-1

Add dark-mode placeholder color for cheatsheet search

• Adds 'dark:placeholder:text-slate-400' to the search input so the placeholder remains legible on the dark input background.

configurator/src/components/panels/CheatsheetPanel.svelte

HomePanel.svelteAdd dark-mode placeholder color for quick-save input +1/-1

Add dark-mode placeholder color for quick-save input

• Adds 'dark:placeholder:text-slate-400' to the quick-save theme name input to prevent low-contrast placeholders in dark mode.

configurator/src/components/panels/HomePanel.svelte

ThemesPanel.svelteFix dark-mode placeholder and empty-state text contrast +2/-2

Fix dark-mode placeholder and empty-state text contrast

• Adds 'dark:placeholder:text-slate-400' to the save-name input and adds a 'dark:text-slate-400' variant for the “No saved themes yet.” empty-state message.

configurator/src/components/panels/ThemesPanel.svelte

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0)

Great, no issues found!

Qodo reviewed your code and found no material issues that require review