mirror of
https://github.com/thomasjsn/hugo-theme-hello-friend.git
synced 2024-11-14 12:25:07 +01:00
Allow OS theme when no theme has been set
This commit is contained in:
parent
3ffa8121a0
commit
e99e832d94
@ -1,4 +1,4 @@
|
||||
:root {
|
||||
body.light-theme, :root {
|
||||
/* light theme color */
|
||||
--background: #fff;
|
||||
--background-secondary: #eaeaea;
|
||||
@ -22,6 +22,30 @@ body.dark-theme {
|
||||
--border-color: #4a4b50;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
body:not(.dark-theme) {
|
||||
/* light theme color */
|
||||
--background: #fff;
|
||||
--background-secondary: #eaeaea;
|
||||
--header: #fafafa;
|
||||
--color: #222;
|
||||
--color-secondary: #999;
|
||||
--border-color: #dcdcdc;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body:not(.light-theme) {
|
||||
/* dark theme colors */
|
||||
--background: #292a2d;
|
||||
--background-secondary: #3b3d42;
|
||||
--header: #252627;
|
||||
--color: #a9a9b3;
|
||||
--color-secondary: #73747b;
|
||||
--border-color: #4a4b50;
|
||||
}
|
||||
}
|
||||
|
||||
@custom-media --phone (width < 684px);
|
||||
@custom-media --tablet (width < 900px);
|
||||
|
||||
|
@ -1,18 +1,31 @@
|
||||
// Toggle theme
|
||||
|
||||
const getTheme = window.localStorage && window.localStorage.getItem("theme");
|
||||
const localTheme = window.localStorage && window.localStorage.getItem("theme");
|
||||
const themeToggle = document.querySelector(".theme-toggle");
|
||||
const isDark = getTheme === "dark";
|
||||
|
||||
if (getTheme !== null) {
|
||||
document.body.classList.toggle("dark-theme", isDark);
|
||||
if (localTheme) {
|
||||
document.body.classList.remove("light-theme", "dark-theme");
|
||||
document.body.classList.add(localTheme);
|
||||
}
|
||||
|
||||
themeToggle.addEventListener("click", () => {
|
||||
document.body.classList.toggle("dark-theme");
|
||||
const themeUndefined = !new RegExp("(dark|light)-theme").test(document.body.className);
|
||||
const isOSDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
||||
|
||||
if (themeUndefined) {
|
||||
if (isOSDark) {
|
||||
document.body.classList.add("light-theme");
|
||||
} else {
|
||||
document.body.classList.add("dark-theme");
|
||||
}
|
||||
} else {
|
||||
document.body.classList.toggle("light-theme");
|
||||
document.body.classList.toggle("dark-theme");
|
||||
}
|
||||
|
||||
window.localStorage &&
|
||||
window.localStorage.setItem(
|
||||
"theme",
|
||||
document.body.classList.contains("dark-theme") ? "dark" : "light",
|
||||
document.body.classList.contains("dark-theme") ? "dark-theme" : "light-theme",
|
||||
);
|
||||
});
|
||||
|
@ -10,7 +10,7 @@
|
||||
{{ end }}
|
||||
{{ partial "head.html" . }}
|
||||
</head>
|
||||
<body class="{{ if ne $.Site.Params.defaultTheme "light" -}} dark-theme {{- end -}}">
|
||||
<body {{ with $.Site.Params.defaultTheme -}} class="{{ printf "%s-theme" . }}" {{- end }}>
|
||||
<div class="container">
|
||||
{{ partial "header.html" . }}
|
||||
|
||||
|
@ -1 +1 @@
|
||||
!function(){var e,t,n,o,i,d,c,s,r,a,l;e=document.querySelector(".container"),t=document.querySelector(".menu"),n=document.querySelector(".menu-trigger"),document.querySelector(".menu__inner--desktop"),o=document.querySelector(".menu__sub-inner-more-trigger"),i=document.querySelector(".menu__sub-inner-more"),d=getComputedStyle(document.body).getPropertyValue("--phoneWidth"),c=function(){return window.matchMedia(d).matches},s=function(){n&&n.classList.toggle("hidden",!c()),t&&t.classList.toggle("hidden",c()),i&&i.classList.toggle("hidden",!c())},t&&t.addEventListener("click",(function(e){return e.stopPropagation()})),i&&i.addEventListener("click",(function(e){return e.stopPropagation()})),s(),document.body.addEventListener("click",(function(){c()||!i||i.classList.contains("hidden")?c()&&!t.classList.contains("hidden")&&t.classList.add("hidden"):i.classList.add("hidden")})),window.addEventListener("resize",s),n&&n.addEventListener("click",(function(e){e.stopPropagation(),t&&t.classList.toggle("hidden")})),o&&o.addEventListener("click",(function(t){t.stopPropagation(),i&&i.classList.toggle("hidden"),i&&i.getBoundingClientRect().right>e.getBoundingClientRect().right&&(i.style.left="auto",i.style.right=0)})),r=window.localStorage&&window.localStorage.getItem("theme"),a=document.querySelector(".theme-toggle"),l="dark"===r,null!==r&&document.body.classList.toggle("dark-theme",l),a.addEventListener("click",(function(){document.body.classList.toggle("dark-theme"),window.localStorage&&window.localStorage.setItem("theme",document.body.classList.contains("dark-theme")?"dark":"light")}))}();
|
||||
!function(){var e,t,n,o,d,i,c,s,a,r;e=document.querySelector(".container"),t=document.querySelector(".menu"),n=document.querySelector(".menu-trigger"),document.querySelector(".menu__inner--desktop"),o=document.querySelector(".menu__sub-inner-more-trigger"),d=document.querySelector(".menu__sub-inner-more"),i=getComputedStyle(document.body).getPropertyValue("--phoneWidth"),c=function(){return window.matchMedia(i).matches},s=function(){n&&n.classList.toggle("hidden",!c()),t&&t.classList.toggle("hidden",c()),d&&d.classList.toggle("hidden",!c())},t&&t.addEventListener("click",(function(e){return e.stopPropagation()})),d&&d.addEventListener("click",(function(e){return e.stopPropagation()})),s(),document.body.addEventListener("click",(function(){c()||!d||d.classList.contains("hidden")?c()&&!t.classList.contains("hidden")&&t.classList.add("hidden"):d.classList.add("hidden")})),window.addEventListener("resize",s),n&&n.addEventListener("click",(function(e){e.stopPropagation(),t&&t.classList.toggle("hidden")})),o&&o.addEventListener("click",(function(t){t.stopPropagation(),d&&d.classList.toggle("hidden"),d&&d.getBoundingClientRect().right>e.getBoundingClientRect().right&&(d.style.left="auto",d.style.right=0)})),a=window.localStorage&&window.localStorage.getItem("theme"),r=document.querySelector(".theme-toggle"),a&&(document.body.classList.remove("light-theme","dark-theme"),document.body.classList.add(a)),r.addEventListener("click",(function(){var e=!new RegExp("(dark|light)-theme").test(document.body.className),t=window.matchMedia("(prefers-color-scheme: dark)").matches;e?t?document.body.classList.add("light-theme"):document.body.classList.add("dark-theme"):(document.body.classList.toggle("light-theme"),document.body.classList.toggle("dark-theme")),window.localStorage&&window.localStorage.setItem("theme",document.body.classList.contains("dark-theme")?"dark-theme":"light-theme")}))}();
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user