79 lines
2.3 KiB
JavaScript
79 lines
2.3 KiB
JavaScript
|
var DEFAULT_THEME = 'dark';
|
||
|
|
var ALT_THEME = 'light';
|
||
|
|
var STORAGE_KEY = 'theme';
|
||
|
|
var colorscheme = document.getElementsByName('colorscheme');
|
||
|
|
|
||
|
|
function indicateTheme(mode) {
|
||
|
|
for(var i = colorscheme.length; i--; ) {
|
||
|
|
if(colorscheme[i].value == mode) {
|
||
|
|
colorscheme[i].checked = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function applyTheme(mode) {
|
||
|
|
var st = document.getElementById('css_alt');
|
||
|
|
if (mode == ALT_THEME) {
|
||
|
|
st.setAttribute('media', 'all');
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
st.setAttribute('media', 'speech');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function setTheme(e) {
|
||
|
|
var mode = e.target.value;
|
||
|
|
var mql = window.matchMedia('(prefers-color-scheme: ' + ALT_THEME + ')');
|
||
|
|
/* user wants == mql match => remove storage */
|
||
|
|
if ((mode == DEFAULT_THEME && !mql.matches) || (mode == ALT_THEME && mql.matches)) {
|
||
|
|
localStorage.removeItem(STORAGE_KEY);
|
||
|
|
}
|
||
|
|
/* avoid needing cookie banners; besides, messages like this would make people understand that clicking on a thing
|
||
|
|
might do something to their computer */
|
||
|
|
else {
|
||
|
|
if(confirm("I\'ll need to store your theme of choice in your browser, in a place called localStorage.\n\nAre you OK with this?")) {
|
||
|
|
localStorage.setItem(STORAGE_KEY, mode);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
autoTheme(mql);
|
||
|
|
}
|
||
|
|
|
||
|
|
function autoTheme(e) {
|
||
|
|
var mode = DEFAULT_THEME;
|
||
|
|
try {
|
||
|
|
var current = localStorage.getItem(STORAGE_KEY);
|
||
|
|
} catch(e) {
|
||
|
|
var current = DEFAULT_THEME;
|
||
|
|
}
|
||
|
|
if ( current != null) {
|
||
|
|
mode = current;
|
||
|
|
}
|
||
|
|
else if (e.matches) {
|
||
|
|
mode = ALT_THEME;
|
||
|
|
}
|
||
|
|
applyTheme(mode);
|
||
|
|
indicateTheme(mode);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* at 2019-01 this only works in Dev Safari on Mojave */
|
||
|
|
var mql = window.matchMedia('(prefers-color-scheme: ' + ALT_THEME + ')');
|
||
|
|
autoTheme(mql);
|
||
|
|
mql.addListener(autoTheme);
|
||
|
|
|
||
|
|
/* only show controls if localstorage is available */
|
||
|
|
var test = 'ping';
|
||
|
|
try {
|
||
|
|
localStorage.setItem(test, test);
|
||
|
|
localStorage.removeItem(test);
|
||
|
|
/* add a listener for the controle */
|
||
|
|
for(var i = colorscheme.length; i--; ) {
|
||
|
|
colorscheme[i].onclick = setTheme;
|
||
|
|
}
|
||
|
|
/* show the control */
|
||
|
|
var themeforms = document.getElementsByClassName(STORAGE_KEY);
|
||
|
|
for(var i = themeforms.length; i--; ) {
|
||
|
|
themeforms[i].style.display = 'inline-block';
|
||
|
|
}
|
||
|
|
} catch(e) {
|
||
|
|
console.log('localStorage is not available, manual theme switching is disabled');
|
||
|
|
}
|