/* ========================================================================== Theme — light and dark. Every colour lives in a custom property, so the rules below are written once and only the *values* change. Three token blocks resolve the theme: 1. :root -> light (the default) 2. prefers-color-scheme: dark -> dark, unless the visitor has explicitly chosen light 3. [data-theme="dark"] -> dark, chosen explicitly The visitor's choice is stored on by the toggle button. With no choice stored the attribute is absent and rule 2 follows the operating system — so auto dark mode still works without JavaScript. Palette logic: Berkeley Blue (#003262) is too dark to carry text on a dark page, so it moves from "ink" to "surface" — it stays the sidebar colour and the page recedes to a deeper blue-black behind it. Links and accents pass to the lighter official secondaries, Founder's Rock (#3B7EA1). Hover, in both themes, is an underline rather than a colour change — the link colour stays put, matching how the light site has always behaved. ========================================================================== */ /* --- 1. Light: the site's existing colours -------------------------------- */ :root { --bg: #ffffff; --bg-raised: #f9f9f9; --berkeley: #003262; --heading: #343a40; --text: #868e96; --link: #003262; --link-hover: #003262; /* unchanged on hover: the underline does it */ --name-hover: #868e96; /* likewise */ --border: #dee2e6; --panel-border: #e9ecef; --panel-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2); --icon: #495057; --icon-hover: #003262; --cv-letters: #003262; --cv-letters-hover:#003262; --dropdown-hover: #003262; --profile-ring: #ffffff; --img-filter: none; --toggle-color: #868e96; --toggle-border: #dee2e6; --toggle-hover: #003262; --icon-moon: inline-block; /* light mode offers a switch to dark */ --icon-sun: none; } /* --- 2. Dark, following the operating system ----------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0b1622; /* Berkeley Blue pushed to near-black */ --bg-raised: #14202e; --heading: #e8edf3; --text: #a9b4c0; --link: #6fa8cc; /* Founder's Rock, lightened */ --link-hover: #6fa8cc; /* unchanged on hover, as in light mode */ --name-hover: #a9b4c0; --border: #1c2a3a; --panel-border: #1c2a3a; --panel-shadow: 0 8px 16px 0 rgba(0, 0, 0, .55); --icon: #4a5b6e; --icon-hover: #3b7ea1; --cv-letters: #4a5b6e; --cv-letters-hover:#3b7ea1; --dropdown-hover: #3b7ea1; --profile-ring: rgba(255, 255, 255, .85); --img-filter: brightness(.94); --toggle-color: #a9b4c0; --toggle-border: #1c2a3a; --toggle-hover: #e8edf3; /* brightens rather than changing hue */ --icon-moon: none; --icon-sun: inline-block; } } /* --- 3. Dark, chosen explicitly with the toggle -------------------------- */ :root[data-theme="dark"] { --bg: #0b1622; --bg-raised: #14202e; --heading: #e8edf3; --text: #a9b4c0; --link: #6fa8cc; --link-hover: #6fa8cc; --name-hover: #a9b4c0; --border: #1c2a3a; --panel-border: #1c2a3a; --panel-shadow: 0 8px 16px 0 rgba(0, 0, 0, .55); --icon: #4a5b6e; --icon-hover: #3b7ea1; --cv-letters: #4a5b6e; --cv-letters-hover:#3b7ea1; --dropdown-hover: #3b7ea1; --profile-ring: rgba(255, 255, 255, .85); --img-filter: brightness(.94); --toggle-color: #a9b4c0; --toggle-border: #1c2a3a; --toggle-hover: #e8edf3; --icon-moon: none; --icon-sun: inline-block; } /* ========================================================================== Rules — written once, driven entirely by the tokens above. ========================================================================== */ body { background-color: var(--bg); color: var(--text); } h1, h2, h3, h4, h5, h6 { color: var(--heading); } /* Links -------------------------------------------------------------- */ a { color: var(--link); } a:active, a:focus, a:hover { color: var(--link-hover); } .text-primary { color: var(--link) !important; } a.hlinknames { color: var(--text); } a.hlinknames:hover, a.hlinknames:active { color: var(--name-hover); } /* Sidebar keeps Berkeley Blue in both themes -------------------------- */ .bg-primary { background-color: var(--berkeley) !important; } #sideNav .navbar-brand .img-profile { border-color: var(--profile-ring); } .img-profile { filter: var(--img-filter); } /* Section dividers ---------------------------------------------------- */ section.resume-section { border-bottom-color: var(--border); } /* Social / CV icons --------------------------------------------------- */ .list-social-icons a { color: var(--icon); } .list-social-icons a:hover { color: var(--icon-hover); } .list-icons .list-inline-item i:hover { color: var(--icon-hover); } /* The CV badge letters sit on top of a white fa-file icon, so they take the disc's own colour. The inline color:#003262 needs !important. */ .list-social-icons .fa-stack-1x[style] { color: var(--cv-letters) !important; } .list-social-icons a:hover .fa-stack-1x[style] { color: var(--cv-letters-hover) !important; } /* Media / slides dropdowns -------------------------------------------- */ .dropbtn { color: var(--link); background-color: var(--bg); } /* inside the buttons — a presentational attribute, so a plain selector is enough to override it. */ .dropbtn font { color: var(--link); } /* The dropdown buttons are