fix colors if media set to dark

This commit fixes a few edge-cases. First, if you `prefers-color-scheme`
is dark, your background will no longer be dark in light mode.
Furthermore, switching from dark to system theme now works. It did not
before, as we queried our iframe for color-scheme instead of the parent
window (our iframe inherited the color-scheme from the parent document).
Finally, the navbar iframe has its color-scheme set separately, which
caused issues in a few cases.
main
Calvin Lee 2023-06-09 14:10:06 -07:00 committed by Henrik Böving
parent 75d06a8153
commit 76a137dabc
2 changed files with 40 additions and 4 deletions

View File

@ -5,10 +5,12 @@ function getTheme() {
function setTheme(themeName) { function setTheme(themeName) {
localStorage.setItem('theme', themeName); localStorage.setItem('theme', themeName);
if (themeName == "system") { if (themeName == "system") {
themeName = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; themeName = parent.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
} }
// the navbar is in an iframe, so we need to set this variable in the parent document // the navbar is in an iframe, so we need to set this variable in the parent document
parent.document.documentElement.setAttribute('data-theme', themeName); for (const win of [window, parent]) {
win.document.documentElement.setAttribute('data-theme', themeName);
}
} }
setTheme(getTheme()) setTheme(getTheme())
@ -22,7 +24,7 @@ document.addEventListener("DOMContentLoaded", function() {
}); });
// also check to see if the user changes their theme settings while the page is loaded. // also check to see if the user changes their theme settings while the page is loaded.
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => { parent.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
setTheme(getTheme()); setTheme(getTheme());
}) })
}); });

View File

@ -53,7 +53,6 @@ nav { line-height: normal; }
--fragment-offset: calc(var(--header-height) + 1em); --fragment-offset: calc(var(--header-height) + 1em);
--content-width: 55vw; --content-width: 55vw;
} }
/* automatic dark theme if no javascript */ /* automatic dark theme if no javascript */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
@ -83,6 +82,41 @@ nav { line-height: normal; }
} }
} }
[data-theme="light"] {
color-scheme: light;
--header-height: 3em;
--fragment-offset: calc(var(--header-height) + 1em);
--content-width: 55vw;
--header-bg: #f8f8f8;
--body-bg: white;
--code-bg: #f3f3f3;
--text-color: black;
--link-color: hsl(210, 100%, 30%);
--implicit-arg-text-color: var(--text-color);
--def-color: #92dce5;
--def-color-hsl-angle: 187;
--theorem-color: #8fe388;
--theorem-color-hsl-angle: 115;
--axiom-and-constant-color: #f44708;
--axiom-and-constant-color-hsl-angle: 16;
--structure-and-inductive-color: #f0a202;
--structure-and-inductive-color-hsl-angle: 40;
--starting-percentage: 100;
--hamburger-bg-color: #eee;
--hamburger-active-color: white;
--hamburger-border-color: #ccc;
--tags-border-color: #555;
--fragment-offset: calc(var(--header-height) + 1em);
--content-width: 55vw;
}
[data-theme="dark"] { [data-theme="dark"] {
color-scheme: dark; color-scheme: dark;