diff --git a/i18n/ca.toml b/i18n/ca.toml index 12cef00..3b40353 100644 --- a/i18n/ca.toml +++ b/i18n/ca.toml @@ -19,6 +19,10 @@ next = "Següent" # As in "Next" page. of = "de" # E.g. Page 1 "of" 3 all_posts = "Totes les entrades" all_tags = "Totes les etiquetes" +language_selection = "Selecció d'idioma" +toggle_mode = "Canvia el mode $MODE" # $MODE will be replaced by a value (or both) below. +dark = "obscur" +light = "clar" # Post metadata. draft = "ESBORRANY" @@ -31,6 +35,10 @@ see_changes = "Veure canvis" table_of_contents = "Taula de contingut" load_comments = "Carregar comentaris" +# Copy code block button. +copied = "Copiat!" +copy_code_to_clipboard = "Copia el codi al porta-retalls" + # Footer: Powered by Zola and tabi. powered_by = "Propulsat per" and = "i" diff --git a/i18n/de.toml b/i18n/de.toml index 32ba4b6..1a03931 100644 --- a/i18n/de.toml +++ b/i18n/de.toml @@ -23,6 +23,10 @@ next = "Nächst" # As in "Next" page. of = "von" # E.g. Page 1 "of" 3 all_posts = "Alle Beiträge" all_tags = "Alle Tags" +language_selection = "Sprachauswahl" +toggle_mode = "Wechsle in den $MODE Modus" # $MODE will be replaced by a value (or both) below. +dark = "dunkel" +light = "hell" # Post metadata. draft = "ENTWURF" @@ -35,6 +39,10 @@ see_changes = "Änderungen anzeigen" table_of_contents = "Inhaltsverzeichnis" load_comments = "Kommentare laden" +# Copy code block button. +copied = "Kopiert!" +copy_code_to_clipboard = "Code in die Zwischenablage kopieren" + # Footer. powered_by = "Angetrieben von" and = "und" diff --git a/i18n/en.toml b/i18n/en.toml index 0572e0a..27511a3 100644 --- a/i18n/en.toml +++ b/i18n/en.toml @@ -19,6 +19,10 @@ next = "Next" # As in "Next" page. of = "of" # E.g. Page 1 "of" 3 all_posts = "All posts" all_tags = "All tags" +language_selection = "Language selection" +toggle_mode = "Toggle $MODE mode" # $MODE will be replaced by a value (or both) below. +dark = "dark" +light = "light" # Post metadata. draft = "DRAFT" @@ -31,6 +35,10 @@ see_changes = "See changes" table_of_contents = "Table of Contents" load_comments = "Load comments" +# Copy code block button. +copied = "Copied!" +copy_code_to_clipboard = "Copy code to clipboard" + # Footer: Powered by Zola and tabi. powered_by = "Powered by" and = "&" diff --git a/i18n/es.toml b/i18n/es.toml index c50ee88..c9429e7 100644 --- a/i18n/es.toml +++ b/i18n/es.toml @@ -19,6 +19,10 @@ next = "Siguiente" # As in "Next" page. of = "sur" # E.g. Page 1 "of" 3 all_posts = "Todas las entradas" all_tags = "Todas las etiquetas" +language_selection = "Selección de idioma" +toggle_mode = "Cambiar a modo $MODE" # $MODE will be replaced by a value (or both) below. +dark = "oscuro" +light = "claro" # Post metadata. draft = "BORRADOR" @@ -31,6 +35,10 @@ see_changes = "Ver cambios" table_of_contents = "Tabla de contenido" load_comments = "Cargar comentarios" +# Copy code block button. +copied = "Copiado!" +copy_code_to_clipboard = "Copiar código al portapapeles" + # Footer: Powered by Zola and tabi. powered_by = "Impulsado por" and = "y" diff --git a/i18n/fr.toml b/i18n/fr.toml index ffa4072..de35e45 100644 --- a/i18n/fr.toml +++ b/i18n/fr.toml @@ -23,6 +23,10 @@ next = "Suivant" # As in "Next" page. of = "de" # E.g. Page 1 "of" 3 all_posts = "Tous les articles" all_tags = "Toutes les étiquettes" +language_selection = "Sélection de la langue" +toggle_mode = "Basculer en mode $MODE" # $MODE will be replaced by a value (or both) below. +dark = "sombre" +light = "clair" # Post metadata. draft = "BROUILLON" @@ -35,6 +39,10 @@ see_changes = "Voir les modifications" table_of_contents = "Table des matières" load_comments = "Afficher les commentaires" +# Copy code block button. +copied = "Copié!" +copy_code_to_clipboard = "Copier le code dans le presse-papiers" + # Footer: Powered by Zola and tabi. powered_by = "Propulsé par" and = "et" diff --git a/i18n/hi.toml b/i18n/hi.toml index 2c0f3d9..dbc6ae3 100644 --- a/i18n/hi.toml +++ b/i18n/hi.toml @@ -21,6 +21,10 @@ next = "अगला" # As in "Next" page. of = "का" # E.g. Page 1 "of" 3 all_posts = "सभी पोस्ट्स" all_tags = "सभी टैग्स" +language_selection = "भाषा चयन" +toggle_mode = "$MODE मोड में टॉगल करें" # $MODE will be replaced by a value (or both) below. +dark = "अंधेरा" +light = "रोशनी" # Post metadata. draft = "मसौदा" @@ -33,6 +37,10 @@ see_changes = "बदलाव देखें" table_of_contents = "विषय सूची" load_comments = "कमेंट्स लोड करें" +# Copy code block button. +copied = "कॉपी किया गया!" +copy_code_to_clipboard = "कोड क्लिपबोर्ड में कॉपी करें" + # Footer: Powered by Zola and tabi. powered_by = "चालित द्वारा" and = "और" diff --git a/i18n/it.toml b/i18n/it.toml index ea048f5..9335d2f 100644 --- a/i18n/it.toml +++ b/i18n/it.toml @@ -19,6 +19,10 @@ next = "Successivo" # As in "Next" page. of = "di" # E.g. Page 1 "of" 3 all_posts = "Tutti i post" all_tags = "Tutti i tag" +language_selection = "Selezione della lingua" +toggle_mode = "Passa alla modalità $MODE" # $MODE will be replaced by a value (or both) below. +dark = "scuro" +light = "chiaro" # Post metadata. draft = "BOZZA" @@ -31,6 +35,10 @@ see_changes = "Vedi modifiche" table_of_contents = "Indice" load_comments = "Carica commenti" +# Copy code block button. +copied = "Copiato!" +copy_code_to_clipboard = "Copia codice negli appunti" + # Footer: Powered by Zola and tabi. powered_by = "Alimentato da" and = "e" diff --git a/i18n/ja.toml b/i18n/ja.toml index 66efb00..982a7ae 100644 --- a/i18n/ja.toml +++ b/i18n/ja.toml @@ -23,6 +23,10 @@ next = "次" # As in "Next" page. of = "中" # E.g. Page 1 "of" 3 all_posts = "すべての投稿" all_tags = "すべてのタグ" +language_selection = "言語選択" +toggle_mode = "$MODE モードに切り替え" # $MODE will be replaced by a value (or both) below. +dark = "暗い" +light = "明るい" # Post metadata. draft = "ドラフト" @@ -35,6 +39,10 @@ see_changes = "変更を見る" table_of_contents = "目次" load_comments = "コメントを読む" +# Copy code block button. +copied = "コピーしました！" +copy_code_to_clipboard = "コードをクリップボードにコピー" + # Footer: Powered by Zola and tabi. powered_by = "Powered by" and = "と" diff --git a/i18n/ko.toml b/i18n/ko.toml index 529e3d4..0756955 100644 --- a/i18n/ko.toml +++ b/i18n/ko.toml @@ -23,6 +23,10 @@ next = "다음" # As in "Next" page. of = "중" # E.g. Page 1 "of" 3 all_posts = "모든 게시물" all_tags = "모든 태그" +language_selection = "언어 선택" +toggle_mode = "$MODE 모드로 전환" # $MODE will be replaced by a value (or both) below. +dark = "어두운" +light = "밝은" # Post metadata. draft = "임시 저장" @@ -35,6 +39,10 @@ see_changes = "변경사항 보기" table_of_contents = "목차" load_comments = "댓글 불러오기" +# Copy code block button. +copied = "복사됨!" +copy_code_to_clipboard = "코드를 클립보드에 복사" + # Footer: Powered by Zola and tabi. powered_by = "제공됨" and = "&" diff --git a/i18n/pt-PT.toml b/i18n/pt-PT.toml index 36ec90f..5bad601 100644 --- a/i18n/pt-PT.toml +++ b/i18n/pt-PT.toml @@ -19,6 +19,10 @@ next = "Seguinte" # As in "Next" page. of = "de" # E.g. Page 1 "of" 3 all_posts = "Todas as publicações" all_tags = "Todas as etiquetas" +language_selection = "Seleção de idioma" +toggle_mode = "Alternar para o modo $MODE" # $MODE will be replaced by a value (or both) below. +dark = "escuro" +light = "claro" # Post metadata. draft = "RASCUNHO" @@ -31,6 +35,10 @@ see_changes = "Ver alterações" table_of_contents = "Índice de conteúdo" load_comments = "Carregar comentários" +# Copy code block button. +copied = "Copiado!" +copy_code_to_clipboard = "Copiar código para a área de transferência" + # Footer: Powered by Zola and tabi. powered_by = "Impulsionado por" and = "e" diff --git a/i18n/ru.toml b/i18n/ru.toml index d1a1cc9..fa35c4e 100644 --- a/i18n/ru.toml +++ b/i18n/ru.toml @@ -19,6 +19,10 @@ next = "След." # As in "Next" page. of = "из" # E.g. Page 1 "of" 3 all_posts = "Все посты" all_tags = "Все теги" +language_selection = "Выбор языка" +toggle_mode = "Переключить на режим $MODE" # $MODE will be replaced by a value (or both) below. +dark = "тёмный" +light = "светлый" # Post metadata. draft = "ЧЕРНОВИК" @@ -31,6 +35,10 @@ see_changes = "Смотреть изменения" table_of_contents = "Содержание" load_comments = "Загрузить комментарии" +# Copy code block button. +copied = "Скопировано!" +copy_code_to_clipboard = "Скопировать код в буфер обмена" + # Footer: Powered by Zola and tabi. powered_by = "Под управлением" and = "&" diff --git a/i18n/uk.toml b/i18n/uk.toml index fd46e01..51bdbbf 100644 --- a/i18n/uk.toml +++ b/i18n/uk.toml @@ -23,6 +23,10 @@ next = "Наст." # As in "Next" page. of = "з" # E.g. Page 1 "of" 3 all_posts = "Всі пости" all_tags = "Всі теги" +language_selection = "Вибір мови" +toggle_mode = "Перемкнути в режим $MODE" # $MODE will be replaced by a value (or both) below. +dark = "темний" +light = "світлий" # Post metadata. draft = "ЧЕРНЕТКА" @@ -35,6 +39,10 @@ see_changes = "Переглянути зміни" table_of_contents = "Зміст" load_comments = "Завантажити коментарі" +# Copy code block button. +copied = "Скопійовано!" +copy_code_to_clipboard = "Копіювати код у буфер обміну" + # Footer: Powered by Zola and tabi. powered_by = "Під управлінням" and = "та" diff --git a/i18n/zh-Hans.toml b/i18n/zh-Hans.toml index 96c0461..6d4530c 100644 --- a/i18n/zh-Hans.toml +++ b/i18n/zh-Hans.toml @@ -19,6 +19,10 @@ next = "下一页" # As in "Next" page. of = "/" # E.g. Page 1 "of" 3 all_posts = "所有文章" all_tags = "所有标签" +language_selection = "语言选择" # Machine translated. +toggle_mode = "切换到$MODE模式" # $MODE will be replaced by a value (or both) below. Machine translated. +dark = "暗" # Machine translated. +light = "亮" # Machine translated. # Post metadata. draft = "草稿" @@ -31,6 +35,10 @@ see_changes = "修改纪录" table_of_contents = "目录" load_comments = "载入留言" +# Copy code block button. +copied = "已复制!" # Machine translated. +copy_code_to_clipboard = "复制代码到剪贴板" # Machine translated. + # Footer: Powered by Zola and tabi. powered_by = "网站基于" and = "和" diff --git a/i18n/zh-Hant.toml b/i18n/zh-Hant.toml index 7986472..763ae97 100644 --- a/i18n/zh-Hant.toml +++ b/i18n/zh-Hant.toml @@ -19,6 +19,10 @@ next = "下一頁" # As in "Next" page. of = "/" # E.g. Page 1 "of" 3 all_posts = "所有文章" all_tags = "所有標籤" +language_selection = "語言選擇" # Machine translated. +toggle_mode = "切換到$MODE模式" # $MODE will be replaced by a value (or both) below. Machine translated. +dark = "暗" # Machine translated. +light = "亮" # Machine translated. # Post metadata. draft = "草稿" @@ -31,6 +35,10 @@ see_changes = "修改紀錄" table_of_contents = "目錄" load_comments = "載入留言" +# Copy code block button. +copied = "已复制!" # Machine translated. +copy_code_to_clipboard = "复制代码到剪贴板" # Machine translated. + # Footer: Powered by Zola and tabi. powered_by = "網站基於" and = "和" diff --git a/sass/parts/_header.scss b/sass/parts/_header.scss index c259651..9282187 100644 --- a/sass/parts/_header.scss +++ b/sass/parts/_header.scss @@ -1,7 +1,7 @@ header { width: 100%; font-family: 'Inter Subset', var(--sans-serif-font); -} +} .page-header { margin: 4rem 0px 1rem 0px; @@ -81,23 +81,26 @@ header { list-style-type: none; } } - .language-switcher { display: flex; justify-content: center; align-items: center; margin-right: 0.5rem; margin-left: 0.5rem; -} -.language-switcher-icon { - -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' d='M1 12a11 11 90 0 0 22 0 11 11 90 0 0-22 0m1-4h20M2 16h20M11 1a21 21 90 0 0 0 22m2-22a21 21 90 0 1 0 22'/%3E%3C/svg%3E%0A"); - position: relative; - align-self: center; - cursor: pointer; - background: var(--text-color); - width: 1rem; - height: 1rem; + .language-switcher-icon { + -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' d='M1 12a11 11 90 0 0 22 0 11 11 90 0 0-22 0m1-4h20M2 16h20M11 1a21 21 90 0 0 0 22m2-22a21 21 90 0 1 0 22'/%3E%3C/svg%3E%0A"); + position: relative; + align-self: center; + cursor: pointer; + background: var(--text-color); + width: 1rem; + height: 1rem; + + &:hover { + background: var(--meta-color); + } + } } .dropdown { @@ -105,27 +108,36 @@ header { position: relative; z-index: 1; font-size: 0.8rem; -} - -.dropdown-content { - display: none; - position: absolute; - left: 50%; - transform: translateX(-50%); - z-index: 1; - background: var(--background-color); - padding-right: 0.5rem; - padding-left: 0.5rem; - text-align: center; - white-space: nowrap; - a { + &:hover .dropdown-content, + &:focus-within .dropdown-content { display: block; } -} -.dropdown:hover .dropdown-content { - display: block; + summary { + list-style: none; + + &::-webkit-details-marker { + display: none; + } + } + + .dropdown-content { + display: none; + position: absolute; + left: 50%; + transform: translateX(-50%); + z-index: 1; + background: var(--background-color); + padding-right: 0.5rem; + padding-left: 0.5rem; + text-align: center; + white-space: nowrap; + + a { + display: block; + } + } } @media only screen and (max-width: 1000px) { diff --git a/sass/parts/_misc.scss b/sass/parts/_misc.scss index f657276..fbe7941 100644 --- a/sass/parts/_misc.scss +++ b/sass/parts/_misc.scss @@ -150,3 +150,7 @@ hr { #page-content { margin-top: 4vmin; } + +.hidden { + display: none; +} diff --git a/sass/parts/_theme-switch.scss b/sass/parts/_theme-switch.scss index a660970..195df29 100644 --- a/sass/parts/_theme-switch.scss +++ b/sass/parts/_theme-switch.scss @@ -7,4 +7,7 @@ background: var(--text-color); width: 1rem; height: 1rem; + &:hover { + background: var(--meta-color); + } } diff --git a/static/js/copyCodeToClipboard.js b/static/js/copyCodeToClipboard.js index ba98ba3..fde8776 100644 --- a/static/js/copyCodeToClipboard.js +++ b/static/js/copyCodeToClipboard.js @@ -1,6 +1,13 @@ +const copiedText = document.getElementById('copy-success').textContent; +const initCopyText = document.getElementById('copy-init').textContent; + const changeIcon = (copyDiv, className) => { copyDiv.classList.add(className); - setTimeout(() => copyDiv.classList.remove(className), 2500); + copyDiv.setAttribute("aria-label", copiedText); + setTimeout(() => { + copyDiv.classList.remove(className); + copyDiv.setAttribute("aria-label", initCopyText); + }, 2500); }; const addCopyEventListenerToDiv = (copyDiv, block) => { @@ -31,6 +38,9 @@ const getTableCode = (block) => { document.querySelectorAll("pre").forEach((block) => { const copyDiv = document.createElement("div"); + copyDiv.setAttribute("role", "button"); + copyDiv.setAttribute("aria-label", initCopyText); + copyDiv.setAttribute("title", initCopyText); copyDiv.className = "copy-code"; block.prepend(copyDiv); addCopyEventListenerToDiv(copyDiv, block); diff --git a/static/js/copyCodeToClipboard.min.js b/static/js/copyCodeToClipboard.min.js index 9d144b1..f27628a 100644 --- a/static/js/copyCodeToClipboard.min.js +++ b/static/js/copyCodeToClipboard.min.js @@ -1 +1 @@ -const changeIcon=(e,t)=>{e.classList.add(t),setTimeout(()=>e.classList.remove(t),2500)},addCopyEventListenerToDiv=(e,t)=>{e.addEventListener("click",()=>copyCodeAndChangeIcon(e,t))},copyCodeAndChangeIcon=async(e,t)=>{let o=t.querySelector("table")?getTableCode(t):getNonTableCode(t);try{await navigator.clipboard.writeText(o),changeIcon(e,"checked")}catch(c){changeIcon(e,"error")}},getNonTableCode=e=>[...e.querySelectorAll("code")].map(e=>e.textContent).join(""),getTableCode=e=>[...e.querySelectorAll("tr")].map(e=>e.querySelector("td:last-child")?.innerText??"").join("");document.querySelectorAll("pre").forEach(e=>{let t=document.createElement("div");t.className="copy-code",e.prepend(t),addCopyEventListenerToDiv(t,e)}); +const copiedText=document.getElementById("copy-success").textContent,initCopyText=document.getElementById("copy-init").textContent,changeIcon=(e,t)=>{e.classList.add(t),e.setAttribute("aria-label",copiedText),setTimeout(()=>{e.classList.remove(t),e.setAttribute("aria-label",initCopyText)},2500)},addCopyEventListenerToDiv=(e,t)=>{e.addEventListener("click",()=>copyCodeAndChangeIcon(e,t))},copyCodeAndChangeIcon=async(t,e)=>{e=(e.querySelector("table")?getTableCode:getNonTableCode)(e);try{await navigator.clipboard.writeText(e),changeIcon(t,"checked")}catch(e){changeIcon(t,"error")}},getNonTableCode=e=>[...e.querySelectorAll("code")].map(e=>e.textContent).join(""),getTableCode=e=>[...e.querySelectorAll("tr")].map(e=>e.querySelector("td:last-child")?.innerText??"").join("");document.querySelectorAll("pre").forEach(e=>{var t=document.createElement("div");t.setAttribute("role","button"),t.setAttribute("aria-label",initCopyText),t.setAttribute("title",initCopyText),t.className="copy-code",e.prepend(t),addCopyEventListenerToDiv(t,e)}); diff --git a/static/js/themeSwitcher.js b/static/js/themeSwitcher.js index a838696..608a6a9 100644 --- a/static/js/themeSwitcher.js +++ b/static/js/themeSwitcher.js @@ -8,6 +8,8 @@ let currentTheme = localStorage.getItem("theme") || document.documentElement.get function setTheme(theme, saveToLocalStorage = false) { document.documentElement.setAttribute("data-theme", theme); currentTheme = theme; + let togglePressed = theme === "dark" ? "true" : "false"; + themeSwitcher.setAttribute("aria-pressed", togglePressed); if (saveToLocalStorage) { localStorage.setItem("theme", theme); @@ -29,6 +31,10 @@ function switchTheme() { // Initialize the theme switcher button. themeSwitcher.addEventListener("click", switchTheme, false); +themeSwitcher.setAttribute("role", "button"); +themeSwitcher.setAttribute("aria-label", "Toggle dark mode"); +let togglePressed = currentTheme === "dark" ? "true" : "false"; +themeSwitcher.setAttribute("aria-pressed", togglePressed); // Update the theme based on system preference if the user hasn't manually changed the theme. window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", e => { diff --git a/static/js/themeSwitcher.min.js b/static/js/themeSwitcher.min.js index d700269..bb57a19 100644 --- a/static/js/themeSwitcher.min.js +++ b/static/js/themeSwitcher.min.js @@ -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),currentTheme=e,t&&localStorage.setItem("theme",e);t=new CustomEvent("themeChanged",{detail:{theme:e}});window.dispatchEvent(t)}function switchTheme(){setTheme("dark"===currentTheme?"light":"dark",!0)}themeSwitcher.addEventListener("click",switchTheme,!1),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);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")}); diff --git a/templates/partials/extra_features.html b/templates/partials/extra_features.html index 6fe198b..620d571 100644 --- a/templates/partials/extra_features.html +++ b/templates/partials/extra_features.html @@ -37,6 +37,13 @@ {# Add copy button to code blocks #} {%- if macros_settings::evaluate_setting_priority(setting="copy_button", page=page, default_global_value=true) == "true" -%} + {#- Add hidden HTML elements with the translated strings for the button's interactions -#} + + {%- endif -%} diff --git a/templates/partials/language_switcher.html b/templates/partials/language_switcher.html index cd4d3e8..3283f2e 100644 --- a/templates/partials/language_switcher.html +++ b/templates/partials/language_switcher.html @@ -1,43 +1,38 @@
  • -
    -
    - -
    +
    + +
    +     + -
    +
    • diff --git a/templates/partials/nav.html b/templates/partials/nav.html index 8057404..f8a5cd1 100644 --- a/templates/partials/nav.html +++ b/templates/partials/nav.html @@ -26,9 +26,7 @@ {# Theme switcher #} {%- if config.extra.theme_switcher and config.extra.theme_switcher == true -%} -
  • -
    -
    • + {%- include "partials/theme_switcher.html" -%} {%- endif -%} diff --git a/templates/partials/theme_switcher.html b/templates/partials/theme_switcher.html new file mode 100644 index 0000000..784b848 --- /dev/null +++ b/templates/partials/theme_switcher.html @@ -0,0 +1,18 @@ +
  • + {#- Create the localised strings for the title and aria-label attributes -#} + {%- set toggle_str = macros_translate::translate(key='toggle_mode', default='Toggle $MODE mode', language_strings=language_strings) -%} + {%- set dark_str = macros_translate::translate(key='dark', default='dark', language_strings=language_strings) -%} + {%- set light_str = macros_translate::translate(key='light', default='light', language_strings=language_strings) -%} + + {%- set combined_mode_str = dark_str ~ "/" ~ light_str -%} + {%- set title_label = toggle_str | replace(from="$MODE", to=combined_mode_str) -%} + {%- set aria_label = 'Toggle ' ~ dark_str ~ ' mode' -%} + +
    +
    +