Writefreely
/
writefreely
mirror of https://github.com/writeas/writefreely
1
0
Fork 0
Code Issues Releases Wiki Activity

Handle default pad color mode according to `prefers-color-scheme` 

This just queries the browser whether `prefers-color-scheme` is set
and chooses dark mode if needed, and only if the user hasn't manually
set a scheme by pushing the button.
This commit is contained in:
Michael Demetriou 2019-06-25 22:33:58 +03:00
parent dfa98bcfc8
commit 8404f0896c
1 changed files with 31 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
templates/pad.tmpl
View File

@ -66,26 +66,46 @@
<script src="/js/h.js"></script>
<script>
function toggleTheme() {
var btns = Array.prototype.slice.call(document.getElementById('tools').querySelectorAll('a img'));
var newTheme = '';
if (document.body.classList.contains('light')) {
newTheme = 'dark';
document.body.className = document.body.className.replace(/(?:^|\s)light(?!\S)/g, newTheme);
for (var i=0; i<btns.length; i++) {
btns[i].src = btns[i].src.replace('_dark@2x.png', '@2x.png');
setTheme('dark');
} else {
setTheme('light');
}
H.set('padTheme', newTheme);
console.log('here');
}
function setTheme(newTheme){
document.body.classList.remove('light');
document.body.classList.remove('dark');
document.body.classList.add(newTheme);
var btns = Array.prototype.slice.call(document.getElementById('tools').querySelectorAll('a img'));
if (newTheme == 'light'){
// check if current theme is dark otherwise we'll get `_dark_dark@2x.png`
if (H.get('padTheme', 'auto') == 'dark'){
for (var i=0; i<btns.length; i++) {
btns[i].src = btns[i].src.replace('@2x.png', '_dark@2x.png');
}
}
} else {
newTheme = 'light';
document.body.className = document.body.className.replace(/(?:^|\s)dark(?!\S)/g, newTheme);
for (var i=0; i<btns.length; i++) {
btns[i].src = btns[i].src.replace('@2x.png', '_dark@2x.png');
btns[i].src = btns[i].src.replace('_dark@2x.png', '@2x.png');
}
}
H.set('padTheme', newTheme);
}
if (H.get('padTheme', 'light') != 'light') {
toggleTheme();
if (H.get('padTheme', 'auto') == 'light') {
setTheme('light');
} else if (H.get('padTheme', 'auto') == 'dark'){
setTheme('dark');
} else {
const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches
if (isDarkMode) setTheme('dark');
else setTheme('light');
}
var $writer = H.getEl('writer');
var $btnPublish = H.getEl('publish');
var $wc = H.getEl("wc");