Theming

Color mode

Set data-theme="light" or data-theme="dark" on any element. With no attribute on the page, dark follows the system setting.

<html data-theme="dark">

With next-themes, use the attribute mode:

<ThemeProvider attribute="data-theme" defaultTheme="system" enableSystem>

Corner shape

Set data-shape to rounded, soft or square. Every corner in the library comes from one scale, so one attribute recuts all of them. Dots, such as a radio's indicator, stay round in every shape, because there roundness carries meaning.

'use client';

import { Button } from '@snapshot-ui/react';
import type { ReactElement } from 'react';

const SHAPES = ['rounded', 'soft', 'square'] as const;

export default function ThemeShapes(): ReactElement {
  return (
    <div className="shape-samples">
      {SHAPES.map((shape) => (
        <div key={shape} className="shape-sample" data-shape={shape}>
          <p className="eyebrow">{shape}</p>
          <div className="row">
            <Button>Book a visit</Button>
          </div>
          <div className="card" style={{ padding: 20 }}>
            A card, cut {shape}.
          </div>
        </div>
      ))}
    </div>
  );
}

Nesting

Both attributes work on any element, and the nearest one wins. A light card inside a dark page takes its own colors and its own text color.

<main data-theme="dark">
<section data-theme="light" data-shape="square">...</section>
</main>

Tokens

Every value is a CSS variable you can read, such as var(--color-ink), var(--radius-control) or var(--spacing-peer). The same tokens are available in JavaScript, with each mode's value:

import { tokens } from '@snapshot-ui/core/tokens';

tokens.color.slate.var; // 'var(--color-slate)'
tokens.radius.pill.modes.shape.soft; // '12px'