21 lines
1.3 KiB
HTML
21 lines
1.3 KiB
HTML
<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> |