thomasjsn/hugo-theme-hello-friend
1
0
Fork 0
mirror of https://github.com/thomasjsn/hugo-theme-hello-friend.git synced 2024-11-21 23:35:08 +01:00
Code Issues Projects Releases Wiki Activity

Allow OS theme when no theme has been set

Browse Source
This commit is contained in:
panr 2022-06-04 01:07:58 +02:00
parent 3ffa8121a0
commit e99e832d94
5 changed files with 47 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
assets/css/variables.css
View File

@ -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);

23
assets/js/theme.js
View File

@ -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", () => {
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",
);
});

2
layouts/_default/baseof.html
View File

@ -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" . }}

2
static/assets/main.js
View File

@ -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")}))}();

2
static/assets/style.css
View File

File diff suppressed because one or more lines are too long