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/global.css b/webui/src/global.css
index f1d8c73..57c0010 100644
--- a/webui/src/global.css
+++ b/webui/src/global.css
@@ -1 +1,28 @@
@import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Override dark mode classes to use .dark selector instead of prefers-color-scheme */
+.dark .dark\:bg-gray-900 {
+ background-color: var(--color-gray-900);
+}
+.dark .dark\:bg-gray-800 {
+ background-color: var(--color-gray-800);
+}
+.dark .dark\:text-gray-100 {
+ color: var(--color-gray-100);
+}
+.dark .dark\:text-gray-200 {
+ color: var(--color-gray-200);
+}
+.dark .dark\:text-gray-300 {
+ color: var(--color-gray-300);
+}
+.dark .dark\:border-gray-600 {
+ border-color: var(--color-gray-600);
+}
+.dark .dark\:border-gray-700 {
+ border-color: var(--color-gray-700);
+}
+.dark .dark\:hover\:bg-gray-700:hover {
+ background-color: var(--color-gray-700);
+}