Skip to content

Add Dark Mode Support to Harbor Website #701

@mythicalyash

Description

@mythicalyash

Description
The Harbor website currently only supports a light theme, which can be uncomfortable for users who prefer dark mode or work in low-light environments. This issue proposes adding a dark mode feature with the following capabilities:

Proposed Features

Theme Toggle: A user-friendly toggle button in the navbar to switch between light and dark modes
System Preference Detection: Automatically detect and respect the user's system theme preference (prefers-color-scheme)
Persistent Selection: Remember the user's theme choice across sessions using localStorage
FOUC Prevention: Implement inline script to prevent Flash of Unstyled Content on page load
Comprehensive Styling: Ensure all components (navbar, footer, cards, tables, code blocks, etc.) are properly styled for dark mode
Benefits
Improved Accessibility: Better readability for users with light sensitivity or those working in dark environments
Modern UX: Aligns with current web design trends and user expectations
User Preference: Respects system-level theme preferences while allowing manual override

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions