CSS variables

EthioWDS exposes design tokens as custom properties (CSS variables). Override them in your project to theme your site without changing the design system files.

What are CSS variables?

Custom properties (often called CSS variables) are values you define once and reuse—for example --primary: #078930;. The design system uses them for colors, spacing, typography, and more. When you override these variables, every component that uses them picks up your values.

How to override variables

Add a stylesheet that loads after the design system (or place your overrides in your main styles). Target :root to apply globally, or a wrapper class for a section or theme.

Global overrides

Apply your theme to the whole page:

:root {
  --primary: #078930;
  --secondary: #ff6b6b;
  --ethio-green: #1B5E20;
  --ethio-yellow: #FFC107;
  --ethio-red: #C2185B;
  --ethio-blue: #1976D2;
  --font-family-sans: 'Inter', 'Noto Sans Ethiopic', sans-serif;
}

Scoped overrides (e.g. one section or dark theme)

Override only inside a wrapper:

.my-theme-wrapper {
  --primary: #2E86AB;
  --ethio-gray-900: #0f172a;
}

.dark-theme {
  --primary: #38bdf8;
  --ethio-gray-50: #0f172a;
  --ethio-gray-900: #f8fafc;
}

Common variables

Variables you can override for theming:

Colors

--primary — Primary brand color (buttons, links, focus)
--secondary — Secondary color
--ethio-green, --ethio-yellow, --ethio-red, --ethio-blue — Palette colors
--ethio-gray-50 through --ethio-gray-900 — Neutrals for backgrounds, borders, text

Typography

--font-family-sans — Default sans-serif stack (include Noto Sans Ethiopic for Amharic)
--font-size-base — Base font size

Spacing and layout

Use the design system spacing scale (e.g. spacing-1, spacing-2) if your build exposes them as variables; otherwise rely on the utilities and components. See Spacing and Design tokens.

Step-by-step: theme your site

Install EthioWDS and add its stylesheet (see Installation).
Create or open your own stylesheet that loads after the design system.
Add a :root (or wrapper) block and set the variables you want to change (e.g. --primary, --ethio-gray-900).
Save and reload; buttons, links, and other components that use those variables will use your values.