webui: implement comprehensive dark mode support
Add complete dark mode implementation across all web UI components with
theme initialization and consistent styling:
Core infrastructure:
- Update DARK_MODE.md documentation with current implementation details
- Add theme initialization to sketch-app-shell-base component
- Implement ThemeService integration with existing theme toggle system
Component updates with dark mode variants:
- sketch-app-shell: Main container backgrounds and text colors
- sketch-app-shell-base: Top banner, todo panel container with gradient backgrounds
- sketch-chat-input: Input fields, buttons, overlay messages, and drop zones
- sketch-container-status: Info panels, SSH connection displays, and expandable details
- sketch-call-status: Status indicators, banners, and activity states
- sketch-view-mode-select: Tab container, button states, and active tab styling
- sketch-timeline-message: Message bubbles, markdown content, code blocks, and commit info
- sketch-push-button: Overlay popup, form controls, and result containers
- sketch-todo-panel: Todo items, headers, comment modal, and form elements
- sketch-diff-range-picker: Dropdown interface, commit display, and git reference badges
CSS and styling improvements:
- Comprehensive markdown content styling for dark theme
- Code block backgrounds and syntax highlighting adjustments
- Mermaid diagram container styling for dark mode
- Auto-generated link styling with proper contrast
- Git reference badge colors (tags: amber, branches: green, sketch-base: blue)
Interactive element enhancements:
- Consistent hover states across light and dark themes
- Proper focus indicators with accessible contrast ratios
- Loading spinners and progress indicators adapted for dark backgrounds
- Error and success message styling with semantic color preservation
Key implementation details:
- Consistent color mappings: white→gray-900, gray-100→gray-800, gray-200→gray-700
- Preserved brand colors (blue-500, red-600, green-600) that work in both themes
- Maintained semantic color coding for success/error/warning states
- Ensured accessibility with proper contrast ratios throughout
- Theme system integration enables seamless switching without page reload
The web UI now provides a complete, professional dark mode experience
with excellent usability and visual consistency while preserving all
existing functionality and accessibility standards.
Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: s8219557c3ecba46dk
diff --git a/webui/src/web-components/sketch-app-shell-base.ts b/webui/src/web-components/sketch-app-shell-base.ts
index 8e777eb..4b88f89 100644
--- a/webui/src/web-components/sketch-app-shell-base.ts
+++ b/webui/src/web-components/sketch-app-shell-base.ts
@@ -5,6 +5,7 @@
import { AgentMessage, State, Usage } from "../types";
import { aggregateAgentMessages } from "./aggregateAgentMessages";
import { SketchTailwindElement } from "./sketch-tailwind-element";
+import { ThemeService } from "./theme-service";
import "./sketch-chat-input";
import "./sketch-container-status";
@@ -180,6 +181,9 @@
connectedCallback() {
super.connectedCallback();
+ // Initialize theme system
+ ThemeService.getInstance().initializeTheme();
+
// Get reference to the container status element
setTimeout(() => {
this.containerStatusElement = this.querySelector("#container-status");
@@ -880,7 +884,7 @@
<!-- Top banner: flex row, space between, border bottom, shadow -->
<div
id="top-banner"
- class="flex self-stretch justify-between items-center px-5 pr-8 mb-0 border-b border-gray-200 gap-5 bg-white shadow-md w-full h-12"
+ class="flex self-stretch justify-between items-center px-5 pr-8 mb-0 border-b border-gray-200 dark:border-gray-700 gap-5 bg-white dark:bg-gray-800 shadow-md w-full h-12"
>
<!-- Title container -->
<div
@@ -906,7 +910,7 @@
: html`sketch`}
</h1>
<h2
- class="m-0 p-0 text-gray-600 text-sm font-normal italic whitespace-nowrap overflow-hidden text-ellipsis"
+ class="m-0 p-0 text-gray-600 dark:text-gray-400 text-sm font-normal italic whitespace-nowrap overflow-hidden text-ellipsis"
>
${this.slug}
</h2>
@@ -1059,8 +1063,8 @@
<div
class="${this._todoPanelVisible && this.viewMode === "chat"
? "block"
- : "hidden"} fixed top-12 right-4 max-lg:hidden xl:w-[350px] lg:w-[300px] z-[100] transition-[bottom] duration-200 ease-in-out"
- style="bottom: var(--chat-input-height, 90px); background: linear-gradient(to bottom, #fafafa 0%, #fafafa 90%, rgba(250, 250, 250, 0.5) 95%, rgba(250, 250, 250, 0.2) 100%); border-left: 1px solid #e0e0e0;"
+ : "hidden"} fixed top-12 right-4 max-lg:hidden xl:w-[350px] lg:w-[300px] z-[100] transition-[bottom] duration-200 ease-in-out bg-gradient-to-b from-gray-50 to-gray-50/20 dark:from-gray-800 dark:to-gray-800/20 border-l border-gray-300 dark:border-gray-600"
+ style="bottom: var(--chat-input-height, 90px);"
>
<sketch-todo-panel
.visible=${this._todoPanelVisible && this.viewMode === "chat"}