Weircon-wind/README.md

weirsoe-theme

A tiny, framework-agnostic dark/light design system — the look from 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)

<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:

<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).