Summary
Add a dark/light theme toggle to the Settings tab. Tailwind dark mode is
already configured in tailwind.config.js — this is primarily a frontend task.
Why
Accessibility and user preference. Some users work in bright environments
where a dark UI causes eye strain. This also makes Sysora feel like a
fully polished, production-quality product.
Scope
Frontend
Tailwind
Acceptance criteria
Summary
Add a dark/light theme toggle to the Settings tab. Tailwind dark mode is
already configured in tailwind.config.js — this is primarily a frontend task.
Why
Accessibility and user preference. Some users work in bright environments
where a dark UI causes eye strain. This also makes Sysora feel like a
fully polished, production-quality product.
Scope
Frontend
theme: 'dark' | 'light' | 'system'to the settings storedarkclass to<html>element based on preferencesystemoption follows the OS preference viawindow.matchMediaindex.css:#F8F8F7/#FFFFFF#1C1B19#FFFFFFwith#E5E3DCborder#534AB7Tailwind
(e.g.
bg-surface-800,text-white/40) and replace withlight-mode equivalents under
dark:variantsAcceptance criteria