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/tailwind.config.js b/webui/tailwind.config.js
index f51be72..6d7ccf5 100644
--- a/webui/tailwind.config.js
+++ b/webui/tailwind.config.js
@@ -1,9 +1,22 @@
/** @type {import('tailwindcss').Config} */
export default {
- content: ["./src/**/*.{js,ts,jsx,tsx,html}"],
+ content: ["./src/**/*.{js,ts,jsx,tsx,html}", "./src/test-theme.html"],
+ darkMode: "selector", // Enable class-based dark mode
plugins: ["@tailwindcss/container-queries"],
theme: {
extend: {
+ // Custom colors for better dark mode support
+ colors: {
+ // Define semantic color tokens
+ surface: {
+ DEFAULT: "#ffffff",
+ dark: "#1f2937",
+ },
+ "surface-secondary": {
+ DEFAULT: "#f9fafb",
+ dark: "#374151",
+ },
+ },
animation: {
"fade-in": "fadeIn 0.3s ease-in-out",
},