/* Dark mode override layer.
Activated by [data-theme="dark"] on . Overrides only the surfaces the
templates actually use. The vendored material.css is never edited; its utility
classes use !important, so the overrides below do too where needed. */
/* IMPORTANT: djibe Material ships its own dark mode keyed on this same
[data-theme="dark"] attribute, implemented as a whole page colour inversion:
html[data-theme='dark'] { filter: invert(1) hue-rotate(180deg); }
plus a counter inversion on to make them look normal again.
That inversion would flip every explicit colour below (dark backgrounds
become light grey, accents hue shift). We use real, explicit colours
instead, so cancel Material's inversion entirely. This MUST stay at the
top, before the colour rules. */
[data-theme="dark"],
[data-theme="dark"] img,
[data-theme="dark"] video,
[data-theme="dark"] .prevent-dark-theme {
-webkit-filter: none !important;
filter: none !important;
}
[data-theme="dark"] {
--dk-bg: #1e1e1e; /* page background */
--dk-surface: #1e1e1e; /* content / modal surface */
--dk-surface-2: #262626; /* raised surface */
--dk-surface-3: #2f2f2f; /* badges, filled light buttons */
--dk-text: rgba(255, 255, 255, 0.87);
--dk-text-2: rgba(255, 255, 255, 0.60);
--dk-border: rgba(255, 255, 255, 0.14);
--dk-link: #b388ff; /* purple links */
--dk-link-hover: #cdb4ff;
}
/* Base surfaces */
[data-theme="dark"] body {
background-color: var(--dk-bg) !important;
color: var(--dk-text) !important;
}
/* Side drawer (the about me panel): a touch darker than the page so it reads
as its own surface. */
[data-theme="dark"] .navdrawer-content {
background-color: #1a1a1a !important;
color: var(--dk-text) !important;
}
[data-theme="dark"] .navdrawer-divider {
background-color: var(--dk-border) !important;
}
/* The drawer header behind the profile picture is hardcoded light grey. */
[data-theme="dark"] .navdrawer-header {
background-color: #1a1a1a !important;
border-bottom-color: var(--dk-border) !important;
}
/* Links */
[data-theme="dark"] a,
[data-theme="dark"] a:visited {
color: var(--dk-link);
}
[data-theme="dark"] a:hover {
color: var(--dk-link-hover);
}
/* main.css pins the home title link to black; lift it to the light text colour. */
[data-theme="dark"] a:link.main-title {
color: var(--dk-text) !important;
}
/* Keep buttons rendered as links readable: button classes manage their own colour. */
[data-theme="dark"] a.btn {
color: inherit;
}
/* Buttons */
/* Default and shaped buttons (expertise filters, Awards, Talks, Certificates,
Papers) inherit Material's near black text; default them to light. The
coloured variants below keep their own colours. */
[data-theme="dark"] .btn {
color: var(--dk-text);
}
/* The active expertise filter darkens via a black gradient, invisible on a
dark page; lighten it instead. */
[data-theme="dark"] .btn.active {
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16));
}
/* Round buttons (expertise filters, Awards, Talks, Certificates, Papers):
Material's black elevation shadows disappear on the dark page, leaving flat
black pills. Swap them for a soft white glow plus a thin outline. The
outline is a box-shadow ring rather than a real border: Material buttons
are built with border: 0 and a fixed height, so a real border shrinks the
content box and knocks the label off vertical centre (visible on the