weirsoe-theme: framework-agnostic dark/light card design system
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.
This commit is contained in:
@@ -0,0 +1,75 @@
|
||||
# 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`).
|
||||
Vendored
+103
@@ -0,0 +1,103 @@
|
||||
/* ============================================================================
|
||||
weirsoe-theme — Bulma adapter.
|
||||
Maps Bulma's component classes onto the weirsoe-theme tokens so an existing
|
||||
Bulma site gets the dark card look without rewriting markup. Load AFTER
|
||||
bulma(swatch) and AFTER weirsoe-theme.css (which defines --color-* tokens).
|
||||
========================================================================== */
|
||||
|
||||
/* Typography */
|
||||
.title, h1, h2, h3, h4, strong, .label, label.label { color: var(--color-text) !important; }
|
||||
.subtitle { color: var(--color-muted) !important; }
|
||||
.content, p, .navbar-item, td, th, li { color: var(--color-text); }
|
||||
.has-text-grey, .has-text-grey-light, .is-size-7.has-text-grey { color: var(--color-muted) !important; }
|
||||
h1.title, .title.is-1, .title.is-2, .title.is-3 { letter-spacing: -0.02em; font-weight: 750; }
|
||||
a { color: var(--color-accent); }
|
||||
a:hover { color: var(--color-accent-2); }
|
||||
|
||||
/* Navbar — translucent dark, blurred */
|
||||
.navbar, .navbar.is-fixed-top {
|
||||
background-color: color-mix(in srgb, var(--color-bg) 90%, transparent) !important;
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.navbar-item, .navbar-link { color: var(--color-text) !important; }
|
||||
.navbar-item:hover, .navbar-link:hover, .navbar-item.is-active {
|
||||
background-color: color-mix(in srgb, var(--color-text) 6%, transparent) !important;
|
||||
color: var(--color-accent) !important;
|
||||
}
|
||||
.navbar-brand .navbar-item span { font-weight: 700; letter-spacing: -0.01em; }
|
||||
.navbar-dropdown {
|
||||
background-color: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--wt-radius-sm);
|
||||
box-shadow: var(--wt-shadow);
|
||||
}
|
||||
.navbar-divider { background-color: var(--color-border); }
|
||||
|
||||
/* Cards */
|
||||
.box {
|
||||
background-color: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--wt-radius);
|
||||
box-shadow: var(--wt-shadow);
|
||||
color: var(--color-text);
|
||||
transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
|
||||
}
|
||||
.box:hover {
|
||||
border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border));
|
||||
box-shadow: var(--wt-shadow-hover);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.box .box { box-shadow: none; transform: none; }
|
||||
.notification { border-radius: var(--wt-radius); border: 1px solid var(--color-border); }
|
||||
hr { background-color: var(--color-border); }
|
||||
|
||||
/* Buttons */
|
||||
.button { border-radius: var(--wt-radius-sm); transition: filter 0.15s ease, transform 0.05s ease, background-color 0.15s ease; }
|
||||
.button:active { transform: translateY(1px); }
|
||||
.button.is-primary, .button.is-link { background-color: var(--color-accent); border-color: transparent; color: var(--color-accent-ink); font-weight: 650; }
|
||||
.button.is-primary:hover, .button.is-link:hover { filter: brightness(1.08); color: var(--color-accent-ink); }
|
||||
.button.is-light, .button:not(.is-primary):not(.is-link):not(.is-danger):not(.is-warning):not(.is-success) {
|
||||
background-color: var(--color-surface-2); border-color: var(--color-border); color: var(--color-text);
|
||||
}
|
||||
.button.is-light:hover { background-color: var(--color-surface-3); color: var(--color-text); }
|
||||
.button.is-danger.is-light { background-color: #3a1620; color: var(--color-bad); border-color: #5b2230; }
|
||||
.button.is-warning { background-color: #3a2c10; color: #ffd479; border-color: #5b471d; }
|
||||
.button.is-success { background-color: #10341f; color: var(--color-good); border-color: #1d5a32; }
|
||||
|
||||
/* Form controls */
|
||||
.input, .textarea, .select select {
|
||||
background-color: var(--color-surface-2); border-color: var(--color-border);
|
||||
color: var(--color-text); border-radius: var(--wt-radius-sm);
|
||||
}
|
||||
.input::placeholder, .textarea::placeholder { color: color-mix(in srgb, var(--color-muted) 80%, transparent); }
|
||||
.input:focus, .textarea:focus, .select select:focus {
|
||||
border-color: var(--color-accent);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent);
|
||||
}
|
||||
.select:not(.is-multiple):not(.is-loading)::after { border-color: var(--color-accent); }
|
||||
.label { font-weight: 600; }
|
||||
|
||||
/* Tags */
|
||||
.tag:not(.is-primary):not(.is-link):not(.is-success):not(.is-danger):not(.is-warning) {
|
||||
background-color: var(--color-surface-2); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 999px;
|
||||
}
|
||||
.tag.is-link { background-color: #1b2a44; color: #9ec3ff; }
|
||||
.tag.is-success { background-color: #10341f; color: var(--color-good); }
|
||||
.tag.is-danger { background-color: #3a1620; color: var(--color-bad); }
|
||||
|
||||
/* Notifications */
|
||||
.notification.is-info.is-light { background-color: #10243a; color: #cfe6ff; border-color: #1d3a5a; }
|
||||
.notification.is-success.is-light { background-color: #10341f; color: #c8f7d6; border-color: #1d5a32; }
|
||||
.notification.is-danger.is-light { background-color: #3a1620; color: #ffd0d9; border-color: #5b2230; }
|
||||
.notification.is-warning.is-light { background-color: #3a2c10; color: #ffe1a8; border-color: #5b471d; }
|
||||
|
||||
/* Media object (list items) */
|
||||
.media + .media { border-top: 1px solid var(--color-border); }
|
||||
.media-left img { border-radius: var(--wt-radius-sm); border: 1px solid var(--color-border); background: #fff; }
|
||||
|
||||
/* Misc */
|
||||
details summary { color: var(--color-accent); }
|
||||
.section { padding-top: 2rem; }
|
||||
@@ -0,0 +1,47 @@
|
||||
<!doctype html>
|
||||
<html data-theme="dark" lang="da">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>weirsoe-theme demo</title>
|
||||
<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>
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.wrap { max-width: 48rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
|
||||
.row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
|
||||
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
|
||||
header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
|
||||
h1 { letter-spacing: -0.02em; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<header>
|
||||
<h1>weirsoe-theme</h1>
|
||||
<button class="theme-toggle" data-theme-toggle aria-label="Skift tema">
|
||||
<svg class="sun-and-moon" aria-hidden="true" width="22" height="22" viewBox="0 0 24 24">
|
||||
<circle class="sun" cx="12" cy="12" r="6" mask="url(#wt-moon)" fill="currentColor"/>
|
||||
<g class="sun-beams" stroke="currentColor"><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.2" y1="4.2" x2="5.6" y2="5.6"/><line x1="18.4" y1="18.4" x2="19.8" y2="19.8"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.2" y1="19.8" x2="5.6" y2="18.4"/><line x1="18.4" y1="5.6" x2="19.8" y2="4.2"/></g>
|
||||
<mask class="moon" id="wt-moon"><rect x="0" y="0" width="100%" height="100%" fill="white"/><circle cx="24" cy="10" r="6" fill="black"/></mask>
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="row" style="margin-bottom:1.5rem">
|
||||
<button class="wt-btn wt-btn--primary">Primær</button>
|
||||
<button class="wt-btn">Sekundær</button>
|
||||
<input class="wt-input" placeholder="Skriv noget…">
|
||||
<span class="wt-tag">tag</span>
|
||||
<button class="wt-btn" onclick="weirsoeTheme.set('terminal')">terminal-tema</button>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="wt-card wt-card--hover"><h2>Ønske</h2><p class="wt-muted">Et kort med hover-løft.</p></div>
|
||||
<div class="wt-card wt-card--hover"><h2>Liste</h2><p class="wt-muted">Kort-baseret layout.</p></div>
|
||||
<div class="wt-card wt-card--hover"><h2>Event</h2><p class="wt-muted">Genbrugeligt tema.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,168 @@
|
||||
/* ============================================================================
|
||||
weirsoe-theme — a tiny, framework-agnostic dark/light design system.
|
||||
Extracted from asger.weirsøe.dk. Pure CSS, system fonts by default (no
|
||||
external requests → great TTFB, no trackers). Three palettes: dark (default),
|
||||
light, terminal. Use the CSS variables directly, or the .wt-* components.
|
||||
|
||||
Switch theme by setting an attribute on <html>:
|
||||
<html data-theme="light"> (or "dark" / "terminal"; default is dark)
|
||||
Pair with weirsoe-theme.js for a persisted toggle + no-flash on load.
|
||||
========================================================================== */
|
||||
|
||||
:root,
|
||||
:root[data-theme="dark"] {
|
||||
color-scheme: dark;
|
||||
--color-bg: #0b0f17;
|
||||
--color-surface: #121a27;
|
||||
--color-surface-2: #182232;
|
||||
--color-surface-3: #1d293b;
|
||||
--color-border: #243044;
|
||||
--color-text: #e6e9ef;
|
||||
--color-muted: #97a3b6;
|
||||
--color-accent: #38bdf8;
|
||||
--color-accent-2: #818cf8;
|
||||
--color-accent-ink: #06121c;
|
||||
--color-good: #7dffa8;
|
||||
--color-bad: #ff8ba0;
|
||||
|
||||
--wt-radius: 0.85rem;
|
||||
--wt-radius-sm: 0.55rem;
|
||||
--wt-shadow: 0 10px 30px #00000059;
|
||||
--wt-shadow-hover: 0 18px 44px #0000006e;
|
||||
--wt-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
|
||||
Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
|
||||
--wt-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
||||
"Liberation Mono", "Courier New", monospace;
|
||||
}
|
||||
|
||||
:root[data-theme="light"] {
|
||||
color-scheme: light;
|
||||
--color-bg: #f6f8fb;
|
||||
--color-surface: #ffffff;
|
||||
--color-surface-2: #eef2f8;
|
||||
--color-surface-3: #e6ecf5;
|
||||
--color-border: #dde4ee;
|
||||
--color-text: #0f1729;
|
||||
--color-muted: #54617a;
|
||||
--color-accent: #0284c7;
|
||||
--color-accent-2: #4f46e5;
|
||||
--color-accent-ink: #ffffff;
|
||||
}
|
||||
|
||||
:root[data-theme="terminal"] {
|
||||
color-scheme: dark;
|
||||
--color-bg: #050a06;
|
||||
--color-surface: #0a140c;
|
||||
--color-surface-2: #102012;
|
||||
--color-surface-3: #16331c;
|
||||
--color-border: #1d3a22;
|
||||
--color-text: #4bff7e;
|
||||
--color-muted: #2fae57;
|
||||
--color-accent: #7dffa8;
|
||||
--color-accent-2: #33cc77;
|
||||
--color-accent-ink: #04130a;
|
||||
}
|
||||
|
||||
/* ---------- base ---------- */
|
||||
html { scroll-behavior: smooth; }
|
||||
body {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-family: var(--wt-font-sans);
|
||||
}
|
||||
/* smooth cross-fade when toggling theme */
|
||||
body, header, a, span, div, p, h1, h2, h3, li, ul, input, button, svg,
|
||||
section, article, .wt-card {
|
||||
transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
|
||||
}
|
||||
::selection { background: color-mix(in srgb, var(--color-accent) 35%, transparent); }
|
||||
|
||||
/* subtle top-glow background (sits behind everything) */
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed; inset: 0; z-index: -1; pointer-events: none;
|
||||
background:
|
||||
radial-gradient(60rem 30rem at 70% -10%, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent 70%),
|
||||
radial-gradient(50rem 30rem at 10% 0%, color-mix(in srgb, var(--color-accent-2) 10%, transparent), transparent 70%);
|
||||
}
|
||||
|
||||
/* ---------- components ---------- */
|
||||
.wt-card {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--wt-radius);
|
||||
box-shadow: var(--wt-shadow);
|
||||
padding: 1.25rem;
|
||||
}
|
||||
.wt-card--hover:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
|
||||
box-shadow: var(--wt-shadow-hover);
|
||||
}
|
||||
.wt-btn {
|
||||
display: inline-flex; align-items: center; gap: 0.5rem;
|
||||
border-radius: var(--wt-radius-sm);
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-surface-2);
|
||||
color: var(--color-text);
|
||||
padding: 0.5rem 0.9rem; font: inherit; cursor: pointer;
|
||||
transition: filter 0.15s, background-color 0.15s, border-color 0.15s;
|
||||
}
|
||||
.wt-btn:hover { border-color: color-mix(in srgb, var(--color-accent) 50%, var(--color-border)); }
|
||||
.wt-btn--primary { background: var(--color-accent); border-color: transparent; color: var(--color-accent-ink); font-weight: 650; }
|
||||
.wt-btn--primary:hover { filter: brightness(1.08); }
|
||||
.wt-input {
|
||||
background: var(--color-surface-2);
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text);
|
||||
border-radius: var(--wt-radius-sm);
|
||||
padding: 0.5rem 0.7rem; font: inherit;
|
||||
}
|
||||
.wt-input::placeholder { color: color-mix(in srgb, var(--color-muted) 80%, transparent); }
|
||||
.wt-input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 25%, transparent); }
|
||||
.wt-tag {
|
||||
display: inline-flex; align-items: center;
|
||||
padding: 0.15rem 0.6rem; border-radius: 999px;
|
||||
background: var(--color-surface-2); border: 1px solid var(--color-border);
|
||||
color: var(--color-text); font-size: 0.8rem;
|
||||
}
|
||||
.wt-muted { color: var(--color-muted); }
|
||||
|
||||
/* ---------- theme toggle (sun ⇄ moon), used by weirsoe-theme.js ---------- */
|
||||
.theme-toggle {
|
||||
display: inline-grid; place-items: center;
|
||||
width: 2.25rem; height: 2.25rem; border-radius: 0.75rem;
|
||||
color: var(--color-muted); background: transparent; cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.theme-toggle:hover { color: var(--color-text); background: var(--color-surface-2); }
|
||||
.theme-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
|
||||
.sun-and-moon > :is(.moon, .sun, .sun-beams) { transform-origin: center; }
|
||||
.sun-and-moon > :is(.moon, .sun) { fill: currentColor; }
|
||||
.sun-and-moon > .sun-beams { stroke: currentColor; stroke-width: 2px; }
|
||||
.sun-and-moon > .sun { transition: transform 0.5s cubic-bezier(0.5, 1.25, 0.75, 1.25); }
|
||||
.sun-and-moon > .sun-beams { transition: transform 0.5s cubic-bezier(0.5, 1.5, 0.75, 1.25), opacity 0.5s cubic-bezier(0.25, 0, 0.3, 1); }
|
||||
.sun-and-moon .moon > circle { transition: transform 0.25s cubic-bezier(0, 0, 0, 1); }
|
||||
@supports (cx: 1) { .sun-and-moon .moon > circle { transition: cx 0.25s cubic-bezier(0, 0, 0, 1); } }
|
||||
[data-theme="dark"] .sun-and-moon > .sun, [data-theme="terminal"] .sun-and-moon > .sun { transform: scale(1.75); transition-timing-function: cubic-bezier(0.25, 0, 0.3, 1); transition-duration: 0.25s; }
|
||||
[data-theme="dark"] .sun-and-moon > .sun-beams, [data-theme="terminal"] .sun-and-moon > .sun-beams { opacity: 0; transform: rotateZ(-25deg); transition-duration: 0.15s; }
|
||||
[data-theme="dark"] .sun-and-moon > .moon > circle, [data-theme="terminal"] .sun-and-moon > .moon > circle { transform: translateX(-7px); transition-delay: 0.25s; transition-duration: 0.5s; }
|
||||
@supports (cx: 1) { [data-theme="dark"] .sun-and-moon > .moon > circle, [data-theme="terminal"] .sun-and-moon > .moon > circle { cx: 17; transform: translateX(0); } }
|
||||
@media (prefers-reduced-motion: reduce) { .sun-and-moon * { transition: none !important; } }
|
||||
|
||||
/* ---------- markdown prose ---------- */
|
||||
.prose { color: var(--color-text); line-height: 1.75; font-size: 1.05rem; }
|
||||
.prose > * + * { margin-top: 1.1em; }
|
||||
.prose h2 { font-size: 1.6rem; font-weight: 700; margin-top: 2em; letter-spacing: -0.01em; }
|
||||
.prose h3 { font-size: 1.25rem; font-weight: 700; margin-top: 1.6em; }
|
||||
.prose a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
|
||||
.prose code { background: var(--color-surface-2); padding: 0.15em 0.4em; border-radius: 0.35rem; font-size: 0.9em; font-family: var(--wt-font-mono); }
|
||||
.prose pre { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 0.75rem; padding: 1rem 1.1rem; overflow-x: auto; }
|
||||
.prose pre code { background: none; padding: 0; }
|
||||
.prose blockquote { border-left: 3px solid var(--color-accent); padding-left: 1rem; color: var(--color-muted); font-style: italic; }
|
||||
.prose ul { list-style: disc; padding-left: 1.4em; }
|
||||
.prose ol { list-style: decimal; padding-left: 1.4em; }
|
||||
.prose img { border-radius: 0.75rem; border: 1px solid var(--color-border); }
|
||||
.prose hr { border-color: var(--color-border); }
|
||||
.prose table { width: 100%; border-collapse: collapse; }
|
||||
.prose th, .prose td { border: 1px solid var(--color-border); padding: 0.5rem 0.7rem; text-align: left; }
|
||||
@@ -0,0 +1,54 @@
|
||||
/* weirsoe-theme.js — persisted theme toggle for weirsoe-theme.css.
|
||||
*
|
||||
* 1) Prevent a flash of the wrong theme: put this MINIMAL snippet inline in
|
||||
* <head>, BEFORE any stylesheet (it runs pre-paint):
|
||||
*
|
||||
* <script>try{var t=localStorage.getItem('wt-theme');
|
||||
* document.documentElement.dataset.theme=t||'dark';}catch(e){
|
||||
* document.documentElement.dataset.theme='dark';}</script>
|
||||
*
|
||||
* 2) Load this file (defer is fine) and drop a toggle button somewhere:
|
||||
*
|
||||
* <button class="theme-toggle" data-theme-toggle aria-label="Skift tema">
|
||||
* <svg class="sun-and-moon" aria-hidden="true" width="22" height="22" viewBox="0 0 24 24">
|
||||
* <circle class="sun" cx="12" cy="12" r="6" mask="url(#wt-moon)" fill="currentColor"/>
|
||||
* <g class="sun-beams" stroke="currentColor"><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.2" y1="4.2" x2="5.6" y2="5.6"/><line x1="18.4" y1="18.4" x2="19.8" y2="19.8"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.2" y1="19.8" x2="5.6" y2="18.4"/><line x1="18.4" y1="5.6" x2="19.8" y2="4.2"/></g>
|
||||
* <mask class="moon" id="wt-moon"><rect x="0" y="0" width="100%" height="100%" fill="white"/><circle cx="24" cy="10" r="6" fill="black"/></mask>
|
||||
* </svg>
|
||||
* </button>
|
||||
*
|
||||
* The toggle cycles dark -> light (add "terminal" yourself if you want a 3-way).
|
||||
*/
|
||||
(function () {
|
||||
var KEY = 'wt-theme';
|
||||
var root = document.documentElement;
|
||||
|
||||
function set(theme) {
|
||||
root.dataset.theme = theme;
|
||||
try { localStorage.setItem(KEY, theme); } catch (e) { /* ignore */ }
|
||||
}
|
||||
|
||||
// Ensure a theme is set even if the inline no-flash snippet was omitted.
|
||||
if (!root.dataset.theme) {
|
||||
var saved;
|
||||
try { saved = localStorage.getItem(KEY); } catch (e) { saved = null; }
|
||||
root.dataset.theme = saved || 'dark';
|
||||
}
|
||||
|
||||
function wire() {
|
||||
document.querySelectorAll('[data-theme-toggle]').forEach(function (btn) {
|
||||
btn.addEventListener('click', function () {
|
||||
set(root.dataset.theme === 'dark' ? 'light' : 'dark');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', wire);
|
||||
} else {
|
||||
wire();
|
||||
}
|
||||
|
||||
// Expose a tiny API for custom controls (e.g. a 3-way picker).
|
||||
window.weirsoeTheme = { set: set, get: function () { return root.dataset.theme; } };
|
||||
})();
|
||||
Reference in New Issue
Block a user