Theming

The widget ships with a set of built-in theme presets. The active theme can be set via the dashboard, via a data-theme attribute on the container element, or driven dynamically from your page.

Setting a theme

Via the container element — set data-theme on the widget’s container element:

<div
  data-quipthread
  data-site-id="YOUR_SITE_ID"
  data-page-id="YOUR_PAGE_ID"
  data-theme="dark"
></div>

Via the dashboard — open Sites, select Configure, then choose your site and theme in the preview. The widget uses the saved setting on load.

Priority order:

data-theme on the container element (non-auto value)
Theme set in the dashboard for the site
auto (system preference)

The `auto` theme

When data-theme is auto or omitted, the widget follows the site’s dashboard setting. If that setting is also automatic, it follows the reader’s system light or dark preference.

Dynamic theme switching

The widget watches the container element for data-theme attribute changes using a MutationObserver. When the attribute changes, the widget updates its appearance immediately — no reload required.

// Toggle theme from your own page code
const container = document.querySelector('[data-quipthread]')
container.dataset.theme = 'dark'

Setting data-theme back to auto (or removing it) causes the widget to fall back to the dashboard-configured theme.

Custom colors and fonts

To adjust a preset rather than replace it, add data-qt-* attributes to the container. Each one sets a single CSS variable on top of the active theme:

Attribute	Sets
`data-qt-accent`	Accent color for buttons and links
`data-qt-accent-hover`	Accent color on hover
`data-qt-bg`	Background
`data-qt-bg-alt`	Secondary background, used for hover states, code blocks, and avatar placeholders
`data-qt-text`	Main text color
`data-qt-text-muted`	Secondary text color
`data-qt-border`	Border color
`data-qt-radius`	Default corner radius
`data-qt-radius-sm`	Small corner radius
`data-qt-radius-lg`	Large corner radius
`data-qt-font`	Font family

<div
  data-quipthread
  data-site-id="YOUR_SITE_ID"
  data-page-id="YOUR_PAGE_ID"
  data-qt-accent="#c06020"
  data-qt-font="Georgia, serif"
></div>

When mounting from JavaScript, pass the same values as vars, for example { accent: '#c06020', font: 'Georgia, serif' }.

Available presets

Name	Description
`auto`	Follows system `prefers-color-scheme`; light by default, dark when the system is in dark mode
`light`	Default light appearance (warm off-white background, amber accent)
`dark`	Default dark appearance (near-black background, amber accent)
`catppuccin-latte`	Catppuccin Latte — light pastel theme with blue accent
`catppuccin-frappe`	Catppuccin Frappé — cool medium-dark theme with lavender accent
`catppuccin-macchiato`	Catppuccin Macchiato — darker cool theme with blue accent
`catppuccin-mocha`	Catppuccin Mocha — darkest Catppuccin variant with blue accent
`dracula`	Dracula — dark purple/grey theme with purple accent
`nord`	Nord — cool arctic dark theme with teal accent
`gruvbox-light`	Gruvbox Light — warm retro light theme with orange accent
`gruvbox-dark`	Gruvbox Dark — warm retro dark theme with yellow accent
`tokyo-night`	Tokyo Night — deep blue-dark theme with blue accent
`rose-pine`	Rosé Pine — dark purple-tinted theme with mauve accent
`rose-pine-dawn`	Rosé Pine Dawn — soft warm light theme with purple accent
`solarized-light`	Solarized Light — classic cream light theme with blue accent
`solarized-dark`	Solarized Dark — classic teal-dark theme with blue accent
`one-dark`	One Dark — Atom-style dark grey theme with blue accent