Themes

Side by side

How themes work

Base is brand-neutral: a real gray, the system font, a near-black accent. It’s complete on its own, so a new project looks finished before it has a brand. Everything on this site outside the portfolio panel above is base.

A brand overrides semantic tokens and nothing else, in a file loaded after base. Components never know which brand is active. The portfolio brand ships in the package as a working example: copy portfolio-light.css and portfolio-dark.css into your project, rename them, and change the values.

// Base, built in: every project loads these two.
import '@amezquita/design-system/styles/brands/base-light.css'
import '@amezquita/design-system/styles/brands/base-dark.css'

// A brand, loaded after base. Only the tokens it changes are in it.
import './brand-light.css'
import './brand-dark.css'

/* brand-light.css — a file you own, copied from portfolio-light.css */
:root, [data-mode="light"] {
  --color-accent-default: #15616d;
  --color-accent-hover: #0f4750;
  --font-family-base: 'Your Font', sans-serif;
}

portfolio-light.css and portfolio-dark.css set their tokens on :root, so they restyle the whole page. To show a brand in one part of a page, as this page does, load portfolio-scoped.css instead of those two and put data-brand="portfolio" on the part. It follows the page’s data-mode, or its own.

import '@amezquita/design-system/styles/brands/base-light.css'
import '@amezquita/design-system/styles/brands/base-dark.css'
import '@amezquita/design-system/styles/brands/portfolio-scoped.css'

<div data-brand="portfolio">…</div>

What the portfolio changes

What the portfolio adds