Skip to content

feat: add prefers-color-scheme light mode support to website #75

@h3qing

Description

@h3qing

What

The marketing website currently only supports dark mode. Add light mode support that respects `prefers-color-scheme`.

Current state

  • `website/index.html` uses CSS custom properties (`--bg`, `--text`, etc.) defined in `:root`
  • All colors are dark theme (dark backgrounds, light text)
  • No `@media (prefers-color-scheme: light)` rules exist

Approach

  1. Add a `@media (prefers-color-scheme: light)` block in the `<style>` section
  2. Override the CSS custom properties with light-mode values
  3. Ensure the Mando SVGs (which have hardcoded dark outlines) still look good on light backgrounds

Example light palette:
```css
@media (prefers-color-scheme: light) {
:root {
--bg: #FAFAF8;
--surface: #FFFFFF;
--border: #E5E0DA;
--text: #1A1612;
--text-dim: #5C5248;
--text-muted: #8A7A6A;
/* ... etc */
}
}
```

Files to modify

  • `website/index.html` — add light mode CSS variables + any element-specific overrides

Acceptance criteria

  • Website auto-switches to light mode based on system preference
  • All text is readable on light backgrounds
  • Mando SVGs look good on light backgrounds
  • Buttons, cards, and hover states work in both modes
  • No hardcoded colors outside of CSS variables (or overridden where needed)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions