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

# otter-theme

> Semantic theme tokens, spacing, presets, and theme.conf loading.

`otter-theme` is how Otter Shell looks: semantic colors, bar chrome, popup styles, spacing, fonts, surface roles. Plain data structs; the theme module itself does no I/O.

Load `~/.config/otter-shell/theme.conf` with `loadTheme` and pass `Theme` into `otter-ui` `FrameOptions`.

## Quick example

```zig theme={null}
const otter_theme = @import("otter_theme");

const theme = otter_theme.loadTheme(allocator);
const accent = theme.colors.accent;
const bar_h = theme.bar.height;
```

Color resolution at runtime: widget config field, then theme token, then the struct default (`?Color = null`).

## Documentation map

<CardGroup cols={2}>
  <Card title="Tokens" icon="palette" href="/developers/libraries/otter-theme/tokens">
    Colors, bar, popup, spacing, fonts, surfaces, density.
  </Card>

  <Card title="Presets and loading" icon="swatchbook" href="/developers/libraries/otter-theme/presets-and-loading">
    12 bundled presets, `theme.conf`, hot-reload paths.
  </Card>
</CardGroup>

## Dependencies

`otter-geo`, `otter-render`, `otter-conf`, `otter-utils`.