tree 7242aaea3ef677a86ace50e7c805935f27890d94
parent 19a32eaa120562170595e42584f3fc4b40828b97
author banksean <banksean@gmail.com> 1752857557 +0000
committer Autoformatter <bot@sketch.dev> 1752870563 +0000

webui: add dark mode implementation plan

Also implements phase 1 of the plan, which just lays the foundation
for implementing the user-visible changes. This does not include
any dark-mode theme settings for the rest of the web UI, and
while it does inlcude a "sketch-theme-toggle" element, this is
only included in the demo:runner vite server for interactive testing.
It's not included in the app shell base yet.

-SM

---

Documents comprehensive strategy for implementing dark mode in Sketch's
web UI using Tailwind CSS class-based approach.

The plan covers:
- Foundation setup (Tailwind config, theme service, toggle component)
- Systematic component updates with dark mode variants
- Accessibility considerations and testing checklist
- 4-week implementation timeline

Key technical decisions:
- Uses SketchTailwindElement base class following existing patterns
- Singleton theme service with event system for component coordination
- Respects system preferences while allowing user override
- Persistent theme storage in localStorage

This provides a roadmap for adding dark mode support while maintaining
consistency with Sketch's existing web component architecture.

Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: s6b69ad95a4394f98k