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-container-status.ts b/webui/src/web-components/sketch-container-status.ts
index bd9524b..b7b0602 100644
--- a/webui/src/web-components/sketch-container-status.ts
+++ b/webui/src/web-components/sketch-container-status.ts
@@ -380,10 +380,12 @@
if (!this.state?.ssh_available) {
return html`
- <div class="mt-2.5 pt-2.5 border-t border-gray-300">
+ <div
+ class="mt-2.5 pt-2.5 border-t border-gray-300 dark:border-gray-600"
+ >
<h3>Connect to Container</h3>
<div
- class="bg-orange-50 border-l-4 border-orange-500 p-3 mt-2 text-xs text-orange-800"
+ class="bg-orange-50 dark:bg-orange-900 border-l-4 border-orange-500 dark:border-orange-400 p-3 mt-2 text-xs text-orange-800 dark:text-orange-200"
>
SSH connections are not available:
${this.state?.ssh_error || "SSH configuration is missing"}
@@ -393,16 +395,16 @@
}
return html`
- <div class="mt-2.5 pt-2.5 border-t border-gray-300">
+ <div class="mt-2.5 pt-2.5 border-t border-gray-300 dark:border-gray-600">
<h3>Connect to Container</h3>
<div class="flex items-center mb-2 gap-2.5">
<div
- class="font-mono text-xs bg-gray-100 px-2 py-1 rounded border border-gray-300 flex-grow"
+ class="font-mono text-xs bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 flex-grow"
>
${sshCommand}
</div>
<button
- class="bg-gray-100 border border-gray-300 rounded px-1.5 py-0.5 text-xs cursor-pointer transition-colors hover:bg-gray-200"
+ class="bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded px-1.5 py-0.5 text-xs text-gray-900 dark:text-gray-100 cursor-pointer transition-colors hover:bg-gray-200 dark:hover:bg-gray-600"
@click=${() => this.copyToClipboard(sshCommand)}
>
Copy
@@ -410,12 +412,12 @@
</div>
<div class="flex items-center mb-2 gap-2.5">
<div
- class="font-mono text-xs bg-gray-100 px-2 py-1 rounded border border-gray-300 flex-grow"
+ class="font-mono text-xs bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 flex-grow"
>
${vscodeCommand}
</div>
<button
- class="bg-gray-100 border border-gray-300 rounded px-1.5 py-0.5 text-xs cursor-pointer transition-colors hover:bg-gray-200"
+ class="bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded px-1.5 py-0.5 text-xs text-gray-900 dark:text-gray-100 cursor-pointer transition-colors hover:bg-gray-200 dark:hover:bg-gray-600"
@click=${() => this.copyToClipboard(vscodeCommand)}
>
Copy
@@ -654,10 +656,10 @@
class="info-toggle ml-2 w-6 h-6 rounded-full flex items-center justify-center ${this
.showDetails
? "bg-blue-500 text-white border-blue-600"
- : "bg-gray-100 text-gray-600 border-gray-300"} border cursor-pointer font-bold italic transition-all hover:${this
+ : "bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600"} border cursor-pointer font-bold italic transition-all hover:${this
.showDetails
? "bg-blue-600"
- : "bg-gray-200"}"
+ : "bg-gray-200 dark:bg-gray-600"}"
@click=${this._toggleInfoDetails}
title="Show/hide details"
>
@@ -668,7 +670,7 @@
<div
class="${this.showDetails
? "block"
- : "hidden"} absolute min-w-max top-full z-100 bg-white rounded-lg p-4 shadow-lg mt-1.5"
+ : "hidden"} absolute min-w-max top-full z-100 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg p-4 shadow-lg mt-1.5"
style="left: 50%; transform: translateX(-50%);"
>
<!-- Last Commit section moved to main grid -->
@@ -678,34 +680,46 @@
style="grid-template-columns: auto auto"
>
<div class="flex items-center whitespace-nowrap mr-2.5 text-xs">
- <span class="text-xs text-gray-600 mr-1 font-medium"
+ <span
+ class="text-xs text-gray-600 dark:text-gray-400 mr-1 font-medium"
>Commit:</span
>
- <span id="initialCommit" class="text-xs font-semibold break-all"
+ <span
+ id="initialCommit"
+ class="text-xs font-semibold break-all text-gray-900 dark:text-gray-100"
>${this.state?.initial_commit?.substring(0, 8)}</span
>
</div>
<div class="flex items-center whitespace-nowrap mr-2.5 text-xs">
- <span class="text-xs text-gray-600 mr-1 font-medium">Msgs:</span>
- <span id="messageCount" class="text-xs font-semibold break-all"
+ <span
+ class="text-xs text-gray-600 dark:text-gray-400 mr-1 font-medium"
+ >Msgs:</span
+ >
+ <span
+ id="messageCount"
+ class="text-xs font-semibold break-all text-gray-900 dark:text-gray-100"
>${this.state?.message_count}</span
>
</div>
<div class="flex items-center whitespace-nowrap mr-2.5 text-xs">
- <span class="text-xs text-gray-600 mr-1 font-medium"
+ <span
+ class="text-xs text-gray-600 dark:text-gray-400 mr-1 font-medium"
>Session ID:</span
>
- <span id="sessionId" class="text-xs font-semibold break-all"
+ <span
+ id="sessionId"
+ class="text-xs font-semibold break-all text-gray-900 dark:text-gray-100"
>${this.state?.session_id || "N/A"}</span
>
</div>
<div class="flex items-center whitespace-nowrap mr-2.5 text-xs">
- <span class="text-xs text-gray-600 mr-1 font-medium"
+ <span
+ class="text-xs text-gray-600 dark:text-gray-400 mr-1 font-medium"
>Hostname:</span
>
<span
id="hostnameDetail"
- class="text-xs font-semibold break-all cursor-default"
+ class="text-xs font-semibold break-all cursor-default text-gray-900 dark:text-gray-100"
title="${this.getHostnameTooltip()}"
>
${this.formatHostname()}
@@ -716,22 +730,26 @@
<div
class="flex items-center whitespace-nowrap mr-2.5 text-xs"
>
- <span class="text-xs text-gray-600 mr-1 font-medium"
+ <span
+ class="text-xs text-gray-600 dark:text-gray-400 mr-1 font-medium"
>Agent State:</span
>
<span
id="agentState"
- class="text-xs font-semibold break-all"
+ class="text-xs font-semibold break-all text-gray-900 dark:text-gray-100"
>${this.state?.agent_state}</span
>
</div>
`
: ""}
<div class="flex items-center whitespace-nowrap mr-2.5 text-xs">
- <span class="text-xs text-gray-600 mr-1 font-medium"
+ <span
+ class="text-xs text-gray-600 dark:text-gray-400 mr-1 font-medium"
>Input tokens:</span
>
- <span id="inputTokens" class="text-xs font-semibold break-all"
+ <span
+ id="inputTokens"
+ class="text-xs font-semibold break-all text-gray-900 dark:text-gray-100"
>${formatNumber(
(this.state?.total_usage?.input_tokens || 0) +
(this.state?.total_usage?.cache_read_input_tokens || 0) +
@@ -740,10 +758,13 @@
>
</div>
<div class="flex items-center whitespace-nowrap mr-2.5 text-xs">
- <span class="text-xs text-gray-600 mr-1 font-medium"
+ <span
+ class="text-xs text-gray-600 dark:text-gray-400 mr-1 font-medium"
>Context Window:</span
>
- <span id="contextWindow" class="text-xs font-semibold break-all"
+ <span
+ id="contextWindow"
+ class="text-xs font-semibold break-all text-gray-900 dark:text-gray-100"
>${formatNumber(
(this.latestUsage?.input_tokens || 0) +
(this.latestUsage?.cache_read_input_tokens || 0) +
@@ -752,10 +773,13 @@
>
</div>
<div class="flex items-center whitespace-nowrap mr-2.5 text-xs">
- <span class="text-xs text-gray-600 mr-1 font-medium"
+ <span
+ class="text-xs text-gray-600 dark:text-gray-400 mr-1 font-medium"
>Output tokens:</span
>
- <span id="outputTokens" class="text-xs font-semibold break-all"
+ <span
+ id="outputTokens"
+ class="text-xs font-semibold break-all text-gray-900 dark:text-gray-100"
>${formatNumber(this.state?.total_usage?.output_tokens)}</span
>
</div>
@@ -764,10 +788,13 @@
<div
class="flex items-center whitespace-nowrap mr-2.5 text-xs"
>
- <span class="text-xs text-gray-600 mr-1 font-medium"
+ <span
+ class="text-xs text-gray-600 dark:text-gray-400 mr-1 font-medium"
>Total cost:</span
>
- <span id="totalCost" class="text-xs font-semibold break-all"
+ <span
+ id="totalCost"
+ class="text-xs font-semibold break-all text-gray-900 dark:text-gray-100"
>$${(
this.state?.total_usage?.total_cost_usd ?? 0
).toFixed(2)}</span
@@ -776,7 +803,7 @@
`
: ""}
<div
- class="flex items-center whitespace-nowrap mr-2.5 text-xs col-span-full mt-1.5 border-t border-gray-300 pt-1.5"
+ class="flex items-center whitespace-nowrap mr-2.5 text-xs col-span-full mt-1.5 border-t border-gray-300 dark:border-gray-600 pt-1.5"
>
<a href="logs" class="text-blue-600">Logs</a> (<a
href="download"