Skip to content

Accessibility: Implement Light Theme Toggle #12

Description

@hypnoastic

Description

The new UI/UX overhaul implemented a sleek, developer-focused Dark Mode. However, for accessibility and usage in bright environments, we should provide an option to switch to a Light Theme.

Proposal

Add a theme toggle switch in the sidebar that allows users to seamlessly swap between light and dark modes, persisting their preference in localStorage.

Acceptance Criteria

  • Define a complete set of Light Mode CSS variables (e.g., --bg-base, --text-primary).
  • Add a moon/sun toggle icon in the UI sidebar footer.
  • Implement Javascript logic to toggle a light class on the root HTML tag and save the setting.
  • Ensure all diagrams and markdown colors invert properly when the theme switches.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions