templates/themeswitcher.js (view raw)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
var DEFAULT_THEME = 'dark';
var ALT_THEME = 'light';
var STORAGE_KEY = 'theme';
var colorscheme = document.getElementsByName('colorscheme');
function setTheme(e) {
var mode = e.target.value;
if (mode == 'auto') {
localStorage.removeItem(STORAGE_KEY);
}
else {
localStorage.setItem(STORAGE_KEY, mode);
}
applyTheme(mode);
}
function applyTheme(mode) {
var st = document.getElementById('css_alt');
if (mode == ALT_THEME) {
st.setAttribute('media', 'all');
}
else {
st.setAttribute('media', 'speech');
}
for(var i = colorscheme.length; i--; ) {
if(colorscheme[i].value == mode) {
colorscheme[i].checked = true;
}
}
}
function mqlTheme(e) {
if (localStorage.getItem(STORAGE_KEY) != null) {
return false;
}
if (e.matches) {
applyTheme(ALT_THEME);
}
else {
applyTheme(DEFAULT_THEME);
}
}
var current = localStorage.getItem(STORAGE_KEY);
if (current == null) { current = 'auto'; }
applyTheme(current);
var mql = window.matchMedia('(prefers-color-scheme: ' + ALT_THEME + ')');
mql.addListener(mqlTheme);
for(var i = colorscheme.length; i--; ) {
colorscheme[i].onclick = setTheme;
}
var themeforms = document.getElementsByClassName(STORAGE_KEY);
for(var i = themeforms.length; i--; ) {
themeforms[i].style.display = 'inline-block';
}
|