CSS Tags
Search

Theme
Theme creator

Tune semantic inputs, preview them live, then export a trailing CSS layer.

Starting points
Color
Shape and spacing
Typography
Export theme

Load the generated file after css-tags.

Using documentation defaults.
GitHub

Example Brand Themes (`themes/example-brand.css`)

This file demonstrates how to implement brand-specific color themes using the framework's color system. It provides three example brand palettes that can be app

Apply a brand theme at any boundary

The example brand file supplies coordinated accents, surfaces, text, and feedback colors.
Ocean

Quarterly report

A complete theme is activated by one attribute.

More examples

Each example introduces a different part of the shipped API.

Brand themes update a complete component set

Inspect text, surface, accent, and feedback roles together instead of judging a theme from one button.

Ocean workspace

Semantic surfaces share the brand.

Healthy2 warnings

This file demonstrates how to implement brand-specific color themes using the framework’s color system. It provides three example brand palettes that can be applied via data attributes.

Overview

The file defines brand themes by setting core color variables that drive the entire design system. Each brand establishes:

  • Primary accent color (HSL values)
  • Hue shifts for secondary and tertiary colors
  • Optional dark mode adjustments

Brand Themes

Ocean Theme

A cool, professional blue-based brand.

Data Attribute: data-theme="ocean"

Color Variables:

  • --accent-h: 200 (Blue hue)
  • --accent-c: 0.16 (16% chroma)
  • --accent-l: 60% (60% lightness)
  • --secondary-hue-shift: 40 (Warmer secondary colors)
  • --tertiary-hue-shift: -80 (Cooler tertiary colors)

Dark Mode Adjustments:

  • --accent-c: 0.20 (Increased chroma for better contrast)
  • --accent-l: 70% (Lighter for dark backgrounds)

Sunrise Theme

A warm, energetic orange-based brand.

Data Attribute: data-theme="sunrise"

Color Variables:

  • --accent-h: 30 (Orange hue)
  • --accent-c: 0.18 (18% chroma)
  • --accent-l: 62% (62% lightness)
  • --secondary-hue-shift: 60 (More saturated secondary)
  • --tertiary-hue-shift: -90 (Deep blue tertiary)

Dark Mode Adjustments:

  • --accent-c: 0.22 (Increased chroma)
  • --accent-l: 72% (Lighter)

Forest Theme

A natural, green-based brand.

Data Attribute: data-theme="forest"

Color Variables:

  • --accent-h: 145 (Green hue)
  • --accent-c: 0.16 (16% chroma)
  • --accent-l: 58% (58% lightness)
  • --secondary-hue-shift: 50 (Yellow-green secondary)
  • --tertiary-hue-shift: -100 (Purple tertiary)

Dark Mode Adjustments:

  • --accent-c: 0.18 (Slightly increased chroma)
  • --accent-l: 68% (Lighter)

Usage

Apply themes globally by setting the data attribute on the root element:

<html data-theme="ocean">
  <!-- Ocean-themed application -->
</html>

Or apply to specific sections:

<div data-theme="sunrise">
  <!-- Sunrise-themed section -->
</div>

How It Works

These variables feed into the color generation system defined in core/palette.css. The framework automatically generates:

  • Full color scales from these base values
  • Semantic color tokens (--theme-primary, --theme-secondary, etc.)
  • Feedback colors (success, warning, error)
  • Interactive states (hover, focus, active)

Dark Mode Support

The file includes automatic dark mode adjustments using prefers-color-scheme: dark. These tweaks ensure brand colors remain vibrant and accessible in dark themes.

Customization

To create your own brand theme:

  1. Choose your primary accent color in HSL
  2. Set appropriate chroma and lightness values
  3. Define hue shifts for secondary/tertiary colors
  4. Test in both light and dark modes
  5. Add dark mode adjustments if needed

Browser Support

  • Data attributes work in all browsers
  • CSS custom properties work in all modern browsers
  • prefers-color-scheme works in modern browsers with fallback

Integration Notes

  • Import this file after core/palette.css to override defaults
  • Combine with themes/theme-packs.css for additional theme variations
  • Use with core/theme.css for component-specific theming
  • core/palette.css: Core color generation system
  • themes/theme-packs.css: Additional theme variations
  • core/theme.css: Component theme overrides