---
title: "Themes"
description: "Change shared CSS values to give every page a consistent appearance."
url: "https://domain-fixture.dev-published.dev/docs/themes.md"
section: "Docs"
---

> Breadcrumbs: Docs > Themes
> Sitemap: https://domain-fixture.dev-published.dev/docs/sitemap.md
> LLMS index: https://domain-fixture.dev-published.dev/docs/llms.txt

# Themes

The theme gives your content a common appearance. The `publish.os/theme.css` file defines shared values for colors, spacing, and page width.

You can define only a base radius and an accent color. You can also change each token to match your brand.

You can also write custom CSS or create custom components.

## Configure the basic theme

### Radii

In `publish.os/theme.css`, set the base radius:

```css
--theme-radius: var(--theme-radius-md);
```

Replace `--theme-radius-md` with `--theme-radius-lg`. Save the file. The preview now uses larger corner radii.

You can use `xs`, `sm`, `md`, `lg`, `xl`, or `none`. You can also use a custom value such as `5px`.

### Color palette

The neutral color palette changes the complete design system. Define the palette with a neutral scale.

Keep every palette color opaque, including subtle surfaces. Hover, active, and stroke tokens use transparency so controls adapt to the surface beneath them.

```css
--gray-100: #fcfcfc;
--gray-200: #f9f9f9;
--gray-300: #f3f3f3;
--gray-400: #f0f0f0;
--gray-500: #e0e0e0;
--gray-600: #c6c6c6;
--gray-700: #999999;
--gray-800: #737373;
--gray-900: #5d5d5d;
--gray-1000: #464646;
--gray-1100: #2e2e2e;
--gray-1200: #171717;

--neutral-100: var(--gray-100);
--neutral-200: var(--gray-200);
--neutral-300: var(--gray-300);
--neutral-400: var(--gray-400);
--neutral-500: var(--gray-500);
--neutral-600: var(--gray-600);
--neutral-700: var(--gray-700);
--neutral-800: var(--gray-800);
--neutral-900: var(--gray-900);
--neutral-1000: var(--gray-1000);
--neutral-1100: var(--gray-1100);
--neutral-1200: var(--gray-1200);
```

Set the accent to your brand color or a color from the palette:

```css
--accent: #ed940f;
```

For layered controls, keep page and popup surfaces opaque. Derive hover, pressed, and border colors from a foreground or accent with transparency. The default theme does this with `color-mix()`, so the same control works on both light and dark surfaces. Keep text and solid button fills opaque for contrast.

## Continue reading
- Previous: [Groups](https://domain-fixture.dev-published.dev/docs/groups.md)

## Section links
- [Docs home](https://domain-fixture.dev-published.dev/docs)
- [LLMS index](https://domain-fixture.dev-published.dev/docs/llms.txt)
- [Sitemap](https://domain-fixture.dev-published.dev/docs/sitemap.md)