tpl: defaults to dark theme if the OS says so

This commit is contained in:
Massimo Melina 2020-06-09 00:06:42 +02:00
parent de7f157390
commit e29e86c0bd

View File

@ -160,12 +160,17 @@ COMMENT with the ones above you can disable some features of the template. They
<i class="fa fa-globe"></i> {.!title.} <i class="fa fa-globe"></i> {.!title.}
<i class="fa fa-lightbulb" id="switch-theme"></i> <i class="fa fa-lightbulb" id="switch-theme"></i>
<script> <script>
$('body').addClass(getCookie('theme')) var themes = ['light','dark']
var themePostfix = '-theme'
var darkOs = window.matchMedia('(prefers-color-scheme:dark)').matches
var curTheme = getCookie('theme')
if (!themes.includes(curTheme))
curTheme = themes[+darkOs]
$('body').addClass(curTheme+themePostfix)
$(function(){ $(function(){
var titleBar = $('#title-bar') var titleBar = $('#title-bar')
var h = titleBar.height() var h = titleBar.height()
var on = true
var k = 'shrink' var k = 'shrink'
window.onscroll = function(){ window.onscroll = function(){
if (window.scrollY > h) if (window.scrollY > h)
@ -174,10 +179,11 @@ $(function(){
titleBar.removeClass(k) titleBar.removeClass(k)
} }
$('#switch-theme').click(function(ev) { $('#switch-theme').click(()=>{
var k = 'dark-theme'; $('body').toggleClass(curTheme+themePostfix);
$('body').toggleClass(k); curTheme = themes[themes.indexOf(curTheme) ^1]
setCookie('theme', $('body').hasClass(k) ? k : ''); $('body').toggleClass(curTheme+themePostfix);
setCookie('theme', curTheme);
}); });
}); });
</script> </script>