foodogsquared/hugo-theme-more-contentful
1
0
Fork 0
mirror of https://github.com/foo-dogsquared/hugo-theme-more-contentful.git synced 2025-01-30 22:57:57 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add indication of selected theme

Browse Source
This commit is contained in:
Gabriel Arazas 2022-06-13 17:06:29 +08:00
parent 97e08d0557
commit 85f99f2cd4
3 changed files with 39 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
CHANGELOG.adoc
View File

@ -20,6 +20,11 @@ and this project adheres to https://semver.org/spec/v2.0.0.html[Semantic Version
== Unreleased
=== Added
* Indicator for the selected theme in the dropdown menu.
=== Updated
* Minimum Go runtime version in `go.mod`.

5
assets/scss/layout.scss
View File

@ -103,6 +103,11 @@ footer[aria-label="Site footer"] {
color: var(--background);
cursor: pointer;
}
&--selected {
background: var(--base05);
color: var(--background);
};
}
.pagination {

43
layouts/partials/components/theme-button.html
View File

@ -65,20 +65,35 @@
</div>
</div>
</div>
<script defer>
const themeDropdown = document.querySelector('.site__theme-btn');
themeDropdown.addEventListener('click', (event) => {
const { target } = event;
if (target.classList.contains("site__theme-item")) {
if (target.dataset.theme) {
theme = target.dataset.theme;
window.localStorage.setItem("theme", theme);
document.documentElement.dataset.theme = theme;
} else {
window.localStorage.removeItem("theme");
delete document.documentElement.dataset.theme;
}
<script>
function styleTheme() {
const selectedTheme = window.localStorage.getItem("theme");
for (const el of document.querySelectorAll(".site__theme-item")) {
if (el.dataset.theme == selectedTheme) {
el.classList.add("site__theme-item--selected");
} else {
el.classList.remove("site__theme-item--selected");
}
});
}
}
const themeDropdown = document.querySelector('.site__theme-btn');
themeDropdown.addEventListener('click', (event) => {
const { target } = event;
if (target.classList.contains("site__theme-item")) {
if (target.dataset.theme) {
theme = target.dataset.theme;
window.localStorage.setItem("theme", theme);
document.documentElement.dataset.theme = theme;
} else {
window.localStorage.removeItem("theme");
delete document.documentElement.dataset.theme;
}
}
styleTheme();
});
styleTheme();
</script>
{{- end }}