Theming System

Theme system, custom themes, and color format guide

Available Themes

Rizzo CSS includes 14 carefully crafted themes organized into light and dark categories. Each theme has its own dedicated page with detailed information, color palettes, and usage examples. Click on any theme card below to learn more about it.

Try Themes

Dark Themes

GitHub Dark Classic

Official GitHub dark theme for VS Code

Author: Primer (GitHub)

github-dark-classic

Shades of Purple

Professional theme with bold purple shades

Author: Ahmad Awais

shades-of-purple

Sandstorm Classic

Dark, red-based theme for late-night coding

Author: Devan Sisson

sandstorm-classic

Rocky Blood Orange

Dark theme with blood-orange accent

Author: Luca Heyworth

rocky-blood-orange

Minimal Dark Neon Yellow

Minimal dark theme with neon yellow accent

Author: Gabriel D Sanchez

minimal-dark-neon-yellow

Hack The Box

Dark blue with lime green accent, built for hackers

Author: silofy

hack-the-box

Pink Cat Boo

Sweet and cute dark theme with rose pink accents

Author: Fiona Fan

pink-cat-boo

Light Themes

GitHub Light

Official GitHub light theme for VS Code

Author: Primer (GitHub)

github-light

Red Velvet Cupcake

Velvet-cupcake light theme with red accent

Author: Fahad Ashraf Chaudhry

red-velvet-cupcake

Orangy One Light

Light theme with orange accent

Author: maher-cshub

orangy-one-light

Sunflower

Yellow light theme

Author: Hashirama Naiff

sunflower

Green Breeze Light

Green and blue focused light theme with good contrast

Author: icy9ptcl

green-breeze-light

Cute Pink

Cute pink light theme for VSCode

Author: WebFreak

cute-pink

Semi Light Purple

Light aesthetic theme with soft purple tones

Author: Kapil Yadav

semi-light-purple

Using Themes

Setting Theme

Set the theme via the data-theme attribute on the HTML element:

html html 
<html lang="en" data-theme="github-dark-classic">

Programmatic Theme Switching

The ThemeSwitcher component handles theme switching automatically. It:

  • Updates the data-theme attribute
  • Persists choice in localStorage
  • Updates all components instantly

Manual Theme Switching

javascript javascript 
// Set theme
document.documentElement.setAttribute('data-theme', 'shades-of-purple');

// Save to localStorage
localStorage.setItem('theme', 'shades-of-purple');

// Load saved theme
const savedTheme = localStorage.getItem('theme') || 'github-dark-classic';
document.documentElement.setAttribute('data-theme', savedTheme);

Theme File Structure

Themes are organized in src/styles/themes/:

plaintext plaintext 
themes/
├── dark/
│   ├── github-dark-classic.css
│   ├── shades-of-purple.css
│   ├── sandstorm-classic.css
│   ├── rocky-blood-orange.css
│   ├── minimal-dark-neon-yellow.css
│   ├── hack-the-box.css
│   └── pink-cat-boo.css
└── light/
    ├── github-light.css
    ├── red-velvet-cupcake.css
    ├── orangy-one-light.css
    ├── sunflower.css
    ├── green-breeze-light.css
    ├── cute-pink.css
    └── semi-light-purple.css

Creating Custom Themes

  1. Create a new theme file in src/styles/themes/dark/ or src/styles/themes/light/
  2. Use the [data-theme="your-theme-name"] selector
  3. Define all semantic variables including contrast-aware text colors
  4. Import in src/styles/main.css

Example Theme

css css 
/* My Custom Theme */
/* Author: Your Name */

[data-theme="my-theme"] {
  --bg: oklch(15% 0.015 270.5deg);
  --bg-alt: oklch(12% 0.012 270.5deg);
  --fg: oklch(95% 0.003 100.2deg);
  --fg-dim: oklch(85% 0.003 100.2deg);
  --current-line: oklch(25% 0.022 270.5deg);
  --selection: oklch(25% 0.022 270.5deg);
  
  /* Accent colors */
  --accent-color: oklch(65% 0.180 290.1deg);
  --accent-hover-color: oklch(70% 0.195 340.1deg);
  
  /* Semantic mappings */
  --background: var(--bg);
  --background-alt: var(--bg-alt);
  --text: var(--fg);
  --text-dim: var(--fg-dim);
  --border: var(--current-line);
  --accent: var(--accent-color);
  --accent-hover: var(--accent-hover-color);
  
  /* Contrast-aware text colors */
  --accent-text: oklch(100% 0 0deg); /* White text for dark accent */
  --success-text: oklch(100% 0 0deg);
  --warning-text: oklch(20% 0 0deg); /* Dark text for light yellow */
  --error-text: oklch(100% 0 0deg);
  --info-text: oklch(100% 0 0deg);
}

Contrast Text Colors

When creating themes, ensure proper contrast by setting text colors based on background lightness:

  • Dark backgrounds (< 50% lightness): Use white text (oklch(100% 0 0deg))
  • Light backgrounds (>= 50% lightness): Use dark text (oklch(20% 0 0deg))
  • Warning colors (typically 80%+ lightness): Always use dark text

This ensures WCAG AA compliance (4.5:1 contrast ratio for normal text).

Color Format

All themes use OKLCH format with percentages and degrees:

css css 
--bg: oklch(15% 0.015 270.5deg);

Format: oklch(lightness% chroma hue)

OKLCH Benefits

  • Perceptually uniform color space
  • Better color manipulation
  • Consistent appearance across displays

Color Conversion

To convert from hex to OKLCH:

Theme Persistence

The theme switcher automatically saves the selected theme to localStorage and restores it on page load. An inline script in Layout.astro prevents theme flash by setting the theme immediately before the page renders.