itzik — Dark Mode Toggle

A React implementation of the Dark Mode Toggle feature specified in UIFeatureDesign.md. Built via a design → issues → code agent workflow (see AGENTS.md).

Features

• Toggle switch in the top-right of the header (§3, §4)
• Sun/Moon icon + "Toggle Dark Mode" tooltip (§4)
• Theme state via React Context (§5, §9)
• Preference persisted to localStorage, restored on load, applied before first paint to avoid theme flash (§5.3, §5.4)
• Light / dark palettes with a 0.3s ease-in-out transition (§6)
• Accessible: role="switch", aria-checked, keyboard operable, screen-reader label "Toggle dark mode", ≥ 4.5:1 contrast, reduced-motion support (§7)
• Success-metric hooks for adoption + feedback (§10)

Run

npm install
npm run dev

Conventions

Per the team's global rule, every function name is prefixed with malm_. Because JSX requires component tags to start with a capital letter, each malm_-prefixed component function is aliased to a capitalized binding at its usage site (e.g. const Header = malm_Header;).

Project structure

src/
  main.jsx                     app entry
  App.jsx                      demo layout
  theme/
    ThemeContext.jsx           malm_ThemeProvider + malm_useTheme
    malm_storage.js            localStorage + system-preference helpers
  components/
    Header.jsx / .module.css   header with the toggle top-right
    DarkModeToggle.jsx / .css  the switch (icon, tooltip, a11y)
  analytics/
    malm_metrics.js            §10 metric hooks
  styles/global.css            theme variables + transitions

Traceability

Each issue in this repo maps to a design section — see AGENTS.md for the issue → design-section → code mapping.