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

_.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>

css/felexdev-themes.css

@@ -52,6 +52,14 @@
     --text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     --font-family: 'Arial', sans-serif;
 }
+.flxd-tm-color-scheme-old-terminal {
+    --bg-color: #222;
+    --text-color: #9d9;
+    --accent-color: #40a9ff;
+    --border-color: #444;
+    --text-shadow: 0px 0px 10px rgba(255, 255, 0, 0.9);
+    --font-family: Monospace;
+}
 
 body {
     margin: auto;
@@ -100,11 +108,5 @@ a:hover, a:focus {
     filter: drop-shadow(var(--text-shadow));
     cursor: pointer;
     background-color: rgba(150, 150, 150, 0.3);
-    transform:rotate(-360deg);
+    opacity: 0.6;
-    transition:transform 2s ease;
-}
-
-#flxd-tm-btn-toggle:hover, #flxd-tm-btn-toggle:focus {
-    transform:rotate(360deg);
-    transition:transform 2s ease;
 }

html/head.html

@@ -1,2 +1,2 @@
     <link rel="stylesheet" href="css/felexdev-themes.css">
-    <script src="js/felexdev-theme-manager-minified.js"></script>
+    <script src="js/felexdev-theme-manager.js"></script>

js/felexdev-theme-manager-minified.js

@@ -1,8 +0,0 @@
-/**
- * @file felexdev-theme-manager.js
- * @description Минимальная версия
- * @version 0.0.1
- * @author felex67 (admin@felexdev.ru)
- * @license Apache2.0
- */
-class ThemeManager {static #c={bid:'btn-toggle',btid:0,gpfx:'flxd-tm',tpfx:'color-scheme',svg:'<svg width="100%" height="100%" viewBox="0 0 135.46666 135.46667"version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><path id="path1" style="opacity:100%;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>',mrqd:window.matchMedia('(prefers-color-scheme: dark)'),rqdh:null};static #cl=document.documentElement.classList;static #b=document.createElement('div');static #i=0;static #t=[];static toggle=()=>{this.#s((this.#i+1)%this.#t.length);};static #bclk=(e)=>{if(e.type==='click'||e.key==='Enter'||e.key===' ')this.#s((this.#i+1)%2)};static #stch=(e)=>{if(e.matches!=this.#i)this.#s(e.matches+0);};static{let c=this.#c;let b=this.#b;c.gpfx=c.gpfx+'-';c.tpfx=`${c.gpfx}${c.tpfx}-`;b.id=c.bid=c.gpfx+c.bid;b.tabIndex=c.btid;b.innerHTML=c.svg;b.setAttribute('aria-label', 'toggle color scheme');b.addEventListener('click',this.#bclk);b.addEventListener('keydown',this.#bclk);c.rqdh=c.mrqd.addEventListener('change',this.#stch);};static #at=(n)=>{this.#t.push({n:n,s:this.#c.tpfx+n});};static #s(i){if(i==this.#i)return;let m=this;m.#cl.replace(m.#t[m.#i].s,m.#t[i].s);m.#sv(m.#i=i);m.#b.setAttribute('aria-current',m.#t[i].n);};static #sv=(()=>{let s=()=>{console.error(this.#c.gpfx+'#sv: Невозможно сохранить тему, хранилище недоступно.');};try{this.#i=parseInt(localStorage.getItem(this.#c.tpfx))||0;s=()=>{try{localStorage.setItem(this.#c.tpfx,this.#i);}catch(e){console.error(e);}};}catch(e){console.error(this.#c.gpfx+'#sv-IIFE: localStorage не доступен.');}return s;})();static{let i=this.#i;let t=this.#t;this.#at('light');this.#at('dark');if(i>=t.length||i<0){console.error(`${this.#c.gpfx}bottom-static: В хранилище сохранён не валидный индекс '${i}'. Сброс на системную тему`);this.#i=this.#c.mrqd.matches+0;}this.#cl.add(t[i].s);this.#b.setAttribute('aria-current',t[i].n);};static set=(name)=>{let i=-1;for(let j=0;j<this.#t.length;j++){if(this.#t[j].n===name){i=j;break;}}if(i==-1){throw new Error(`Темы '${name}' не существует!.`);}this.#s(i);};static #_=()=>{window.removeEventListener('DOMContentLoaded',this.#_);document.body.appendChild(this.#b);};static {if(!document.body)window.addEventListener('DOMContentLoaded',this.#_);};};

test.html

@@ -1,10 +1,11 @@
 <!DOCTYPE html>
 <html lang="ru-RU" dir="ltr">
   <head>
+    <meta name="generator" content="Hugo 0.147.9">
+    <script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
     <title>Подопытный</title>
-    
     <link rel="stylesheet" href="css/felexdev-themes.css">
     <script src="js/felexdev-theme-manager.js"></script>
   </head>