Description

Added a Dark Mode toggle button to the Hasura Console UI allowing users to switch between light and dark themes.
The user’s preference is saved in localStorage and applied automatically on page load.

Changelog

Component : console

Type: feature

Product: community-edition

Short Changelog

• Implemented a dark mode toggle button in the Hasura Console frontend.
• Persisted theme preference in localStorage.
• Applied dark mode styles dynamically to the UI.

Long Changelog

This change adds a simple toggle button to the main App component that switches the console UI between light and dark themes.
The toggle state is saved in browser localStorage so the preference persists between sessions.
Dark mode styles affect background colors, text colors, and button styles to improve usability in low-light environments.
This feature enhances user experience by supporting preferred color schemes.

Related Issues

No specific issue linked. (close # if applicable)

Solution and Design

• Added a toggle button in App.tsx to add/remove a dark-mode CSS class on the document body.
• Used localStorage to save and load the user’s theme preference.
• Added corresponding CSS rules in styles.css to apply dark theme styles.

Steps to test and verify

1. Start the frontend dev server with nx serve console-ce.
2. Open the console at http://localhost:4200.
3. Click the "🌙 Toggle Dark Mode" button.
4. Verify that the theme changes instantly.
5. Reload the page and verify the selected theme persists.

Limitations, known bugs & workarounds

• Dark mode styles cover basic UI elements; some advanced components might need further styling.
• No system-preference detection implemented (can be added in future improvements).

Server checklist

Not applicable (frontend only change).

Metadata

Not applicable.

GraphQL

Not applicable.

Breaking changes

• No Breaking changes