Tokens

Venator ships two token systems — Obsidian and Slate — each with a dark and light variant. The active theme is set via a data-theme attribute on the root element.

Token systems

Venator provides two independent palettes:

Obsidian — dark-first, high contrast, monochromatic accent (#ffffff / #000000). Default when no data-theme is set.
Slate — softer dark with an indigo accent (#6366f1). Better suited for productivity or data-heavy interfaces.

Usage

The venatorUIPreset injects all CSS variables via addBase when Tailwind processes your config. To activate a theme, set the data-theme attribute on your root element:

index.html

<!-- Obsidian Dark (default) -->
<html>

<!-- Obsidian Light -->
<html data-theme="light">

<!-- Slate Dark -->
<html data-theme="slate-dark">

<!-- Slate Light -->
<html data-theme="slate-light">

Or from JS/React:

theme.ts

document.documentElement.setAttribute('data-theme', 'slate-dark');

The venatorUIPreset must be in your Tailwind config for themes to work — see Installation for setup instructions.

Token reference

All themes expose the same semantic variables:

| Token | Role | |---|---| | --bg / --bg-1 / --bg-2 / --bg-3 | Surface layers | | --fg / --fg-2 / --fg-3 / --fg-4 / --fg-5 | Text hierarchy | | --accent / --accent-ink | Primary action color + contrast text | | --success / --warn / --danger / --info | Semantic states | | --border-subtle / --border-default / --border-strong | Border hierarchy | | --info-bg / --success-bg / --warn-bg / --danger-bg | State backgrounds |

When to use each

Use Obsidian for dark-first products, developer tools, and interfaces where the monochromatic accent fits your brand. Use Slate when you want a softer dark with a coloured accent, or when building productivity and data-heavy interfaces like dashboards or workout trackers.