Skip to main content
guest@portfolio:~/posts/Customization/Look and Feel

Custom CSS

1 min read
#css #appearance

Create assets/css/custom.css in your site. Nerdy loads it after the main stylesheet.

Prefer token overrides instead of editing theme files:

:root {
  --background: oklch(0.985 0.006 255);
  --foreground: oklch(0.21 0.035 260);
  --surface: oklch(0.965 0.012 255);
  --accent-cyan: oklch(0.47 0.105 224);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --surface: oklch(0.155 0.045 265.08);
  --accent-cyan: oklch(0.865 0.127 207.078);
}

Supported tokens include:

  • --background, --foreground, --muted, --muted-foreground
  • --primary, --primary-foreground, --border
  • --card, --card-foreground
  • --surface, --surface-muted, --surface-elevated
  • --accent-cyan, --accent-purple, --accent-emerald, --accent-amber

Start with a few accent colors first. It is easier to keep the design consistent when most tokens stay close to the default palette.