marcel
/
congo
mirror of https://github.com/jpanther/congo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

🚸 Support live switching of `theme-color`

pull/379/head
James Panther 2022-11-22 09:35:17 +11:00
parent 62c4d20caa
commit 4679ce485c
No known key found for this signature in database
GPG Key ID: D36F789E45745D17
2 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
assets/js/appearance.js
View File

@ -1,8 +1,16 @@
const sitePreference = document.documentElement.getAttribute("data-default-appearance");
const userPreference = localStorage.getItem("appearance");
function setThemeColor() {
const metaThemeColor = document.querySelector("meta[name=theme-color]");
document.documentElement.classList.contains("dark")
? metaThemeColor.setAttribute("content", "#27272a")
: metaThemeColor.setAttribute("content", "#ffffff");
}
if ((sitePreference === "dark" && userPreference === null) || userPreference === "dark") {
document.documentElement.classList.add("dark");
setThemeColor();
}
if (document.documentElement.getAttribute("data-auto-appearance") === "true") {
@ -12,6 +20,7 @@ if (document.documentElement.getAttribute("data-auto-appearance") === "true") {
userPreference !== "light"
) {
document.documentElement.classList.add("dark");
setThemeColor();
}
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (event) => {
if (event.matches) {
@ -19,6 +28,7 @@ if (document.documentElement.getAttribute("data-auto-appearance") === "true") {
} else {
document.documentElement.classList.remove("dark");
}
setThemeColor();
});
}
@ -27,6 +37,7 @@ window.addEventListener("DOMContentLoaded", (event) => {
if (switcher) {
switcher.addEventListener("click", () => {
document.documentElement.classList.toggle("dark");
setThemeColor();
localStorage.setItem(
"appearance",
document.documentElement.classList.contains("dark") ? "dark" : "light"

3
layouts/partials/head.html
View File

@ -4,8 +4,7 @@
<meta http-equiv="content-language" content="{{ . }}" />
{{ end }}
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#27272a" />
<meta name="theme-color" content="#ffffff" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
{{/* Title */}}
{{ if .IsHome -}}