/* =========================================================================== BANALYTICS - DOCUMENTATION DAY / NIGHT THEME Documentation pages (the knowledge base shell) read as a light page inside the dark site chrome. Every light surface, border, shadow and ink colour of those pages is expressed with the --doc-* tokens below, so switching the whole knowledge base to a night palette is a matter of re-declaring them. The active theme lives in the data-theme attribute of : data-theme="light" | data-theme="dark" and the user's preference in data-theme-mode: data-theme-mode="auto" | "light" | "dark" Both are set by /js/doc-theme.js (and by a small inline bootstrap in the knowledge base layout, so the first paint is already correct). =========================================================================== */ :root { color-scheme: light; --doc-bg: #ffffff; --doc-grid-line: rgba(33,31,48,0.045); --doc-surface: #ffffff; --doc-surface-veil: rgba(255,255,255,0.88); --doc-tint-weak: rgba(33,31,48,0.03); --doc-tint: rgba(33,31,48,0.05); --doc-tint-strong: rgba(33,31,48,0.07); --doc-border-soft: rgba(33,31,48,0.08); --doc-border: rgba(33,31,48,0.12); --doc-border-strong: rgba(33,31,48,0.16); --doc-heading: #211F30; --doc-text: #505160; --doc-text-dim: #344054; /* The network camera pages carry their own, slightly cooler ink. */ --doc-ink-strong: #1b2438; --doc-ink-soft: #5f6b85; --doc-danger: #e05555; --doc-danger-strong: #b91c1c; --doc-warning-strong: #6c4a12; --doc-shadow-xs: 0 6px 18px rgba(33,31,48,0.06); --doc-shadow-sm: 0 10px 28px rgba(33,31,48,0.06); --doc-shadow-md: 0 12px 32px rgba(33,31,48,0.06); --doc-shadow-lg: 0 18px 42px rgba(33,31,48,0.14); } html[data-theme="dark"] { color-scheme: dark; --doc-bg: #100F1C; --doc-grid-line: rgba(255,255,255,0.022); --doc-surface: #1C1B2B; --doc-surface-veil: rgba(255,255,255,0.055); --doc-tint-weak: rgba(255,255,255,0.035); --doc-tint: rgba(255,255,255,0.055); --doc-tint-strong: rgba(255,255,255,0.08); --doc-border-soft: rgba(255,255,255,0.07); --doc-border: rgba(255,255,255,0.11); --doc-border-strong: rgba(255,255,255,0.16); --doc-heading: #ECEAF6; --doc-text: #B3B1C6; --doc-text-dim: #9391A8; --doc-ink-strong: #E6E9F5; --doc-ink-soft: #ADB3C6; --doc-danger: #f08a8a; --doc-danger-strong: #f08a8a; --doc-warning-strong: #e8b168; --doc-shadow-xs: 0 6px 16px rgba(0,0,0,0.35); --doc-shadow-sm: 0 10px 28px rgba(0,0,0,0.40); --doc-shadow-md: 0 14px 34px rgba(0,0,0,0.45); --doc-shadow-lg: 0 20px 46px rgba(0,0,0,0.55); } /* Brand colours that only work as ink on a light page get a lighter twin inside the documentation surface when the night theme is on. */ html[data-theme="dark"] .kb-page, html[data-theme="dark"] .article-page { --cerulean: #56AAD1; --waterfall: #93A9C6; --kb-knowledge-base: #B9C3DA; --kb-knowledge-base-rgb: 185,195,218; --bg-card: #1C1B2B; --bg-card-alt: #201F31; } /* Blocks that are deliberately dark on the light page need a little lift once the page itself turns dark, otherwise they melt into the background. */ html[data-theme="dark"] .article-page .art-hero, html[data-theme="dark"] .article-page .art-cta, html[data-theme="dark"] .article-page .arch-diagram, html[data-theme="dark"] .article-page .article-note-warm, html[data-theme="dark"] .article-page .decision-item, html[data-theme="dark"] .article-page .related-chip { background: var(--doc-surface); border: 1px solid var(--doc-border); } html[data-theme="dark"] .article-page .article-note-warm { border-left: 3px solid var(--mustard); } html[data-theme="dark"] .article-page .art-hero .glow-cerulean { opacity: 0.5; } /* Screenshots and diagrams are authored on white; take the glare off them. */ html[data-theme="dark"] .kb-shell-content img, html[data-theme="dark"] .article-page img { filter: brightness(0.92) contrast(0.96); transition: filter var(--transition); } html[data-theme="dark"] .kb-shell-content img:hover, html[data-theme="dark"] .article-page img:hover { filter: none; } /* ===== THEME SWITCH ===================================================== */ .doc-theme-toggle { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--border); border-radius: 100px; background: rgba(255,255,255,0.04); color: var(--text-muted); cursor: pointer; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; line-height: 1; padding: 0.42rem 0.75rem; text-transform: uppercase; transition: border-color var(--transition), color var(--transition), background var(--transition); } .doc-theme-toggle:hover, .doc-theme-toggle:focus-visible { border-color: rgba(226,153,48,0.45); background: rgba(226,153,48,0.1); color: var(--mustard); } .doc-theme-toggle-icon { font-family: "Segoe UI Symbol", "Apple Color Emoji", "Noto Color Emoji", var(--font-body); font-size: 0.85rem; line-height: 1; } .doc-theme-toggle-label { white-space: nowrap; } /* The switch is only meaningful with scripting; keep it hidden until /js/doc-theme.js announces itself. */ html:not([data-theme-ready]) .doc-theme-toggle { display: none; } /* The navigation bar is tight between the desktop layout and the hamburger, so the switch drops to its icon there. */ @media (max-width: 1100px) and (min-width: 769px) { .doc-theme-toggle { padding: 0.42rem 0.55rem; } .doc-theme-toggle-label { display: none; } } @media (max-width: 768px) { .doc-theme-toggle { width: 100%; justify-content: center; } }