Fix colour scheme toggling when switching from default dark mode (#2494)

* Fix colour scheme toggling when switching from default dark mode

* Add workaround for Chrome bug where disabling element doesn't cause rerender
This commit is contained in:
wookie184 2022-04-02 07:05:13 +01:00 committed by GitHub
parent fe2d145d5a
commit 67fe49b322
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 6 additions and 3 deletions

View File

@ -3,21 +3,24 @@ const pygmentsNormal = document.getElementById("pyg");
const pygmentsDark = document.getElementById("pyg-dark"); const pygmentsDark = document.getElementById("pyg-dark");
const makeLight = () => { const makeLight = () => {
dark.media = pygmentsNormal.media = pygmentsDark.media = ""
dark.disabled = pygmentsDark.disabled = true dark.disabled = pygmentsDark.disabled = true
dark.media = pygmentsNormal.media = pygmentsDark.media = ""
pygmentsNormal.disabled = false pygmentsNormal.disabled = false
} }
const makeDark = () => { const makeDark = () => {
dark.media = pygmentsNormal.media = pygmentsDark.media = ""
dark.disabled = pygmentsDark.disabled = false dark.disabled = pygmentsDark.disabled = false
dark.media = pygmentsNormal.media = pygmentsDark.media = ""
pygmentsNormal.disabled = true pygmentsNormal.disabled = true
} }
const toggleColourScheme = () => { const toggleColourScheme = () => {
if (localStorage.getItem("colour_scheme") === "dark") { const colourScheme = localStorage.getItem("colour_scheme")
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches
if ((colourScheme === "dark") || (!colourScheme && prefersDark)) {
makeLight() makeLight()
localStorage.setItem("colour_scheme", "light") localStorage.setItem("colour_scheme", "light")
} else { } else {