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)
`adapters/bootstrap.css`	Maps Bootstrap 5 classes → tokens (for Bootstrap 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.

Theming an existing Bootstrap site

Load the adapter after Bootstrap and after weirsoe-theme.css, and mirror data-theme onto Bootstrap’s data-bs-theme on <html> so the two stay in sync:

<link rel="stylesheet" href="/bootstrap.min.css">
<link rel="stylesheet" href="/weirsoe-theme.css">      <!-- tokens + base -->
<link rel="stylesheet" href="/adapters/bootstrap.css"> <!-- maps Bootstrap → tokens -->

Your existing .card, .btn, .form-control, .alert, .table, .navbar, .badge… become dark and card-styled. email-manager.weircon.dk 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.

Components

Semantic classes so a site can drop hand-written CSS entirely:

Class	What
`.wt-header` / `.wt-nav` / `.wt-brand` `.wt-brand-dot`	sticky blurred header + centred nav bar + wordmark
`.wt-nav-links` / `.wt-nav-link` (`.is-active` / `[aria-current=page]`)	nav link row
`.wt-main`	centred content column (= `.wt-container` + vertical padding)
`.wt-footer` / `.wt-footer-inner`	footer with border + responsive row
`.wt-card` (`--hover` `--raised` `--link`) + `.wt-card-date/-title/-desc`	post/list card
`.wt-chip`	pill tag-link
`.wt-btn` (`--primary`) / `.wt-input` / `.wt-tag` / `.wt-muted`	controls
`.prose`	long-form markdown
`.theme-toggle` + `.sun-and-moon`	the sun⇄moon toggle (wire with `weirsoe-theme.js`)

These mirror, 1:1, the chrome of agw/pw (asger.weirsøe.dk) — the goal is for that site to delete src/styles/global.css + its inline utility soup and @import this framework instead. Also set the browser UI colour in <head>:

<meta name="theme-color" content="#0b0f17" media="(prefers-color-scheme: dark)">
<meta name="theme-color" content="#f6f8fb" media="(prefers-color-scheme: light)">

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

4.8 KiB Raw Blame History Unescape Escape