ForgeJo

Theming

PreviousNext

Using CSS Variables and color utilities for theming.

Convention

We use a simple background and foreground convention for colors. The background variable is used for the background color of the component and the foreground variable is used for the text color.

Given the following CSS variables:

--primary: oklch(0.64 0.12 250);
--primary-foreground: oklch(0.985 0.003 95);

The background color of the following component will be var(--primary) and the foreground color will be var(--primary-foreground).

<div className="bg-primary text-primary-foreground">Hello</div>

List of variables

Here are the color variables shipped in @cosm/ui/style.css. Override them in your app/globals.css to customize the theme:

app/globals.css
:root {
  --radius: 0.625rem;
 
  --background: oklch(0.965 0.003 95);
  --foreground: oklch(0.11 0 0);
  --card: oklch(0.965 0.003 95);
  --card-foreground: oklch(0.11 0 0);
  --popover: oklch(0.965 0.003 95);
  --popover-foreground: oklch(0.11 0 0);
 
  --primary: oklch(0.64 0.12 250);
  --primary-foreground: oklch(0.985 0.003 95);
  --primary-background: oklch(0.8516 0.0521 232.23);
 
  --secondary: oklch(0.91 0.003 95);
  --secondary-foreground: oklch(0.24 0 0);
 
  --muted: oklch(0.87 0.005 95);
  --muted-foreground: oklch(0.51 0 0);
  --accent: oklch(91% 0.03 250);
  --accent-foreground: oklch(0.385 0 0);
 
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.97 0.01 17);
 
  --border: oklch(0.87 0.005 95);
  --input: oklch(0.91 0.003 95);
  --ring: oklch(0.64 0.12 250);
 
  --chart-1: oklch(0.64 0.12 250);
  --chart-2: oklch(0.85 0.05 240);
  --chart-3: oklch(0.70 0.10 250);
  --chart-4: oklch(0.22 0.04 250);
  --chart-5: oklch(0.55 0.08 250);
 
  --sidebar: oklch(0.965 0.003 95);
  --sidebar-foreground: oklch(0.11 0 0);
  --sidebar-primary: oklch(0.64 0.12 250);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.87 0.005 95);
  --sidebar-accent-foreground: oklch(0.24 0 0);
  --sidebar-border: oklch(0.87 0.005 95);
  --sidebar-ring: oklch(0.64 0.12 250);
 
  --surface: oklch(0.91 0.003 95);
  --surface-foreground: oklch(0.11 0 0);
 
  --code: oklch(0.92 0.005 95);
  --code-foreground: oklch(0.25 0 0);
  --code-highlight: oklch(0.96 0.003 95);
  --code-number: oklch(0.55 0 0);
 
  --selection: oklch(0.64 0.12 250);
  --selection-foreground: oklch(0.985 0 0);
}
 
.dark {
  --background: oklch(0.11 0 0);
  --foreground: oklch(0.965 0.003 95);
  --card: oklch(0.17 0 0);
  --card-foreground: oklch(0.965 0.003 95);
  --popover: oklch(0.17 0 0);
  --popover-foreground: oklch(0.965 0.003 95);
 
  --primary: oklch(0.70 0.12 250);
  --primary-foreground: oklch(0.11 0 0);
  --primary-background: oklch(0.15 0.02 250);
 
  --secondary: oklch(0.24 0 0);
  --secondary-foreground: oklch(0.965 0.003 95);
 
  --muted: oklch(0.20 0 0);
  --muted-foreground: oklch(0.60 0 0);
  --accent: oklch(0.28 0 0);
  --accent-foreground: oklch(0.965 0.003 95);
 
  --destructive: oklch(0.65 0.20 25);
  --destructive-foreground: oklch(0.97 0.01 17);
 
  --border: oklch(0.24 0 0);
  --input: oklch(0.20 0 0);
  --ring: oklch(0.70 0.12 250);
 
  --chart-1: oklch(0.70 0.12 250);
  --chart-2: oklch(0.85 0.08 240);
  --chart-3: oklch(0.75 0.10 250);
  --chart-4: oklch(0.60 0.08 250);
  --chart-5: oklch(0.80 0.06 240);
 
  --sidebar: oklch(0.17 0 0);
  --sidebar-foreground: oklch(0.965 0.003 95);
  --sidebar-primary: oklch(0.70 0.12 250);
  --sidebar-primary-foreground: oklch(0.11 0 0);
  --sidebar-accent: oklch(0.24 0 0);
  --sidebar-accent-foreground: oklch(0.965 0.003 95);
  --sidebar-border: oklch(0.24 0 0);
  --sidebar-ring: oklch(0.50 0.10 250);
 
  --surface: oklch(0.17 0 0);
  --surface-foreground: oklch(0.965 0.003 95);
 
  --code: oklch(0.18 0.01 250);
  --code-foreground: oklch(0.92 0.01 240);
  --code-highlight: oklch(0.24 0.015 250);
  --code-number: oklch(0.60 0 0);
 
  --selection: oklch(0.70 0.12 250);
  --selection-foreground: oklch(0.11 0 0);
}

Adding new colors

To add new colors, you need to add them to your CSS file under the :root and dark pseudo-classes. Then, use the @theme inline directive to make the colors available as CSS variables.

app/globals.css
:root {
  --warning: oklch(0.84 0.16 84);
  --warning-foreground: oklch(0.28 0.07 46);
}
 
.dark {
  --warning: oklch(0.41 0.11 46);
  --warning-foreground: oklch(0.99 0.02 95);
}
 
@theme inline {
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
}

You can now use the warning utility class in your components.

<div className="bg-warning text-warning-foreground" />