From 62c4d20caad8ef33a5496bffee4300b355edc0e0 Mon Sep 17 00:00:00 2001
From: James Panther <4462786+jpanther@users.noreply.github.com>
Date: Tue, 22 Nov 2022 09:03:23 +1100
Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=92=84=20Add=20support=20for=20`theme?=
=?UTF-8?q?-color`=20meta=20tag?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Fixes: #343
---
layouts/partials/head.html | 2 ++
1 file changed, 2 insertions(+)
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 22d24607..fc09774d 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -4,6 +4,8 @@
{{ end }}
+
+
{{/* Title */}}
{{ if .IsHome -}}
From 4679ce485c285f95bc04ff0b9fe65d8af3a00b1f Mon Sep 17 00:00:00 2001
From: James Panther <4462786+jpanther@users.noreply.github.com>
Date: Tue, 22 Nov 2022 09:35:17 +1100
Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=9A=B8=20Support=20live=20switching?=
=?UTF-8?q?=20of=20`theme-color`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
assets/js/appearance.js | 11 +++++++++++
layouts/partials/head.html | 3 +--
2 files changed, 12 insertions(+), 2 deletions(-)
diff --git a/assets/js/appearance.js b/assets/js/appearance.js
index 417b1a4a..322b7c7e 100644
--- a/assets/js/appearance.js
+++ b/assets/js/appearance.js
@@ -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"
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index fc09774d..2de24263 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -4,8 +4,7 @@
{{ end }}
-
-
+
{{/* Title */}}
{{ if .IsHome -}}
From 447ce2f52af9fd43858ed33f72f7384a491adcdc Mon Sep 17 00:00:00 2001
From: James Panther <4462786+jpanther@users.noreply.github.com>
Date: Tue, 22 Nov 2022 09:55:20 +1100
Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=9A=B8=20Set=20`theme-color`=20using?=
=?UTF-8?q?=20theme=20colour=20scheme?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
assets/js/appearance.js | 12 +++++++++---
layouts/partials/head.html | 2 +-
2 files changed, 10 insertions(+), 4 deletions(-)
diff --git a/assets/js/appearance.js b/assets/js/appearance.js
index 322b7c7e..c5ffafbe 100644
--- a/assets/js/appearance.js
+++ b/assets/js/appearance.js
@@ -1,11 +1,17 @@
const sitePreference = document.documentElement.getAttribute("data-default-appearance");
const userPreference = localStorage.getItem("appearance");
+function getCSSValue(varName) {
+ var cssValue = window.getComputedStyle(document.documentElement).getPropertyValue(varName);
+ return "rgb(" + cssValue.replace(/\s+/g, "") + ")";
+}
+
function setThemeColor() {
- const metaThemeColor = document.querySelector("meta[name=theme-color]");
+ var metaThemeColor = document.querySelector("meta[name=theme-color]");
document.documentElement.classList.contains("dark")
- ? metaThemeColor.setAttribute("content", "#27272a")
- : metaThemeColor.setAttribute("content", "#ffffff");
+ ? metaThemeColor.setAttribute("content", getCSSValue("--color-neutral-800"))
+ : metaThemeColor.setAttribute("content", getCSSValue("--color-neutral"));
+ return true;
}
if ((sitePreference === "dark" && userPreference === null) || userPreference === "dark") {
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 2de24263..b38862b1 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -4,7 +4,7 @@
{{ end }}
-
+
{{/* Title */}}
{{ if .IsHome -}}