Add indication of selected theme

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
CHANGELOG.adoc
assets/scss
layouts/partials/components

View File

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

View File

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

View File

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