fix(dashboard): make dark the CSS default for the TUI

[duyet]

Dark is now the real default for the terminal TUI, not just a class that can lose to a leftover theme=system or a light :root palette.

Why

:root was still the light GitHub palette, so any missing .dark class (or a stored next-themes "system" value) painted the site light. First load should be the #0d1117 canvas.

What changed

• Dark tokens live on :root (and .dark); light is opt-in via html.light
• Theme script treats only localStorage.theme === "light" as light. Empty, "dark", and legacy "system" all stay dark
• next-themes maps light → class light so the dashboard toggle still works
• Unit test covers the dark-default contract

Light remains available from [theme].

  

Summary by Sourcery

Make the terminal dashboard dark by default and require an explicit light theme selection to use the light palette.

Bug Fixes:

• Make dark mode the dashboard’s reliable default, including on first load and when legacy or unset theme preferences are present.

Enhancements:

• Make light mode opt-in through the explicit light class while keeping the theme toggle and next-themes state aligned.

Documentation:

• Document the dashboard’s dark-by-default theme behavior and light-mode opt-in.

Tests:

• Add coverage for the dark-default theme token and pre-paint script contract.

[sourcery-ai]

Sorry @duyet, you have reached your weekly rate limit of 500000 diff characters.

Please try again later or upgrade to continue using Sourcery

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 59dcb49f-4806-4fa9-8a60-95835bccc823

---

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

[sourcery-ai]

Reviewer's Guide

Make dark theme the true CSS default for the dashboard TUI, with light explicitly opt-in via html.light and only localStorage.theme === 'light', align next-themes and the inline script to that contract, and add a test plus docs note to lock in the behavior.

Flow diagram for dashboard theme default and toggle behavior

flowchart LR
  start([Initial page load])
  check_ls{{localStorage.theme === 'light'}}
  dark_default([Apply dark default
  - html: .dark
  - remove .light
  - data-mode/theme: 'dark'
  - :root + .dark tokens])
  light_opt_in([Apply light opt-in
  - html: .light
  - remove .dark
  - data-mode/theme: 'light'
  - .light tokens])

  start --> check_ls
  check_ls -- yes --> light_opt_in
  check_ls -- no --> dark_default

  click([User clicks element
  with data-theme-toggle])
  check_class{{html.classList.contains 'dark'}}
  set_light([Switch to light
  - add .light
  - remove .dark
  - data-mode/theme: 'light'
  - localStorage.theme = 'light'])
  set_dark([Switch to dark
  - add .dark
  - remove .light
  - data-mode/theme: 'dark'
  - localStorage.theme = 'dark'])

  click --> check_class
  check_class -- yes (currently dark) --> set_light
  check_class -- no (currently light) --> set_dark

Loading

File-Level Changes

Change	Details	Files
Make dark tokens the CSS default and introduce an explicit light theme class.	Move dark token palette from .dark to :root,.dark so dark is the default canvas even without a class. Add a .light palette that mirrors the old light :root tokens and set color-scheme appropriately. Switch theme-toggle icon selectors to depend on html.light instead of the absence of .dark.	packages/dashboard/src/styles/tokens.css
Align the inline pre-paint theme script with the dark-default, light-opt-in model.	Change localStorage reading so only theme === 'light' opts into light; any other value (including legacy 'system') stays dark. Toggle both .dark and .light classes on based on the stored theme. Drive the next theme value from the presence of .dark rather than data-theme attributes.	packages/dashboard/src/components/theme-script.astro
Configure next-themes to use explicit dark/light class values consistent with CSS and the inline script.	Extend ThemeProvider props to include a value map { dark: 'dark', light: 'light' } so next-themes writes these exact classes. Keep attribute="class" and defaultTheme="dark" with enableSystem={false} to prevent system/light fallback.	packages/dashboard/src/components/providers.tsx
Add a regression test to enforce the dark-default contract and script behavior.	Assert that tokens.css defines :root,.dark as dark and a separate .light with light color-scheme. Verify the theme script uses localStorage.theme === 'light' and does not use prefers-color-scheme.	packages/dashboard/src/lib/preset-stack.test.ts
Update core-memory documentation to describe the dark-default TUI behavior.	Document that dark is the CSS default via :root, light is opt-in via html.light, and only explicit localStorage.theme === 'light' switches away from dark. Clarify that legacy 'system' values remain dark to avoid reintroducing light or non-terminal styling.	docs/knowledge/core-memory.md

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.