Небольшой прогресс

_.html

@@ -0,0 +1,21 @@
+<div id="btn-toggle" role="button" aria-label="toggle color scheme. current: system" tabindex="0">
+    <svg width="100%" height="100%" viewBox="0 0 135.46666 135.46667" version="1.1" id="button-toggle-theme-svg" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+    <path id="path1" style="opacity:inherit;fill:currentColor;fill-opacity:1;stroke:#171717;stroke-width:0" d="M 67.777258,12.777515 A 55,55 0 0 0 12.777515,67.777258 55,55 0 0 0 67.777258,122.77752 55,55 0 0 0 122.77752,67.777258 55,55 0 0 0 67.777258,12.777515 Z m -0.128157,4.95577 V 117.73338 A 50,50 0 0 1 17.733285,67.733333 50,50 0 0 1 67.649101,17.733285 Z"/></svg>
+</div>
+<script type="text/JavaScript">
+    const dummy = document.getElementById('btn-dummy');
+    const btn = document.getElementById('btn-toggle');
+    const btnText = document.getElementById('btn-text');
+    
+    const themes = [{n: 'system', i: 'Sys'}, {n: 'light', i:'☀️'}, {n: 'dark', i: '🌙'}];
+    let index = 0;
+    function keydown(e) {
+        if (e.key == ' ' || e.key == 'Enter') {
+            btn.setAttribute('aria-label', 'toggle color scheme. current: ' + (themes[index = (index + 1) % themes.length].n));
+            btnText.innerHTML = themes[index].i;
+            dummy.focus();
+            btn.focus();
+        }
+    };
+    btn.addEventListener('keydown', keydown);
+</script>