Add some better logic to the resizing, add a better contacts page. sidebar hiding still in the works
This commit is contained in:
parent
d8893f0463
commit
67de08a5b8
19 changed files with 180 additions and 99 deletions
|
@ -11,7 +11,7 @@ function calculateSettingAsThemeString({ localStorageTheme, systemSettingDark })
|
|||
return "light";
|
||||
}
|
||||
|
||||
function updateButton({ buttonEl, isDark }) {
|
||||
function updateThemeButton({ buttonEl, isDark }) {
|
||||
const newCta = isDark ? "toggle light" : "toggle dark";
|
||||
buttonEl.setAttribute("aria-label", newCta);
|
||||
buttonEl.innerText = newCta;
|
||||
|
@ -22,21 +22,21 @@ function updateThemeOnHtmlEl({ theme }) {
|
|||
}
|
||||
|
||||
|
||||
const button = document.querySelector("[data-theme-toggle]");
|
||||
const themeToggleButton = document.querySelector("[data-theme-toggle]");
|
||||
const localStorageTheme = localStorage.getItem("theme");
|
||||
const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
|
||||
let currentThemeSetting = calculateSettingAsThemeString({ localStorageTheme, systemSettingDark });
|
||||
|
||||
updateButton({ buttonEl: button, isDark: currentThemeSetting === "dark" });
|
||||
updateThemeButton({ buttonEl: themeToggleButton, isDark: currentThemeSetting === "dark" });
|
||||
updateThemeOnHtmlEl({ theme: currentThemeSetting });
|
||||
|
||||
button.addEventListener("click", (event) => {
|
||||
themeToggleButton.addEventListener("click", () => {
|
||||
const newTheme = currentThemeSetting === "dark" ? "light" : "dark";
|
||||
|
||||
localStorage.setItem("theme", newTheme);
|
||||
updateButton({ buttonEl: button, isDark: newTheme === "dark" });
|
||||
updateThemeButton({ buttonEl: themeToggleButton, isDark: newTheme === "dark" });
|
||||
updateThemeOnHtmlEl({ theme: newTheme });
|
||||
|
||||
currentThemeSetting = newTheme;
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue