Theming

Overview

Theming lets you change colors, typography, spacing, and other design decisions without editing the design system itself. Use design tokens and custom properties (CSS variables) to keep your site consistent while matching your brand.

Related guides: CSS variables (how to override variables) and Custom components (how to build your own components with the system).

How to theme your project

1. Add the design system — Install and include the EthioWDS stylesheet (see Installation).
2. Override variables — In your own stylesheet, set custom properties (e.g. --primary, --ethio-gray-900) on :root or a wrapper so the design system uses your values. See CSS variables for a list and examples.
3. Optional: build custom components — Use design system class names and tokens to build new components that stay on-brand. See Custom components.

Design tokens and variables

Override default design tokens—such as primary and secondary colors, typography, and spacing—in your project. Set your brand colors and font choices so that components and utilities use them consistently. The design system exposes these as custom properties you can override; details are in CSS variables.

Custom properties (runtime theming)

EthioWDS uses custom properties for colors, spacing, and typography. Override them in your styles to change the look without recompiling. That’s useful for user preferences, multiple themes, or dark mode. See CSS variables for how to do it.

Theme examples