How to Customize Theme Colors

StudioWeb uses CSS custom properties (CSS variables) for theming, making it easy to customize colors or switch between dark and light modes.

Current Theme

StudioWeb ships with a dark theme by default, using colors from the Tailwind CSS Slate palette.

Theme File Location

All theme variables are defined in:

apps/runtime-web/src/components/studio/theme.css

Customizing Colors

Method 1: Edit CSS Variables Directly

Open theme.css and modify the :root variables:

:root {
  /* Backgrounds */
  --studio-bg-app: #0f172a;           /* Main app background */
  --studio-bg-panel: #1e293b;         /* Panels, sidebars */
  --studio-bg-elevated: #334155;      /* Hover states */
  
  /* Text */
  --studio-text-primary: #f1f5f9;     /* Primary text */
  --studio-text-muted: #94a3b8;       /* Secondary text */
  
  /* Accent */
  --studio-accent: #3b82f6;           /* Primary accent (blue) */
  
  /* ... more variables available */
}

Method 2: Switch to Light Mode

The theme file includes a .studio-light class with light mode colors. To enable:

1. Add the studio-light class to the root element:

<div className="studio-light" style={{ ... }}>

2. Or toggle via JavaScript:

document.documentElement.classList.toggle('studio-light');

Method 3: Follow System Theme (Future)

Uncomment the @media (prefers-color-scheme: light) block in theme.css to automatically follow the user’s system preference.

Available Variables

Backgrounds

Text

Accent Colors

Borders

Resetting to Default

To reset all customizations:

1. Revert theme.css to its original state:

   git checkout apps/runtime-web/src/components/studio/theme.css

2. Or replace variable values with the defaults listed above.

Known Limitations

Note: Some inline color values in StudioWeb.tsx have not yet been migrated to CSS variables. See the TODO comment at the top of theme.css for the full list.

See Also

• Keyboard Shortcuts
• Saving and Loading Pages