Theme CSS

When you are ready to match your company's branding, use config/styles/theme.css. A single color change here gets you most of the way to a site that feels like your own.

Open the theme file

Theme CSS lives here:

config/styles/theme.css

The starter project includes this file. In the Ring of Power example, it looks like this:

:root {
  --accent: #D64518;
}

Change the accent color

Replace the value of --accent with your brand color:

:root {
  --accent: #2563eb;
}

Save the file. If your local server is running, refresh the browser to see the change.

Set a different accent for dark mode

If your brand color does not have enough contrast on a dark background, override --accent again inside a .dark selector:

:root {
  --accent: #2563eb;
}

.dark {
  --accent: #60a5fa;
}

Mordoc adds the dark class to the page when the reader switches to dark mode, so this second value only applies there. The :root value covers light mode as before.

How the accent color spreads through the site

--accent is the one color Mordoc asks you to set. Every other accent shade on the site, such as the lighter tint behind an active navigation item or the darker shade a button turns on hover, is calculated automatically from that single value.

This means changing --accent updates links, buttons, active navigation states, card tags, and similar details across the whole site at once. Each mode recalculates its shades from whichever --accent is active for that mode, so light and dark mode stay consistent even if you've set them to different colors. You do not need to hunt down and set each one by hand.

Next step

• Set a font family.