# New theme

> Add or customise a theme preset in a ZeroDirs directory site. Covers the three-part registration (preset CSS file, @import in global.css, entry in src/config…

You are reading one page of the ZeroDirs documentation. ZeroDirs is a paid Astro + Cloudflare Workers starter for directory sites: every page is rendered to static HTML at build time, the site ships no client JavaScript outside `/search/`, and one file — `site.config.ts` — carries roughly 80% of the customisation.

Two things to hold on to before you act on anything below:

- `site.config.ts` is validated by a zod schema with ten cross-field rules. After any edit to it, run `pnpm check:config`; every problem is reported as `site.config.ts › <path>: <message>` and the whole file is checked at once.
- The repository ships its own `AGENTS.md` with twenty hard rules, and a machine-checked test suite behind them. If you are working inside a ZeroDirs project, read that file first — it overrides anything general you infer from this page.

Source: https://zerodirs.com/docs/agents/recipes/new-theme/

---

<!-- DO NOT EDIT — generated from zerodirs/zerodirs .agents/skills/ by .github/docs/generate.ts (docs-sync.yml). Edit the source, not this page. -->

`.agents/skills/new-theme/SKILL.md` — 104 lines of instruction that ship inside the starter. This page is generated from it, so it says what the skill does without republishing it.

## When an agent picks this up

The skill description, verbatim — this is the text an agent matches your request against:

> Add or customise a theme preset in a ZeroDirs directory site. Covers the three-part registration (preset CSS file, @import in global.css, entry in src/config/presets.ts with OG hex colours) and the lighter-weight theme.tokens override path. Use when asked to change brand colours, corner radius, fonts, or to add a new colour scheme.

## What it walks through

1. Path A — override tokens (no new files)
1. Path B — add a preset (three files, all required)
   - `src/styles/presets/<name>.css`
   - One `@import` in `src/styles/global.css`
   - One entry in `PRESETS` in `src/config/presets.ts`
1. Fonts
1. Verify

## Commands it runs

```sh
pnpm check
pnpm test                       # tests/unit/theme.test.ts checks the registration triple
pnpm build
pnpm og:default                 # regenerate public/og-default.png with the new colours
pnpm og:default --check
```

## Files it touches

`site.config.ts` · `src/layouts/Base.astro` · `src/styles/global.css` · `src/config/schema.ts` · `src/styles/presets/warm.css` · `tests/unit/theme.test.ts` · `src/config/presets.ts`

## Using it

Skills load themselves — you describe the outcome, not the skill. "Add a Compliance category with an icon and seed it" is enough for an agent that can see `.agents/skills/`; Claude Code reads `.claude/skills/`, which `pnpm skills:sync` mirrors from `.agents/` on every install. See [Working with an agent](https://zerodirs.com/docs/agents/overview/).