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
diff --git a/webui/src/web-components/demo/demo-framework/demo-runner.ts b/webui/src/web-components/demo/demo-framework/demo-runner.ts
index 85b8b5f..0e08af5 100644
--- a/webui/src/web-components/demo/demo-framework/demo-runner.ts
+++ b/webui/src/web-components/demo/demo-framework/demo-runner.ts
@@ -100,6 +100,7 @@
"sketch-todo-panel",
"sketch-tool-calls",
"sketch-view-mode-select",
+ "sketch-theme-toggle",
];
// Filter to only components that actually have demo files