Step 3: Theme & design tokens
Now you'll give the site your own colours by changing a few tokens.
Before you start
- Step 2 finished
- Two or three brand colours (hex values)
Do it
Type each command on its own and wait for it to finish before the next one.
Open site/.vitepress/theme/tokens.css and change these values:
css
--brand-1: #e2550f; /* links */
--brand-2: #ff6a1f; /* buttons */
--accent: #7c5cff; /* highlights */Replace site/public/logo.svg with your own logo. Keep it an SVG.
Looking for ideas? Browse 21st.dev for colour, layout and component inspiration. Use it as a reference; keep your own tokens as the source of truth.
Save, then switch between light and dark mode in the header.
Result
Links, buttons and cards use your colours in both modes.
