UI Styling & Theming
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The UI styling and theming of Open Claude Cowork is designed to provide a "modern, clean, dark-themed interface inspired by Claude.ai." It utilizes a mix of professional typography and a refined color palette to create a productive desktop chat environment. The system is built using vanilla CSS with custom properties (CSS variables) for consistent theming and Markdown rendering for complex message content.
Sources: README.md:21, renderer/style.css:1-12
Design System & Core Constants
The application's visual identity is defined by a set of CSS variables that govern colors and shadows. The theme primarily uses "cream" and "white" backgrounds for the main interface, contrasted by a dark sidebar for technical status tracking.
Typography
The project uses the "Inter" font family for general UI elements and "EB Garamond" for headings and greetings to achieve a sophisticated, editorial look.
Sources: renderer/style.css:1-4
Color Palette & Design Tokens
| Variable | Value | Usage |
|---|---|---|
--bg-cream | #f5f5f0 | Main application background |
--bg-white | #ffffff | Input containers and sidebar content |
--text-primary | #1a1a1a | Standard body text |
--accent-coral | #c4917b | Primary action buttons and status indicators |
--user-bubble | #e8e8e3 | User message backgrounds |
--border-light | #e5e5e0 | Dividers and container borders |
Sources: renderer/style.css:5-12
Application Layout
The interface follows a three-column architectural pattern managed within an .app-container using Flexbox.
The layout uses a responsive flex-direction row configuration. The main-content is set to flex: 1 to occupy all available space between the two sidebars.
Sources: renderer/style.css:34-40, renderer/index.html:12-162
Component Styling
1. Chat Interface & Messaging
Messages are styled differently based on the sender. User messages appear in bubbles on the right, while assistant messages are displayed as plain text with support for Markdown rendering and thinking sections.
- User Messages: Styled with
--user-bubblebackground and rounded corners (border-radius: 20px). - Assistant Messages: Utilize a larger line-height (1.7) for readability.
- Thinking Sections: Rendered within a
<details>block with a subtle#f8f8f6background and a specific "Thinking..." asterisk icon.
Sources: renderer/style.css:487-515, renderer/renderer.js:1010-1033
2. Sidebars
The application features two distinct sidebars with opposing color schemes:
- Left Sidebar: Light-themed (
--bg-white), containing the chat history list. - Right Sidebar: Dark-themed (background:
#2a2a2a), focusing on technical "Progress" and "Tool Calls".
3. Input Containers
The input system uses a floating container design with a high z-index and box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06). It includes complex nested controls for provider selection, model selection, and file attachments.
Sources: renderer/style.css:179-195, renderer/index.html:50-104
Tool Visualization & Streaming
A core feature of the UI is the real-time visualization of agentic operations.
- Inline Tool Calls: Displayed within the chat stream using a rounded border and a
#fafaf8background. They include an expandable result section that reveals the tool's JSON input and output. - Progress Tracking: Steps (Todos) are rendered in the sidebar with specific status icons (pending, in_progress, completed).
- Streaming Animation: Assistant messages feature a pulsing asterisk animation during token generation.
Sources: renderer/style.css:894-915, renderer/style.css:793-810, renderer/renderer.js:1037-1050
Setup & Environment Styling
The styling extends to the terminal-based setup experience via setup.sh, which uses standard echo formatting to guide users through API key configuration and dependency installation.
Sources: setup.sh:11-30
Conclusion
The UI Styling & Theming system in Open Claude Cowork provides a sophisticated user experience by balancing a minimalist aesthetic with functional technical feedback. Through the use of CSS variables, the project ensures a consistent theme across both standard chat elements and complex tool-use visualizations.