Asger Geel Weirsøe
5784f1f955
Extracted from asger.weirsoe.dk (src/styles/global.css). Tokens (--color-*) + base layer (glow, selection, smooth theme transition) + .wt-* components + .prose, plus a persisted dark/light toggle (weirsoe-theme.js) and a Bulma adapter (adapters/bulma.css) so existing Bulma sites get the card look without markup changes. Pure CSS, system fonts, no external requests.
76 lines
2.9 KiB
Markdown
76 lines
2.9 KiB
Markdown
# 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`).
|