Invert SVG colors in dark mode to improve visibility. Also, override OS-level dark mode when the site is in light mode to ensure the correct theme is used.
24 lines
528 B
CSS
24 lines
528 B
CSS
/* Fix SVG visibility in dark mode by inverting colors */
|
|
.dark svg {
|
|
filter: invert(1) hue-rotate(180deg);
|
|
}
|
|
|
|
/* Counter-invert images within SVGs to preserve their original colors */
|
|
.dark svg image {
|
|
filter: invert(1) hue-rotate(180deg);
|
|
}
|
|
|
|
/* Fix tech-banner gradient overlays to respect site theme, not OS theme */
|
|
:root {
|
|
--color-bg: #ffffff;
|
|
}
|
|
|
|
.dark {
|
|
--color-bg: #111111 !important;
|
|
}
|
|
|
|
/* Override OS-level dark mode when site is in light mode */
|
|
html:not(.dark) {
|
|
--color-bg: #ffffff !important;
|
|
}
|