CSS

Custom stylesheet

Create style.css in your project root. moss loads it after the default theme, so your rules override the defaults.

:root {
  --moss-color-accent: #2d5a2d;
  --moss-font-body: "Inter", -apple-system, sans-serif;
  --moss-content-width: 72ch;
}

No build step, no config entry. The file is loaded automatically.

Variables

Typography

Colors

Layout

Spacing

Dark mode

Dark mode follows the system preference automatically. Target the dark mode selector to customize:

[data-theme="dark"] {
  --moss-color-bg: #0f0f0f;
  --moss-color-accent: #6abf6a;
}

Component classes

Auto-generated components use stable .moss-* class names. Target these in your style.css.

Collection grid

Child summary

Article list

Shortcode classes

Add custom classes to shortcode blocks with {.class} syntax:

:::grid 3 {.profiles .featured}
...
:::

Then target them in CSS:

.profiles .moss-grid-card {
  border-radius: 50%;
}