Dark mode theme

[vio]

rel: https://github.com/relative-ci/bundle-stats/issues/473

---

• refactor(ui): Rename space vars
• refactor(ui): Rename light/dark color vars

Summary by CodeRabbit

Summary by CodeRabbit

• New Features

  • Enhanced visual consistency across various components with updated color schemes and spacing.
  • Added support for theme management in Storybook to improve component presentation.
  • Introduced a theme management context for a React application, allowing users to toggle between light and dark themes.
  • Added theme toggle buttons in the header for switching between light and dark modes.
  • Introduced new icons including monitor, moon, and sun for enriched UI elements.

• Bug Fixes

  • Improved visual feedback for interactive elements through updated hover, active, and focus states.

• Style

  • Adjusted padding and margin values for better layout across components.
  • Updated color variables for improved readability and design consistency.
  • Increased padding and margin for various components to enhance spacing and layout.
  • Comprehensive updates to the tooltip design, including padding and background color adjustments.
  • Modifications to the dropdown and input components for improved spacing and color visibility.
  • Enhanced styling for the loader, tags, and buttons to ensure a cohesive design.
  • Significant updates to typography and icon sizes for better visual alignment.
  • Streamlined CSS variable naming conventions for spacing and color to enhance maintainability.
  • Introduced new icons and enhanced existing icon styles for improved visual representation.
  • Improved dialog and hover card spacing and background colors for better user experience.
  • Updated table, tabs, and summary components with increased spacing and muted color tones.
  • Refined footer navigation spacing and color for clearer visual separation.
  • Standardized spacing scales across layout components for consistent design.
  • Enhanced copy-to-clipboard and empty state text colors for better visibility.
  • Increased toolbar action spacing for improved layout in responsive designs.

[coderabbitai[bot]]

Walkthrough

Adds a theme system and runtime: new theme utilities (cookie read/write, detection, switch), a ThemeProvider component and useTheme hook, and integrates ThemeProvider into App and the header (theme toggle UI). Introduces a comprehensive CSS variable redesign (12-step color scales, new public functional color tokens, typography and layout foundations) and applies many token replacements across numerous CSS modules. Storybook is configured with addon-themes and a theme decorator. SVG icon set and Icon glyph mapping gain monitor/moon/sun symbols. New small utilities and re-exports added (wait, theme) and public barrels updated.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Potential attention areas:

• packages/ui/src/css/variables.css (large thematic and token changes)
• theme runtime and hooks: packages/ui/src/utils/theme.ts, packages/ui/src/context/theme.tsx, and integration in app/header
• widespread CSS token substitutions across many modules (visual regressions risk)
• storybook preview and addon changes plus newly added dependencies

Possibly related PRs

• relative-ci/bundle-stats#5109 — Modifies tooltip styling (packages/ui/src/ui/tooltip/tooltip.module.css); directly overlaps tooltip background and arrow token changes.
• relative-ci/bundle-stats#5156 — Touches run-info styling and shared variables (packages/ui/src/components/run-info/run-info.module.css and packages/ui/src/css/variables.css); overlaps theme/variable updates.
• relative-ci/bundle-stats#4816 — Changes asset-meta/asset-name related CSS and components (packages/ui/src/components/*); strongly related to the asset token replacements in this PR.

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Dark mode theme' accurately captures the primary objective of the pull request, which implements dark mode theming functionality with comprehensive CSS variable updates.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• [ ] 📝 Generate docstrings

🧪 Generate unit tests (beta)

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment
• [ ] Commit unit tests in branch update-theme

---

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

[relativeci[bot]]

#12848 Bundle Size — 387.5KiB (+1.24%).

b39ce94(current) vs 4bb6324 master#12844(baseline)

[!IMPORTANT] Bundle introduced 1 duplicate package – View changed duplicate packages

[!WARNING] Bundle introduced one new package: js-cookie – View changed packages

Bundle metrics   6 changes 4 regressions

	Current #12848	Baseline #12844
Initial JS	339.4KiB(+1.31%)	335.01KiB
Initial CSS	48.1KiB(+0.75%)	47.74KiB
Cache Invalidation	100%	28.62%
Chunks	3	3
Assets	4	4
Modules	708(+1%)	701
Duplicate Modules	0	0
Duplicate Code	0%	0%
Packages	41(+5.13%)	39
Duplicate Packages	2(+100%)	1

Bundle size by type   2 changes 2 regressions

	Current #12848	Baseline #12844
JS	339.4KiB (+1.31%)	335.01KiB
CSS	48.1KiB (+0.75%)	47.74KiB

Bundle analysis report Branch update-theme Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

[socket-security[bot]]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@​storybook/​addon-themes@​9.0.2

View full report