Colors

Theme Variables

lotte css uses CSS variables to define colors across themes. These variables automatically adapt based on user preference or can be manually set.

--color-background

Main background color

--color-foreground

Main text color

--color-surface

Card and component background

--color-border

Border color

--color-primary

Primary accent color

--color-secondary

Secondary accent color

--color-tertiary

Tertiary accent color

--color-accent

Highlight accent color

Text Colors

This is the default text color

This is primary text color

This is secondary text color

This is tertiary text color

This is accent text color

This is info text color

This is success text color

This is warning text color

This is error text color

Background Colors

Default Background

Surface Background

Primary Background

Secondary Background

Tertiary Background

Accent Background

Info Background

Success Background

Warning Background

Error Background

Color Opacity/Transparency

100% Opacity

80% Opacity

60% Opacity

40% Opacity

20% Opacity

Color Gradients

Linear Gradient (Horizontal)

Linear Gradient (Vertical)

Linear Gradient (Diagonal)

Radial Gradient

Conic Gradient

Color Contrast Examples

Good text contrast

Poor text contrast (avoid this)

Sufficient contrast for large text

Theme Implementation

lotte css automatically adapts to the user's preferred color scheme using the prefers-color-scheme media query. You can also manually set the theme by adding a class to the <html> element:

<html class="theme-light"> // Forces light theme
<html class="theme-dark">  // Forces dark theme
<html>               // Follows system preference

Using Theme Variables

Use the CSS variables in your custom components:

.my-component {
  background-color: var(--color-surface);
  color: var(--color-foreground);
  border: 1px solid var(--color-border);
}