alexohneander/alexohneander-zola
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

🌐 fix(theme-switcher): properly translate aria-label (#192)

Browse Source 
Co-authored-by: Tim Böttcher <tim.boettcher2@rwth-aachen.de>
Co-authored-by: welpo <welpo@users.noreply.github.com>
This commit is contained in:
Almost-Senseless-Coder 2023-10-04 12:41:31 +02:00 committed by GitHub
parent ab38f8434c
commit 2eaee6557c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 2 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
static/js/themeSwitcher.js
View File

@ -32,7 +32,6 @@ function switchTheme() {
// Initialize the theme switcher button. // Initialize the theme switcher button.
themeSwitcher.addEventListener("click", switchTheme, false); themeSwitcher.addEventListener("click", switchTheme, false);
themeSwitcher.setAttribute("role", "button"); themeSwitcher.setAttribute("role", "button");
themeSwitcher.setAttribute("aria-label", "Toggle dark mode");
let togglePressed = currentTheme === "dark" ? "true" : "false"; let togglePressed = currentTheme === "dark" ? "true" : "false";
themeSwitcher.setAttribute("aria-pressed", togglePressed); themeSwitcher.setAttribute("aria-pressed", togglePressed);

2
static/js/themeSwitcher.min.js vendored
View File

@ -1 +1 @@
const themeSwitcher=document.querySelector(".theme-switcher");let currentTheme=localStorage.getItem("theme")||document.documentElement.getAttribute("data-theme");function setTheme(e,t=!1){document.documentElement.setAttribute("data-theme",e);var r="dark"===(currentTheme=e)?"true":"false",r=(themeSwitcher.setAttribute("aria-pressed",r),t&&localStorage.setItem("theme",e),new CustomEvent("themeChanged",{detail:{theme:e}}));window.dispatchEvent(r)}function switchTheme(){setTheme("dark"===currentTheme?"light":"dark",!0)}themeSwitcher.addEventListener("click",switchTheme,!1),themeSwitcher.setAttribute("role","button"),themeSwitcher.setAttribute("aria-label","Toggle dark mode");let togglePressed="dark"===currentTheme?"true":"false";themeSwitcher.setAttribute("aria-pressed",togglePressed),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",e=>{setTheme(e.matches?"dark":"light")}); const themeSwitcher=document.querySelector(".theme-switcher");let currentTheme=localStorage.getItem("theme")||document.documentElement.getAttribute("data-theme");function setTheme(e,t=!1){document.documentElement.setAttribute("data-theme",e),currentTheme=e;let r="dark"===e?"true":"false";themeSwitcher.setAttribute("aria-pressed",r),t&&localStorage.setItem("theme",e);const h=new CustomEvent("themeChanged",{detail:{theme:e}});window.dispatchEvent(h)}function switchTheme(){setTheme("dark"===currentTheme?"light":"dark",!0)}themeSwitcher.addEventListener("click",switchTheme,!1),themeSwitcher.setAttribute("role","button");let togglePressed="dark"===currentTheme?"true":"false";themeSwitcher.setAttribute("aria-pressed",togglePressed),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(e=>{setTheme(e.matches?"dark":"light")}));

2
templates/partials/theme_switcher.html
View File

@ -6,7 +6,7 @@
{%- set combined_mode_str = dark_str ~ "/" ~ light_str -%} {%- set combined_mode_str = dark_str ~ "/" ~ light_str -%}
{%- set title_label = toggle_str | replace(from="$MODE", to=combined_mode_str) -%} {%- set title_label = toggle_str | replace(from="$MODE", to=combined_mode_str) -%}
{%- set aria_label = 'Toggle ' ~ dark_str ~ ' mode' -%} {%- set aria_label = toggle_str | replace(from="$MODE", to=dark_str) -%}
<div <div
title="{{ title_label }}" title="{{ title_label }}"