Skip to content

feat(ui): add dark mode support with system preference and toggle (#209)#830

Open
vaquarkhan wants to merge 1 commit into
apache:mainfrom
vaquarkhan:issue-209-dark-mode
Open

feat(ui): add dark mode support with system preference and toggle (#209)#830
vaquarkhan wants to merge 1 commit into
apache:mainfrom
vaquarkhan:issue-209-dark-mode

Conversation

@vaquarkhan

Copy link
Copy Markdown
Contributor

Phase 1: enable the dark mode mechanism and apply it to the app shell.

  • tailwind.config.js: change darkMode from invalid 'false' to 'class'
  • Add useTheme hook: respects system preference via prefers-color-scheme, allows manual override, persists choice to localStorage, reacts to OS changes
  • Add ThemeToggle component (sun/moon button) replacing the previously broken radio
  • Apply dark: variants to the app shell: container, desktop + mobile sidebar, nav links, disclosure menus, breadcrumb, and project list table
  • Mount theme initialization at App root to apply the dark class on load

Light mode is unchanged (all changes are additive dark: variants). Remaining per-view component coverage will follow in subsequent PRs.

[Short description explaining the high-level reason for the pull request]

Changes

How I tested this

Notes

Checklist

  • PR has an informative and human-readable title (this will be pulled into the release notes)
  • Changes are limited to a single goal (no scope creep)
  • Code passed the pre-commit check & code is left cleaner/nicer than when first encountered.
  • Any change in functionality is tested
  • New functions are documented (with a description, list of inputs, and expected output)
  • Placeholder code is flagged / future TODOs are captured in comments
  • Project documentation has been updated if adding/changing functionality.

…ache#209)

Phase 1: enable the dark mode mechanism and apply it to the app shell.

- tailwind.config.js: change darkMode from invalid 'false' to 'class'
- Add useTheme hook: respects system preference via prefers-color-scheme,
  allows manual override, persists choice to localStorage, reacts to OS changes
- Add ThemeToggle component (sun/moon button) replacing the previously broken radio
- Apply dark: variants to the app shell: container, desktop + mobile sidebar,
  nav links, disclosure menus, breadcrumb, and project list table
- Mount theme initialization at App root to apply the dark class on load

Light mode is unchanged (all changes are additive dark: variants). Remaining
per-view component coverage will follow in subsequent PRs.
@github-actions github-actions Bot added the area/ui Burr UI (telemetry frontend) label Jun 30, 2026
@Viquarkhan-aws

Copy link
Copy Markdown
image

@Viquarkhan-aws

Copy link
Copy Markdown
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area/ui Burr UI (telemetry frontend)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants