makary/writefreely
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
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 • committed by Michael Demetriou
parent 44baec94aa
commit aaab517839
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 src="/js/h.js"></script>
<script> <script>
function toggleTheme() { function toggleTheme() {
var btns = Array.prototype.slice.call(document.getElementById('tools').querySelectorAll('a img'));
var newTheme = '';
if (document.body.classList.contains('light')) { if (document.body.classList.contains('light')) {
newTheme = 'dark'; setTheme('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');
}
} else { } else {
newTheme = 'light'; setTheme('light');
document.body.className = document.body.className.replace(/(?:^|\s)dark(?!\S)/g, newTheme); }
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++) { 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('@2x.png', '_dark@2x.png');
} }
} }
} else {
for (var i=0; i<btns.length; i++) {
btns[i].src = btns[i].src.replace('_dark@2x.png', '@2x.png');
}
}
H.set('padTheme', newTheme); 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 $writer = H.getEl('writer');
var $btnPublish = H.getEl('publish'); var $btnPublish = H.getEl('publish');
var $wc = H.getEl("wc"); var $wc = H.getEl("wc");