/* knudsiansen.com — shared design tokens (single source of truth). * * Served at https://app.knudsiansen.com/theme.css and linked by every site. * Default: follows the OS (prefers-color-scheme). Manual override: set * data-theme="light" | "dark" on (persist in localStorage 'kn-theme'). * * Pre-paint snippet for : * */ :root { --accent: #f27350; --accent-soft: rgba(242, 115, 80, 0.19); --privat: #5856d6; --privat-soft: rgba(88, 86, 214, 0.15); --danger: #c0392b; --danger-soft: #ffe5e0; --ok: #2e9e5b; --bg: #f5f4f2; --card: #ffffff; --card2: #efeeec; --text: #1c1c1e; --muted: #8e8e93; --border: #e5e4e1; --input-bg: #ffffff; --shadow: 0 2px 10px rgba(0, 0, 0, 0.07); --plex-bg1: #f3f6fa; --plex-bg2: #e8eef6; --edge: #9ec7e8; --edge-jump: #b3a6e3; --node-text: #1d3247; --halo: rgba(255, 255, 255, 0.8); --radius: 14px; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent: #f58264; --accent-soft: rgba(245, 130, 100, 0.22); --privat: #8583f0; --privat-soft: rgba(133, 131, 240, 0.22); --danger: #e66a5a; --danger-soft: rgba(230, 106, 90, 0.18); --ok: #4fc07d; --bg: #171719; --card: #242427; --card2: #303034; --text: #f0f0f2; --muted: #9d9da4; --border: #3a3a3f; --input-bg: #2c2c30; --shadow: 0 2px 12px rgba(0, 0, 0, 0.45); --plex-bg1: #1e2430; --plex-bg2: #181d27; --edge: #4a6f94; --edge-jump: #6f66a8; --node-text: #d7e4f0; --halo: rgba(20, 26, 34, 0.75); color-scheme: dark; } } :root[data-theme="dark"] { --accent: #f58264; --accent-soft: rgba(245, 130, 100, 0.22); --privat: #8583f0; --privat-soft: rgba(133, 131, 240, 0.22); --danger: #e66a5a; --danger-soft: rgba(230, 106, 90, 0.18); --ok: #4fc07d; --bg: #171719; --card: #242427; --card2: #303034; --text: #f0f0f2; --muted: #9d9da4; --border: #3a3a3f; --input-bg: #2c2c30; --shadow: 0 2px 12px rgba(0, 0, 0, 0.45); --plex-bg1: #1e2430; --plex-bg2: #181d27; --edge: #4a6f94; --edge-jump: #6f66a8; --node-text: #d7e4f0; --halo: rgba(20, 26, 34, 0.75); color-scheme: dark; } /* Shared toggle button look (sites may reuse) */ .kn-theme-toggle { background: transparent; border: none; cursor: pointer; font-size: 1.15rem; padding: 5px 8px; border-radius: 8px; } .kn-theme-toggle:hover { background: var(--accent-soft); }