Design & themes

Customizing your design takes just two files, placed in your project's .moss/theme/ directory (moss creates it automatically when you open a folder):

my-site/
├── .moss/
│   └── theme/
│       ├── style.css   ← custom CSS
│       └── script.js   ← custom JS
├── index.md
└── ...

moss loads both files automatically: style.css overrides the default theme without any !important, and script.js runs after all built-in scripts.

Adjust the look with variables

moss's styles are built on a set of --moss-* CSS variables. Override a few and the whole look changes:

:root {
  --moss-color-accent: #2d5a2d;      /* links and accent color */
  --moss-font-body: "Inter", sans-serif;
  --moss-content-width: 72ch;        /* max body width */
}

Dark mode takes just one selector — moss already funnels the system preference and the manual toggle into data-theme:

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

Run the command-line tool moss describe --json to list every variable with its light and dark defaults.

Fine-tune individual components

Every component moss generates has a stable .moss-* class name you can target directly in style.css — for example .moss-grid-card, .moss-collection-card, .callout. You can also attach a custom class to a shortcode: :::grid 3 {.profiles}, then write .profiles .moss-grid-card { … }.

Other assets

You can also put other media files in .moss/theme/ for script.js and style.css to reference. For example, drop a .woff2 into .moss/theme/fonts/ and reference it in style.css with @font-face { src: url('fonts/myfont.woff2') }.

Going deeper

For the full CSS variable table, component class names, data attributes and DOM structure, see Write a theme, CSS tokens and Components.

Published with moss