> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bytesell.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Styling

> Stylesheet location, accent colours, and fonts.

## The stylesheet

Compile to a path inside the theme root, and commit the output:

```json package.json theme={null}
{
  "scripts": {
    "build:css": "tailwindcss -i styles/app.css -o site/css/theme.css --minify"
  }
}
```

The compiled stylesheet is a committed artifact. The published bundle is the
theme root, so a stylesheet produced only by a local build step is absent from
the bundle.

Publishing rejects a bundle whose templates link a root-relative stylesheet it
does not contain:

```
layouts/shell.slurp links stylesheet "/css/theme.css" but no "css/theme.css" is
in the bundle (run the theme CSS build, e.g. `npm run build:css`, before
publishing)
```

Without the check, the theme publishes and every store using it renders
unstyled HTML.

<Note>
  Only literal root-relative `href` values ending in `.css` are verified. A CDN
  link or an `href` containing `${ }` is not checked.
</Note>

`slurp gitignore` writes a `.gitignore` for a theme, including the files that
must not be ignored.

## Accent colours

An accent is a `color` setting applied as CSS custom properties.

Store RGB channels, not hex:

```css theme={null}
:root { --accent: 99 102 241; }
.btn { background: rgb(var(--accent)); }
.btn-ghost { background: rgb(var(--accent) / 0.1); }
```

<Warning>
  A hex value satisfies the first rule and produces invalid CSS in the second.
  Every opacity modifier breaks, with no error reported.
</Warning>

Define `window.__bsApplyAccent(name)` to let the builder recolour the preview
live. Without it, a merchant's colour change is not visible until reload. See
[The builder](/themes/builder).

## Fonts

Request fonts through the platform, which serves them from the store's own
origin:

```slurp theme={null}
<link rel="stylesheet" href="${ platform.fonts_css }?family=inter:400,500,700" />
```

<Warning>
  Do not link a font CDN. Doing so sends the buyer's IP address to a third
  party, which the merchant cannot consent to on the buyer's behalf.
</Warning>

Families are restricted to an allowlist. Unlisted families and weights are
ignored rather than approximated. See
[Platform assets](/themes/reference/platform).

## Dark mode

Dark mode is entirely the theme's responsibility. A theme can be dark-only,
light-only, or provide a toggle backed by its own Alpine store.

## Static assets

Any non-template file in the bundle is served as a static file. Assets
referenced from a marketplace listing resolve to content-addressed URLs with a
one-year immutable cache, so a changed file produces a changed URL.

Merchant-uploaded images are not theme assets. They come through the media
pipeline and arrive in settings as URLs.