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-call-status.ts b/webui/src/web-components/sketch-call-status.ts
index d9e14b1..dbc5d57 100644
--- a/webui/src/web-components/sketch-call-status.ts
+++ b/webui/src/web-components/sketch-call-status.ts
@@ -70,8 +70,8 @@
<div
class="llm-indicator flex justify-center items-center w-8 h-8 rounded transition-all duration-200 relative ${this
.llmCalls > 0
- ? "bg-yellow-100 text-amber-500 animate-gentle-pulse active"
- : "bg-transparent text-gray-400"}"
+ ? "bg-yellow-100 dark:bg-yellow-900 text-amber-500 dark:text-amber-400 animate-gentle-pulse active"
+ : "bg-transparent text-gray-400 dark:text-gray-500"}"
title="${this.llmCalls > 0
? `${this.llmCalls} LLM ${this.llmCalls === 1 ? "call" : "calls"} in progress`
: "No LLM calls in progress"}${agentState}"
@@ -81,8 +81,8 @@
<div
class="tool-indicator flex justify-center items-center w-8 h-8 rounded transition-all duration-200 relative ${this
.toolCalls.length > 0
- ? "bg-blue-100 text-blue-500 animate-gentle-pulse active"
- : "bg-transparent text-gray-400"}"
+ ? "bg-blue-100 dark:bg-blue-900 text-blue-500 dark:text-blue-400 animate-gentle-pulse active"
+ : "bg-transparent text-gray-400 dark:text-gray-500"}"
title="${this.toolCalls.length > 0
? `${this.toolCalls.length} tool ${this.toolCalls.length === 1 ? "call" : "calls"} in progress: ${this.toolCalls.join(", ")}`
: "No tool calls in progress"}${agentState}"
@@ -93,10 +93,10 @@
<div
class="status-banner absolute py-0.5 px-1.5 rounded text-xs font-bold text-center tracking-wider w-26 left-1/2 transform -translate-x-1/2 top-3/5 z-10 opacity-90 ${statusClass} ${this
.isDisconnected
- ? "bg-red-50 text-red-600"
+ ? "bg-red-50 dark:bg-red-900 text-red-600 dark:text-red-400"
: !this.isIdle
- ? "bg-orange-50 text-orange-600"
- : "bg-green-50 text-green-700"}"
+ ? "bg-orange-50 dark:bg-orange-900 text-orange-600 dark:text-orange-400"
+ : "bg-green-50 dark:bg-green-900 text-green-700 dark:text-green-400"}"
title="${this.isDisconnected
? "Connection lost or container shut down"
: !this.isIdle