feat: add dark mode support

[perzeuss]

🌙 Add Dark Mode Support

Overview

Implement a dark mode theme for the Todo application, allowing users to enable or disable dark mode for better accessibility and user experience.

Acceptance Criteria

• Add dark mode CSS variables and selectors in app/globals.css.
• Provide a toggle button in the UI header to switch between light and dark modes.
• Persist the user's theme preference across sessions (e.g., with localStorage).
• Respect user system preference on first load.

Technical Notes

• Use CSS variables for dark/light switching.
• Use window.matchMedia('(prefers-color-scheme: dark)') for detecting system setting.
• Consider accessibility.

Design Tokens for Dark Theme

--color-text-contrast: #000;
--color-primary: #60a5fa;
--color-secondary: #94a3b8;
--color-background: #0f172a;
--color-surface: #1e293b;
--color-text: #f1f5f9;
--color-text-muted: #94a3b8;
--color-border: #334155;
--color-success: #34d399;
--color-danger: #f87171;
--color-warning: #fbbf24;

Theme Toggle CSS Classes

Use these classes for the theme toggle button:

• .todo-app__theme-toggle
• .todo-app__theme-toggle:hover
• .todo-app__theme-toggle:focus
• .todo-app__theme-toggle[aria-pressed="true"]
• .todo-app__theme-text

See components/pages/TodoApp/TodoApp.css for details and responsive variants.

Out of Scope

• High contrast mode
• Other theming options

References

• MDN prefers-color-scheme
• A Complete Guide to Dark Mode on the Web
• WCAG 2.2 Understanding Docs

[perzeuss]

Please start from the feat/7-add-dark-mode-support branch, as the TodoItem styling has been implemented there.