Colors

Theme Variables

lotte css uses CSS variables to define colors across themes that automatically adapt based on user preference or manual theme selection.

Base Colors

Background

var(--color-background)

Foreground

var(--color-foreground)

Surface

var(--color-surface)

Border

var(--color-border)

:root {
  --color-background: #ffffff;
  --color-foreground: #212529;
  --color-surface: #f6f6f6;
  --color-border: #cccccc;
}

@media (prefers-color-scheme: dark), html[data-theme='dark'] {
  :root {
    --color-background: #121212;
    --color-foreground: #ffffff;
    --color-surface: #1e1e1e;
    --color-border: #ffffff;
  }
}

Accent Colors

Accent & Status Colors

Accent

var(--color-accent)

Info

var(--color-info)

Success

var(--color-success)

Warning

var(--color-warning)

Error

var(--color-error)

:root {
  --color-accent: #FFEFF8;
  --color-info: #79bce8;
  --color-success: #59c07d;
  --color-warning: #ffd24d;
  --color-error: #f26c6c;
}

Color Opacity

Opacity Classes

100%

.opacity-100

80%

.opacity-80

60%

.opacity-60

40%

.opacity-40

20%

.opacity-20

/* Opacity/Transparency */
.opacity-100 {
  opacity: 1;
}

.opacity-80 {
  opacity: 0.8;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-20 {
  opacity: 0.2;
}

Theme Implementation

Automatic Dark Mode

lotte css automatically adapts to the user's preferred color scheme using prefers-color-scheme media query. You can also manually set the theme using the data-theme attribute on the html element.

<!-- Follow system preference -->
<html>

<!-- Force light theme -->
<html data-theme="light">

<!-- Force dark theme -->
<html data-theme="dark">

Using Theme Variables

Use CSS variables in your custom components to ensure they adapt to theme changes automatically:

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