Skip to content

Theming

Jump to bottom
Snowy edited this page Feb 15, 2026 · 1 revision

Theming

SnCode supports dark and light themes, driven entirely by CSS custom properties (variables).

Switching Themes

  1. Open Settings (Ctrl+, / Cmd+,)
  2. Go to the General tab
  3. Under Appearance, click Dark or Light

The theme changes immediately without a page reload.

How It Works

Theme is controlled by a data-theme attribute on the <html> element:

  • Dark theme: no attribute (:root defaults)
  • Light theme: data-theme="light" activates [data-theme="light"] overrides

All UI elements reference CSS variables like var(--bg-base), var(--text-primary), etc., so the entire UI updates when the theme changes.

CSS Variable Reference

Backgrounds

Variable Dark Light Usage
--bg-base #141414 #f2f2f2 Main app background
--bg-surface #161616 #f8f8f8 Panel/surface backgrounds
--bg-card #1a1a1a #ffffff Card backgrounds
--bg-elevated #1e1e1e #f5f5f5 Elevated elements (input bars, modals)
--bg-input #111 #ffffff Input field backgrounds
--bg-hover #1e1e1e #ebebeb Hover states
--bg-active #252525 #e0e0e0 Active/pressed states
--bg-code #0e0e0e #f6f8fa Code block backgrounds
--bg-user-bubble #222 #e8e8e8 User message bubbles
--bg-accent #e0e0e0 #1a1a1a Primary action buttons
--bg-accent-hover #ffffff #333 Accent hover state
--bg-stop #333 #d0d0d0 Stop button
--bg-stop-hover #444 #bbb Stop button hover

Borders

Variable Dark Light Usage
--border #222 #ddd Default borders
--border-subtle #1e1e1e #e8e8e8 Subtle/light borders
--border-active #333 #bbb Focused/active borders
--border-strong #2a2a2a #d0d0d0 Prominent borders

Text

Variable Dark Light Usage
--text-primary #e0e0e0 #1a1a1a Primary text
--text-bright #e8e8e8 #111 Emphasized text
--text-secondary #c0c0c0 #333 Secondary text
--text-heading #ccc #222 Headings
--text-label #b0b0b0 #555 Labels
--text-muted #808080 #666 Muted text
--text-dim #555 #888 Dim text
--text-dimmer #444 #aaa Dimmer text
--text-dimmest #333 #ccc Dimmest text
--text-on-accent #141414 #ffffff Text on accent backgrounds

Brand

Variable Dark Light Usage
--brand-sn #ffffff #1a1a1a "Sn" in SnCode logo
--brand-code #555 #999 "Code" in SnCode logo

UI Elements

Variable Dark Light Usage
--divider #252525 #e0e0e0 Divider lines
--scrollbar-thumb rgba(255,255,255,0.06) rgba(0,0,0,0.1) Scrollbar thumb
--scrollbar-hover rgba(255,255,255,0.12) rgba(0,0,0,0.2) Scrollbar thumb hover
--toggle-on #34c759 #34c759 Toggle switch "on" color
--success #10b981 #10b981 Success indicators
--bg-diff-header #161b2e #e8eaf6 Diff hunk headers
--bg-drag-highlight #1a1f2e #dde3f0 Drag-over file drop highlight
--check-mark #161616 #ffffff Todo checkbox checkmark

Code Syntax Highlighting

  • Dark theme: Uses highlight.js "github-dark-dimmed" theme (imported globally)
  • Light theme: Overrides key highlight.js variables via [data-theme="light"] .hljs rules for proper contrast

Additional Styling

  • Scrollbars: Custom 6px-wide scrollbars with rounded thumbs
  • Fonts: System font stack (SF Pro Text, Segoe UI, Roboto) for sans-serif; SF Mono, Cascadia Code, Fira Code for monospace
  • Drag region: Frameless titlebar area styled with -webkit-app-region: drag

SnCode Wiki

Getting Started

User Guide

Agent System

Technical

Support

Clone this wiki locally