diff --git a/CHANGELOG.md b/CHANGELOG.md index 9f0facbf..61409860 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,6 +23,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), - Taxonomy term listings now honour the `groupByYear` parameter ([#145](https://github.com/jpanther/congo/pull/145)) - The `alert` shortcode now allows its icon to be specified as a parameter +### Fixed + +- Dark appearance shown even when default appearance set to light and auto switching is disabled ([#149](https://github.com/jpanther/congo/issues/149)) + ## [2.0.5] - 2022-02-20 ### Added diff --git a/assets/js/appearance.js b/assets/js/appearance.js index f69b1f0c..417b1a4a 100644 --- a/assets/js/appearance.js +++ b/assets/js/appearance.js @@ -1,19 +1,18 @@ -const browserIsDark = - window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches; const sitePreference = document.documentElement.getAttribute("data-default-appearance"); const userPreference = localStorage.getItem("appearance"); -if ( - (browserIsDark && userPreference === null) || - (browserIsDark && userPreference === "dark") || - (sitePreference === "dark" && userPreference === null) || - (sitePreference === "dark" && userPreference === "dark") || - userPreference === "dark" -) { +if ((sitePreference === "dark" && userPreference === null) || userPreference === "dark") { document.documentElement.classList.add("dark"); } if (document.documentElement.getAttribute("data-auto-appearance") === "true") { + if ( + window.matchMedia && + window.matchMedia("(prefers-color-scheme: dark)").matches && + userPreference !== "light" + ) { + document.documentElement.classList.add("dark"); + } window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (event) => { if (event.matches) { document.documentElement.classList.add("dark");