Skip to content

Dark / light theme toggle #2

@Dhwanil25

Description

@Dhwanil25

Overview

Agentis currently uses a fixed dark theme defined in src/index.css via CSS custom properties (--bg, --fg, --surface, etc.).

A theme toggle would let users switch between dark and light mode and respect their OS preference.

Implementation plan

  1. Add a [data-theme='light'] block in index.css overriding all -- tokens with light equivalents
  2. Add a toggle button to the Sidebar bottom bar (next to the Ctrl+K agents hint)
  3. Persist the preference in localStorage under agentis_theme
  4. On mount, read the preference (or fall back to prefers-color-scheme) and set document.documentElement.dataset.theme

Relevant file

  • src/index.css — all colour tokens are here
  • src/components/Sidebar.tsx — add toggle button at the bottom

Good first issue

Pure CSS + one small React state — no backend or engine changes 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