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

Set default theme in config toml

Browse Source
This commit is contained in:
panr 2018-12-21 19:07:37 +01:00
parent 1974d30be0
commit 9532cb8285
3 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
exampleSite/config.toml
View File

@ -7,6 +7,8 @@ paginate = 5
[params] [params]
subtitle = "A simple theme for Hugo" subtitle = "A simple theme for Hugo"
# "light" or "dark"
defaultTheme = "dark"
[params.logo] [params.logo]
logoText = "hello friend" logoText = "hello friend"

2
layouts/_default/baseof.html
View File

@ -6,7 +6,7 @@
{{ end }} {{ end }}
{{ partial "head.html" . }} {{ partial "head.html" . }}
</head> </head>
<body class="dark-theme"> <body class="{{ if ne $.Site.Params.defaultTheme "light" -}} dark-theme {{- end -}}">
<div class="container"> <div class="container">
{{ partial "header.html" . }} {{ partial "header.html" . }}

22
source/js/theme.js
View File

@ -1,16 +1,18 @@
// Toggle theme // Toggle theme
const getTheme = window.localStorage && window.localStorage.getItem('theme') const getTheme = window.localStorage && window.localStorage.getItem("theme");
const themeToggle = document.querySelector('.theme-toggle') const themeToggle = document.querySelector(".theme-toggle");
const isDark = getTheme === 'dark' || getTheme === null const isDark = getTheme === "dark";
document.body.classList.toggle('dark-theme', isDark) if (getTheme !== null) {
document.body.classList.toggle("dark-theme", isDark);
}
themeToggle.addEventListener('click', () => { themeToggle.addEventListener("click", () => {
document.body.classList.toggle('dark-theme') document.body.classList.toggle("dark-theme");
window.localStorage && window.localStorage &&
window.localStorage.setItem( window.localStorage.setItem(
'theme', "theme",
document.body.classList.contains('dark-theme') ? 'dark' : 'light', document.body.classList.contains("dark-theme") ? "dark" : "light",
) );
}) });