Skip to content

feat: Add dark mode toggle option#47

Merged
AgentQuantum merged 3 commits intomainfrom
feature/dark-mode
Dec 7, 2025
Merged

feat: Add dark mode toggle option#47
AgentQuantum merged 3 commits intomainfrom
feature/dark-mode

Conversation

@AgentQuantum
Copy link
Copy Markdown
Owner

Add Dark Mode Support (feature/dark-mode)

What

  • Introduces a new Dark Mode theme option to the application UI.
  • Adds a toggle (or configuration option) for Dark Mode in the settings/menu.
  • Implements global dark-theme CSS variables and overrides existing styles so that major UI components (sidebar, navigation, cards, forms, tables, modals, etc.) render appropriately in Dark Mode.
  • Ensures that Light Mode remains unchanged by default.

How

  • Defined a set of CSS custom properties (variables) for color palette (backgrounds, text, borders, hover states, etc.) for both light and dark themes.
  • Modified the base styles and component styles to reference these variables rather than hard-coded colors.
  • Added logic (e.g. in configuration or user settings) to switch between themes — updating a root class or toggling a theme attribute so CSS variables take effect accordingly.
  • Updated UI components and layout as needed to maintain readability and layout integrity under dark background (e.g. adjusting contrast, hover/focus states, backgrounds, shadows).
  • (Optional / if implemented) Persist user preference of theme (e.g. in local storage or config) so the selected mode sticks between sessions.

Why

  • Many users prefer Dark Mode for comfort, especially when using the app in low-light or nighttime conditions — reduces eye strain.
  • Provides better usability and accessibility for users sensitive to bright themes or working long hours.
  • Adds theming support, making the UI more flexible and future-proof for additional themes or user-customizable styles.
  • Aligns with modern UX expectations; many tools and apps offer Dark Mode as a standard feature.

Acceptance Criteria

  • A “Dark Mode” toggle or setting appears in the configuration/settings menu.
  • When Dark Mode is enabled, all major UI sections (sidebar, nav, cards/panels, tables/lists, forms, modals) render with dark backgrounds and correct text visibility (sufficient contrast, no unreadable text).
  • When toggling back to Light Mode, the UI returns to the original light theme exactly as before — no residual dark-mode styles leak.
  • The theme change applies globally (not only to a subset of pages/components).
  • The selection of theme persists across page reloads (or application restarts), if persistence implemented.
  • No visual regressions in layout, spacing, or functionality — UI components (buttons, inputs, hover/focus states, modals, dialogs) behave and render correctly in both themes.
  • Styles for any third-party or external UI components/widgets are reviewed to confirm they do not break in Dark Mode (or are gracefully handled/fallback if unsupported).

Closes #46

@AgentQuantum AgentQuantum self-assigned this Dec 7, 2025
@AgentQuantum AgentQuantum added enhancement New feature or request frontend Frontend UI and React components labels Dec 7, 2025
@AgentQuantum AgentQuantum merged commit 50bedf5 into main Dec 7, 2025
2 checks passed
@AgentQuantum AgentQuantum deleted the feature/dark-mode branch December 7, 2025 23:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request frontend Frontend UI and React components

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Enable Dark Mode / Theme Support

1 participant