UI: Rework default background of Color swatch for dark mode

[Sidnioulz]

What I did

Reworked the default background. It was dull and sad in dark mode, and more importantly, it wasn't equivalent in terms of lightness/opacity between light and dark modes, which affects how semi-opaque colours are perceived.

I've made sure that now, the dark mode version of the swatch background is a direct mirror to the light mode one.

https://www.chromatic.com/test?appId=635781f3500dd2c49e189caf&id=6913769e99ba81e2674e574c

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

ø

Documentation

ø

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

• Style
  • Color swatch backgrounds and hover states now adapt to the active theme (dark/light), using a subtle overlay for improved contrast and visual consistency.
  • Hover overlays use a low-opacity fill to reduce visual noise while preserving swatch color clarity.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit bb6b1b9

Command	Status	Duration	Result
nx run-many -t build --parallel=3	✅ Succeeded	44s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-11-25 14:05:26 UTC

[coderabbitai]

📝 Walkthrough

Walkthrough

The swatch background rendering in the Color control component was refactored from a static constant string to a dynamic function that generates theme-aware SVG data URLs. The function conditionally sets fill color opacity and color based on the current theme, with all call sites updated accordingly.

Changes

Cohort / File(s)	Summary
Theme-aware swatch background code/addons/docs/src/blocks/controls/Color.tsx	Converted swatchBackground constant to a function accepting an isDark parameter; function now returns a data URL with fill opacity 0.05 and color conditionally determined by theme. Updated all usages to call swatchBackground(theme.base === 'dark').

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Single-file refactor with straightforward parameterization
• Style/visual change with minimal logic density
• Verify SVG data URL correctness and call-site updates during review

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7272d73 and bb6b1b9.

📒 Files selected for processing (1)

• code/addons/docs/src/blocks/controls/Color.tsx (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• code/addons/docs/src/blocks/controls/Color.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: normal
• GitHub Check: Core Unit Tests, windows-latest

---

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