Theme Toggle that bypasses the auto detector on demand if needed

[1-void]

This pull request adds support for a persistent light/dark theme mode in the app. The main changes include reading and storing the user's preferred theme mode in localStorage, updating the HTML root attribute accordingly, and providing a UI button to toggle between light and dark modes.

Theme mode persistence and initialization:

• Both packages/app/index.html and packages/desktop/index.html now read the theme-mode value from localStorage and set the data-theme-mode attribute on the HTML root element if the value is "light" or "dark". [1] [2]
• In packages/app/src/pages/layout.tsx, the initial theme mode is determined by checking localStorage or falling back to the user's system preference using window.matchMedia.

Theme mode UI and logic:

• A new button is added to the sidebar that displays the current theme mode and allows users to toggle between light and dark modes. Toggling updates the signal, persists the choice in localStorage, and updates the data-theme-mode attribute. [1] [2]
• The theme mode is also applied on mount to ensure the correct mode is set when the app loads.

[Copilot]

Pull request overview

This PR implements a persistent theme toggle feature that allows users to manually override the automatic dark/light mode detection. The implementation adds a UI button to switch between light and dark modes, stores the user's preference in localStorage, and applies it across app sessions.

• Adds CSS media query logic to respect manual theme mode overrides while maintaining auto-detection fallback
• Implements theme mode persistence in localStorage with early application in HTML to prevent FOUC
• Adds a sidebar button for toggling between light and dark themes

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

File	Description
packages/ui/src/styles/theme.css	Adds CSS selectors for manual theme mode override using data-theme-mode attribute, nesting dark mode styles within media queries with :not([data-theme-mode="light"]) selector
packages/app/index.html	Reads theme mode from localStorage and sets data-theme-mode attribute on page load
packages/desktop/index.html	Reads theme mode from localStorage and sets data-theme-mode attribute on page load
packages/app/src/pages/layout.tsx	Implements theme mode state management with initialization logic, toggle function, and UI button in sidebar

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.