diff options
| -rw-r--r-- | assets/js/main.js | 1 | ||||
| -rw-r--r-- | assets/js/search.js | 7 | ||||
| -rw-r--r-- | assets/js/theme.js | 41 |
3 files changed, 31 insertions, 18 deletions
diff --git a/assets/js/main.js b/assets/js/main.js index 957c9b5..e83cbba 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -5,4 +5,3 @@ import initSearch from "./search.js"; initThemeToggle(); initSearch(); })(); - diff --git a/assets/js/search.js b/assets/js/search.js index f10695a..5308ce0 100644 --- a/assets/js/search.js +++ b/assets/js/search.js @@ -1,14 +1,14 @@ /* Search Entire Site for Content */ function initSearch() { const input = document.getElementById("search-input"); + // Only initialize search on the search page + if (!input) return; + const resetBtn = document.getElementById("search-reset"); const resultsCount = document.querySelector(".search-results__count"); const resultsList = document.querySelector(".search-results__list"); const template = document.getElementById("search-result-template"); - // Only initialize search on the search page - if (!input || !template) return; - let allPosts = []; let searchTimeout; @@ -115,4 +115,3 @@ function initSearch() { } export default initSearch; - diff --git a/assets/js/theme.js b/assets/js/theme.js index f22afe5..d660e3b 100644 --- a/assets/js/theme.js +++ b/assets/js/theme.js @@ -3,24 +3,39 @@ function initThemeToggle() { const rootHtml = document.documentElement; const toggleThemeBtn = document.getElementById("theme-toggle"); - // If no saved theme, determine user preference, otherwise default to light - const savedTheme = localStorage.getItem("theme"); - const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches; - const initialTheme = savedTheme ?? (prefersDark ? "dark" : "light"); + // The dataset of toggleThemeBtn comes with translated label & title texts for site's language + function getThemeTexts(theme) { + const isDarkMode = theme === "dark"; + + return { + label: isDarkMode + ? toggleThemeBtn.dataset.labelLight + : toggleThemeBtn.dataset.labelDark, + title: isDarkMode + ? toggleThemeBtn.dataset.titleLight + : toggleThemeBtn.dataset.titleDark, + }; + } + + // Apply correct aria-label and title to the theme toggle button + function setLabelAndTitle(labelText, titleText) { + toggleThemeBtn.setAttribute("aria-label", labelText); + toggleThemeBtn.setAttribute("title", titleText); + } + // Apply different theme description to button & root, the display is handled by CSS function setTheme(theme) { - const isDarkMode = theme === "dark"; - // toggleThemeBtn dataset comes with translated labels & title for site's language - const label = isDarkMode ? toggleThemeBtn.dataset.labelLight : toggleThemeBtn.dataset.labelDark; - const title = isDarkMode ? toggleThemeBtn.dataset.titleLight : toggleThemeBtn.dataset.titleDark; + const { label: newLabel, title: newTitle } = getThemeTexts(theme); - rootHtml.setAttribute("data-theme", theme); // display handled by CSS - toggleThemeBtn.setAttribute("aria-label", label); - toggleThemeBtn.setAttribute("title", title); + setLabelAndTitle(newLabel, newTitle); + rootHtml.setAttribute("data-theme", theme); } - // Apply initial theme - setTheme(initialTheme); + // Initial data-theme attribute is set by inline script in <head> on first page load + const initialTheme = rootHtml.getAttribute("data-theme") ?? "light"; + const { label: initialLabel, title: initialTitle } = getThemeTexts(initialTheme); + + setLabelAndTitle(initialLabel, initialTitle); // Change theme on click and save user's choice toggleThemeBtn.addEventListener("click", () => { |