# weirsoe-theme

A tiny, framework-agnostic dark/light **design system** — the look from
[asger.weirsøe.dk](https://asger.weirsøe.dk), extracted so it can be reused
across sites.

- **Card-based**, deep-navy surfaces with a subtle blue/indigo glow.
- **Three palettes**: `dark` (default), `light`, `terminal` (green CRT).
- **Pure CSS**, **system fonts** by default → great TTFB, **no external
  requests, no trackers, no build step**.
- Use the **CSS variables** directly, the **`.wt-*` components**, or the
  **Bulma adapter** to theme an existing Bulma site without touching markup.

## Files

| File | What |
|---|---|
| `weirsoe-theme.css` | Tokens (`--color-*`) + base (glow, selection, transitions) + `.wt-card/.wt-btn/.wt-input/.wt-tag` + `.prose` + theme-toggle styles |
| `weirsoe-theme.js` | Persisted dark⇄light toggle + a no-flash snippet |
| `adapters/bulma.css` | Maps Bulma classes → tokens (for Bulma sites) |
| `examples/demo.html` | Standalone preview |

## Quick start (vanilla)

```html
<head>
  <!-- no-flash: set the theme before the stylesheet paints -->
  <script>try{document.documentElement.dataset.theme=localStorage.getItem('wt-theme')||'dark'}catch(e){document.documentElement.dataset.theme='dark'}</script>
  <link rel="stylesheet" href="/weirsoe-theme.css">
  <script defer src="/weirsoe-theme.js"></script>
</head>
<body>
  <div class="wt-card wt-card--hover">
    <h2>Et kort</h2>
    <p class="wt-muted">Med weirsoe-theme.</p>
    <button class="wt-btn wt-btn--primary">Knap</button>
  </div>
</body>
```

## Theming an existing Bulma site

Load the adapter **after** Bulma and **after** `weirsoe-theme.css`:

```html
<link rel="stylesheet" href="/bulma.min.css">
<link rel="stylesheet" href="/weirsoe-theme.css">       <!-- tokens + base -->
<link rel="stylesheet" href="/adapters/bulma.css">      <!-- maps Bulma → tokens -->
```

Your existing `.box`, `.button`, `.input`, `.tag`, `.navbar`… are now dark and
card-styled. `wish.weircon.dk` (Christmas-Community fork) consumes it this way.

## Tokens

`--color-bg --color-surface --color-surface-2 --color-surface-3 --color-border
--color-text --color-muted --color-accent --color-accent-2 --color-accent-ink
--color-good --color-bad`, plus `--wt-radius --wt-radius-sm --wt-shadow
--wt-shadow-hover --wt-font-sans --wt-font-mono`.

Override any of them in your own `:root` to re-skin without forking.

## Theme switching

Set `data-theme` on `<html>`: `dark` (default), `light`, or `terminal`.
`weirsoe-theme.js` wires any `[data-theme-toggle]` button to cycle dark⇄light and
persists the choice in `localStorage` (`wt-theme`). For a 3-way picker call
`weirsoeTheme.set('terminal')`.

## Notes

- Want pixel-exact Inter (like asger.weirsøe.dk)? Self-host
  `@fontsource-variable/inter` and set `--wt-font-sans: "Inter Variable", …`.
  The default system stack is used to keep TTFB optimal and avoid font requests.
- Source: the design originated in `agw/asger-web` (`src/styles/global.css`).