/* File: wwwroot/css/theme.css ------------------------------------------------------------------------------------------ App-wide design tokens. This is the single place to tune the site's look, and the foundation for theming. Tokens delegate to Bootstrap 5.3's --bs-* variables wherever possible, so Bootstrap's built-in colour modes (data-bs-theme="light|dark" on ) flow through automatically. There is no theme switcher yet — see the styling plan, Phase 3. For now the light theme ships; dark mode already works if data-bs-theme="dark" is set, which validates the path. ------------------------------------------------------------------------------------------ */ :root { /* ---- Colour (delegates to Bootstrap so dark mode "just works") ---- */ --app-fg: var(--bs-body-color); --app-bg: var(--bs-body-bg); --app-muted: var(--bs-secondary-color); --app-accent: var(--bs-primary); --app-border: var(--bs-border-color); /* Soft grey surfaces for code, quotes, table headers, etc. (track Bootstrap's tints) */ --app-surface-soft: var(--bs-tertiary-bg, #f6f7f9); --app-surface-softer: var(--bs-secondary-bg, #eef0f2); /* ---- Shape ---- */ --app-radius: 10px; --app-radius-sm: 6px; --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .04); /* ---- Rendered content (prose) ---- */ --content-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --content-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --content-measure: 46rem; /* comfortable reading column width */ --content-size: 1.05rem; /* base body size for rendered content */ --content-leading: 1.7; /* body line-height */ --content-flow: 1.1em; /* vertical rhythm between blocks */ /* Heading scale — tight, Notion-like */ --content-h1: 2rem; --content-h2: 1.5rem; --content-h3: 1.25rem; --content-h4: 1.05rem; } /* Dark-mode token nudges. Bootstrap already flips its --bs-* bg/fg/border/tertiary values when data-bs-theme="dark" is present, so most tokens above adapt for free. Only hand-tune the few things that look better adjusted in dark. (No switcher yet — Phase 3.) */ [data-bs-theme="dark"] { --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4); } /* Many Manage/Account panels use a hardcoded `card-header bg-white`/`bg-light` title bar. `.bg-white` and `.bg-light` are light-only utilities (Bootstrap doesn't flip them), so re-point those headers to a themed surface in dark mode. Scoped to .card-header so it can't darken elements that genuinely need light (badges/pills, QR codes, canvases). */ [data-bs-theme="dark"] .card-header.bg-white, [data-bs-theme="dark"] .card-header.bg-light { background-color: var(--app-surface-soft) !important; } /* `.table-light` (common on ) is a light-only utility — it pins the --bs-table-* vars to light values and never flips. Re-point them in dark mode so table headers become a subtle dark surface instead of a bright white bar. Specificity (0,2,0) beats Bootstrap's `.table-light`. */ [data-bs-theme="dark"] .table-light { --bs-table-color: var(--bs-body-color); --bs-table-bg: var(--app-surface-soft); --bs-table-border-color: var(--bs-border-color); --bs-table-striped-bg: var(--app-surface-softer); --bs-table-striped-color: var(--bs-body-color); --bs-table-active-bg: var(--app-surface-softer); --bs-table-active-color: var(--bs-body-color); --bs-table-hover-bg: var(--app-surface-softer); --bs-table-hover-color: var(--bs-body-color); color: var(--bs-body-color); border-color: var(--bs-border-color); }