/* css/theme.css Appearance system for the main site pages (index, categories, contents, products, Rd/ft/*). Driven by attributes js/theme.js sets on : data-theme "light" | "dark" data-font "default" | "serif" | "rounded" | "mono" data-font-size "sm" | "md" | "lg" The branded navy top bar / sidebar keep their look in both themes on purpose -- only the content surfaces (page background, cards, footer text) swap. */ :root { --main-bg-color: var(--color-bg, #f9f9fb); --font-scale: 1; } html[data-font-size="sm"] { --font-scale: 0.9; } html[data-font-size="md"] { --font-scale: 1; } html[data-font-size="lg"] { --font-scale: 1.15; } body { font-size: calc(16px * var(--font-scale, 1)); } p { font-size: calc(16px * var(--font-scale, 1)); } /* ---- Font family swaps (zero extra network cost: reuses the already loaded display serif, or ui-* generic system stacks) ---- */ html[data-font="serif"] { --font-body: var(--font-display, 'Playfair Display', serif); } html[data-font="rounded"] { --font-body: ui-rounded, 'Segoe UI', 'Nunito', sans-serif; } html[data-font="mono"] { --font-body: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; } /* ---- Dark theme ---- */ html[data-theme="dark"] { --color-bg: #14141f; --main-bg-color: #14141f; --color-text: #e7e7f0; --color-text-muted: #a0a0b8; } html[data-theme="dark"] body { background-color: var(--color-bg); color: var(--color-text); } html[data-theme="dark"] .welcome, html[data-theme="dark"] .righter, html[data-theme="dark"] .midbut, html[data-theme="dark"] .btn { background-color: #1b1b2c; color: var(--color-text); } html[data-theme="dark"] .righter { border-left-color: #2a2a40; } html[data-theme="dark"] .welcome { box-shadow: 0 2px 12px rgba(0,0,0,0.35); } html[data-theme="dark"] .tophd, html[data-theme="dark"] .midhd, html[data-theme="dark"] .righter h2, html[data-theme="dark"] .righter h3 { color: #eceaff; } html[data-theme="dark"] .divtxt, html[data-theme="dark"] .fsttxt, html[data-theme="dark"] .blogtxt { color: #c6c6dc; } html[data-theme="dark"] .marginit { background: #1e1e33; } html[data-theme="dark"] .pageno a { color: #c6c6dc; } html[data-theme="dark"] .pageno a:hover { background-color: #2a2a45; } html[data-theme="dark"] .sidea { color: #d6d6ea; border-color: #33334d; background: #1b1b2c; } html[data-theme="dark"] .searcha { background-color: #23233a; color: #e7e7f0; } html[data-theme="dark"] .lmid, html[data-theme="dark"] .lefter { background-color: var(--color-bg); } html[data-theme="dark"] ::selection { background: #4b3aa8; color: #fff; }