theme.css
Colors
Design tokens from the Stockholm theme. Toggle dark mode in the header to see how each token adapts. Use these tokens in Tailwind (e.g. bg-primary) or in CSS via the variable names.
Base
Background and text used for the main surface.
background
--background
foreground
--foreground
Card & popover
Elevated surfaces for cards and popovers.
card
--card
card-foreground
--card-foreground
popover
--popover
popover-foreground
--popover-foreground
Primary
Primary actions and emphasis.
primary
--primary
primary-foreground
--primary-foreground
Accent
Hover and accent states.
accent
--accent
accent-foreground
--accent-foreground
Destructive
Destructive actions and errors. Text is always off-white (#f8f8f8).
destructive
--destructive
destructive-foreground
--destructive-foreground
Blue
Alternative color for link buttons, charts, and emphasis.
blue
--blue
blue-foreground
--blue-foreground
Orange
Alternate color (same as chart-2) for buttons, charts, and emphasis.
orange
--orange
orange-foreground
--orange-foreground
Borders & inputs
Borders, form inputs, and focus ring.
border
--border
input
--input
ring
--ring
Charts
Chart series colors (chart-1 to chart-5).
chart-1
--chart-1
chart-2
--chart-2
chart-3
--chart-3
chart-4
--chart-4
chart-5
--chart-5
Sidebar
Sidebar surface and states.
--sidebar
--sidebar-foreground
--sidebar-primary
--sidebar-primary-foreground
--sidebar-accent
--sidebar-accent-foreground
--sidebar-border
--sidebar-ring