/* hylograph-ui.css — the theme variables the widgets read. * * The widgets carry baked-in light-mode fallbacks, so they look right with NO * stylesheet at all. Include this file (or just define the --hg-* variables * yourself) to enable theming — most usefully, dark mode. * * * * Dark mode is automatic from the OS (prefers-color-scheme) unless an explicit * theme is chosen by setting data-theme="light" | "dark" on a host element * (commonly ). */ :root { --hg-ink: #2b2b2b; --hg-ink-soft: #7a7a7a; --hg-line: rgba(0, 0, 0, 0.09); --hg-surface: #ffffff; --hg-surface-alt: #f4f3f0; --hg-accent: #2f5fb0; --hg-danger: #b0492f; --hg-warn: #b07a2f; --hg-ok: #2f8a5c; --hg-track-off: #c9c6bd; --hg-control-border: #cfcabb; --hg-knob: #ffffff; --hg-shadow: rgba(0, 0, 0, 0.13); --hg-backdrop: rgba(0, 0, 0, 0.40); --hg-page-bg: #faf9f6; } /* Dark values, shared by the OS-preference path and the explicit opt-in. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hg-ink: #e8e6e0; --hg-ink-soft: #9a958a; --hg-line: rgba(255, 255, 255, 0.13); --hg-surface: #232220; --hg-surface-alt: #2c2a27; --hg-accent: #6ea0e8; --hg-danger: #e08a72; --hg-warn: #d6a85c; --hg-ok: #6fbf8c; --hg-track-off: #4a4843; --hg-control-border: #45423c; --hg-knob: #d8d5cd; --hg-shadow: rgba(0, 0, 0, 0.50); --hg-backdrop: rgba(0, 0, 0, 0.60); --hg-page-bg: #1a1917; } } [data-theme="dark"] { --hg-ink: #e8e6e0; --hg-ink-soft: #9a958a; --hg-line: rgba(255, 255, 255, 0.13); --hg-surface: #232220; --hg-surface-alt: #2c2a27; --hg-accent: #6ea0e8; --hg-danger: #e08a72; --hg-warn: #d6a85c; --hg-ok: #6fbf8c; --hg-track-off: #4a4843; --hg-control-border: #45423c; --hg-knob: #d8d5cd; --hg-shadow: rgba(0, 0, 0, 0.50); --hg-backdrop: rgba(0, 0, 0, 0.60); --hg-page-bg: #1a1917; } /* "hylograph" — an opinionated Swiss/International-Typographic theme: warm * paper, near-black ink, a single vermilion accent, hairline rules, crisp * corners, Helvetica. Everything Bootstrap isn't. Opt in explicitly. */ [data-theme="hylograph"] { --hg-ink: #16140f; --hg-ink-soft: #6b6457; --hg-line: rgba(22, 20, 15, 0.18); --hg-surface: #fbfaf5; --hg-surface-alt: #efebdf; --hg-accent: #d6442b; --hg-danger: #a82c1a; --hg-warn: #b07a2f; --hg-ok: #3f7a4f; --hg-track-off: #d7d1c2; --hg-control-border: rgba(22, 20, 15, 0.28); --hg-knob: #fbfaf5; --hg-shadow: rgba(22, 20, 15, 0.10); --hg-backdrop: rgba(22, 20, 15, 0.55); --hg-page-bg: #f1ede2; --hg-radius: 2px; --hg-font: 'Helvetica Neue', Helvetica, 'Inter', Arial, sans-serif; }