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.
Main background color
Main text color
Card and component background
Border color
Primary accent color
Secondary accent color
Tertiary accent color
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);
}