Merge pull request #196 from writeas/dark-mode-pad

Dark mode pad
This commit is contained in:
Matt Baer 2020-08-11 09:30:07 -04:00 committed by GitHub
commit e37bec6aa1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -68,26 +68,47 @@
<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);
}
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 $btnEraseEdit = H.getEl('edited-elsewhere'); var $btnEraseEdit = H.getEl('edited-elsewhere');