DenchClaw Dark Mode and Theming

How DenchClaw's dark mode and theming options let you customize the appearance of your AI CRM for comfortable all-day use.

Mark Rachapoom

March 26, 2026·7 min read

DenchClaw Dark Mode and Theming

DenchClaw ships with a carefully designed dark mode that makes the interface comfortable for all-day use — whether you're in a dark office environment, working late, or just prefer the aesthetic. The theming system also lets you customize accent colors, sidebar style, and data density to suit your workflow.

Enabling Dark Mode#

Three ways to toggle dark mode:

1. System preference sync (default) By default, DenchClaw follows your macOS system appearance. If you've enabled dark mode in System Settings → Appearance, DenchClaw switches automatically.

2. Manual toggle Click the sun/moon icon in the bottom-left corner of the DenchClaw sidebar to toggle between light and dark mode independently of your system setting.

3. Keyboard shortcut Cmd+Shift+D (Mac) / Ctrl+Shift+D (Windows/Linux) toggles dark mode.

3. Settings panel Go to Settings → Appearance → Color Scheme and select: System (default), Light, or Dark.

Dark Mode Design#

DenchClaw's dark mode uses a purpose-designed dark palette rather than simply inverting the light theme:

Background: Deep neutral gray (#0f0f0f base) — not pure black, which causes eye strain
Surface: Slightly elevated gray for cards and panels
Text: Off-white (#e8e8e8) — not pure white, easier on the eyes in dark environments
Accent: Your configured accent color at slightly reduced saturation in dark mode
Status colors: Adjusted saturation/lightness for visibility in dark backgrounds
Borders: Subtle dark gray separators — visible without being harsh

The result is an interface that reads cleanly in both a dark room and in bright sunlight.

Accent Color Customization#

Change the accent color (used for active states, buttons, links, and status badges) in Settings → Appearance → Accent Color.

Available preset accents:

Indigo (default) — professional, readable in both modes
Emerald — for a more vibrant, modern feel
Violet — high-energy, good contrast
Amber — warm, earthy
Rose — modern, distinctive
Cyan — minimal, technical feel
Slate — muted, minimal

Or enter a custom hex color for fully custom branding.

Sidebar Style#

The sidebar has three visual styles:

Default — standard left panel with icon + label navigation
Minimal — icon-only sidebar, expands on hover (saves horizontal space)
Floating — sidebar with rounded corners and elevation shadow

Configure in Settings → Appearance → Sidebar Style.

The minimal sidebar is particularly useful when using DenchClaw in a smaller window or when you want to maximize space for your data.

Data Density#

Control how much information is packed into table rows and list items:

Comfortable (default) — standard row height, easy reading
Compact — reduced row height, fits more rows per screen
Spacious — expanded rows, better for touch screens

Configure in Settings → Appearance → Density, or use the density toggle button in any view.

Custom CSS#

For advanced users, DenchClaw supports custom CSS injection for workspace-specific styling. Add your custom CSS to ~/.openclaw-dench/workspace/custom.css:

/* Example: Custom font */
body {
  font-family: 'Berkeley Mono', monospace;
}
 
/* Example: Darker sidebar */
.sidebar {
  background: #080808;
}
 
/* Example: Colored row highlights */
.table-row[data-status="High Priority"] {
  background: rgba(239, 68, 68, 0.08);
}

Changes are applied immediately without restart. This is useful for personal preference adjustments, accessibility customizations, or building a consistent look for a team workspace.

Dench Apps and Theming#

When building custom Dench Apps, your apps receive the current theme context so they can match the workspace appearance:

// Get current theme in your Dench App
const theme = await dench.context.getTheme();
// Returns: { mode: 'dark', accent: '#6366f1', surface: '#1a1a1a', text: '#e8e8e8' }
 
// Apply to your app
document.documentElement.setAttribute('data-theme', theme.mode);
document.documentElement.style.setProperty('--accent', theme.accent);

Apps that use these CSS variables automatically look correct in both light and dark mode.

Theme Persistence#

Your theme settings are saved locally in ~/.openclaw-dench/workspace/settings.yaml:

appearance:
  colorScheme: dark      # system, light, dark
  accent: "#6366f1"
  sidebarStyle: minimal
  density: compact

Settings persist across sessions and are applied immediately when DenchClaw loads.

Status Color Customization#

In dark mode, the default status colors are automatically adjusted for contrast. You can also customize status colors per-object in your .object.yaml:

statuses:
  - name: Active
    color: "#22c55e"     # Green — custom hex
  - name: Inactive
    color: "#6b7280"     # Gray
  - name: Prospect
    color: "#3b82f6"     # Blue
  - name: At Risk
    color: "#ef4444"     # Red

In dark mode, these colors are rendered with slight desaturation to avoid glare. In light mode, they're rendered at full saturation.

Accessibility#

DenchClaw's theming respects macOS accessibility settings:

Reduce motion: Disables transition animations if you have "Reduce Motion" enabled in macOS Accessibility settings
Increase contrast: Higher-contrast text and borders when macOS "Increase Contrast" is enabled
Bold text: System bold text setting is respected

See also: DenchClaw Keyboard Shortcuts for theme toggling shortcuts and DenchClaw PWA for the standalone window experience.

Theming for Accessibility#

Dark mode isn't just an aesthetic preference — it's an accessibility consideration for many users. DenchClaw's dark mode is designed to meet WCAG 2.1 AA contrast ratios in all theme combinations. Here's what that means in practice:

Text contrast ratios: Primary text (--dc-text-primary) on primary backgrounds (--dc-bg-primary) maintains a minimum 4.5:1 ratio in both dark and light modes
Interactive elements: Buttons, links, and form controls have at least 3:1 contrast against their backgrounds
Focus indicators: The focus ring (using --dc-accent with a high-contrast offset) is visible in all themes

If you're building a custom Dench App and want to verify your color choices, use the browser's built-in accessibility checker or tools like axe-core. DenchClaw's CSS custom properties are already validated — custom colors you introduce should also pass WCAG checks.

For users who need even higher contrast, DenchClaw supports a High Contrast mode (Settings → Appearance → Accessibility → High Contrast). This bumps contrast ratios to WCAG AAA levels and removes subtle transparency effects.

Managing Multiple Workspaces with Different Themes#

If you run multiple DenchClaw workspaces (one for work, one for a side project), each workspace stores its theme preference independently. You can visually distinguish them by setting different accent colors:

Work workspace: purple accent (#6c63ff)
Personal workspace: teal accent (#0d9488)
Client workspace: orange accent (#f97316)

The accent color is visible in the sidebar, action buttons, and active states — enough to tell at a glance which workspace you're in.