themeswitcher v3
Peter Molnar hello@petermolnar.eu
Thu, 15 Nov 2018 14:06:35 +0000
3 files changed,
90 insertions(+),
64 deletions(-)
M
templates/base.j2.html
→
templates/base.j2.html
@@ -4,6 +4,7 @@ <head>
<title>{% block title %}{{ post.title }} - {{ site.domain }}{% endblock %}</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1" /> + <meta name="supported-color-schemes" content="dark light"> <link rel="icon" href="{{ site.url }}/favicon.ico" /> {% block licence %}{% endblock %} {% for key, value in meta.items() %}@@ -19,26 +20,6 @@ </style>
<style media="print"> {% include 'style-print.css' %} </style> - <script> - var current = localStorage.getItem("stylesheet"); - if (current != null) { - document.querySelector('#css_alt').setAttribute("media", current); - } - else if( ! window.matchMedia("(prefers-color-scheme: dark)").matches) { - toggleStylesheet(this); - } - - function toggleStylesheet(trigger){ - var setto = 'all'; - var e = document.querySelector('#css_alt'); - if (e.getAttribute("media") == 'all') { - setto = 'speech'; - } - localStorage.setItem("stylesheet", setto); - e.setAttribute("media", setto); - return false; - } - </script> </head> <body itemscope="" itemtype="http://schema.org/Blog http://schema.org/WebPage">@@ -81,17 +62,27 @@ </ul>
</nav> <div> + <form class="theme" aria-hidden="true"> + <svg width="16" height="16"> + <use xlink:href="#icon-contrast"></use> + </svg> + <span> + <input name="colorscheme" value="auto" id="autoscheme" type="radio"> + <label for="autoscheme">auto</label> + </span> + <span> + <input name="colorscheme" value="dark" id="darkscheme" type="radio"> + <label for="darkscheme">dark</label> + </span> + <span> + <input name="colorscheme" value="light" id="lightscheme" type="radio"> + <label for="lightscheme">light</label> + </span> + </form> + <form role="search" method="get" action="{{ site.url }}/search.php"> - <label for="q">Search</label> <input type="search" placeholder="search..." value="" name="q" id="q" title="Search for:" /> <input type="submit" value="➡" /> - - <label for="contrast">Toggle website contrast</label> - <button title="toggle website contrast" id="contrast" name="contrast" onclick="return toggleStylesheet(this)"> - <svg width="16" height="16"> - <use xlink:href="#icon-contrast"></use> - </svg> - </button> </form> <p class="follow">@@ -102,6 +93,7 @@ </svg>
follow </a> </p> + </div> </header>@@ -421,6 +413,10 @@ Member of <a href="https://xn--sr8hvo.ws">IndieWeb Webring</a>
<a href="https://xn--sr8hvo.ws/🇻🇮📢/next">→</a> </p> </footer> + +<script> +{% include 'themeswitcher.js' %} +</script> {% include 'symbols.svg' %}
M
templates/style.css
→
templates/style.css
@@ -17,6 +17,7 @@ color: #ccc;
background-color: #222; font-size: 100%; line-height: 1.3em; + transition: all 0.2s; } svg {@@ -123,24 +124,44 @@ li p {
margin: 0; } -input, button { +input, button, label { border: none; color: #ccc; background-color: transparent; + vertical-align: middle; } -button svg { - transition: all 0.2s; +label { + font-weight: bold; + font-size: 0.8em; + cursor: pointer; + margin: 0 0.3em; } -input { - border-bottom: 3px solid #ccc; +.theme { + margin: 0 0.3em; + display: none; + color: #ccc; } -label { +.theme input { display: none; } +.theme input + label::before { + content: '\2718'; + display: inline-block; + padding: 0 0.1em; +} + +.theme input:checked + label::before { + content: '\2714'; +} + +input { + border-bottom: 3px solid #ccc; +} + nav ul { list-style-type: none; margin: 0;@@ -223,10 +244,8 @@ display: inline-block;
} body > header p { - margin: 1em 0 0 0; font-size: 0.8em; } - body > svg, body > script {@@ -337,4 +356,4 @@
body > header a svg { display: inline-block; } -} +}
M
templates/themeswitcher.js
→
templates/themeswitcher.js
@@ -1,47 +1,58 @@
var DEFAULT_THEME = 'dark'; var ALT_THEME = 'light'; +var STORAGE_KEY = 'theme'; +var colorscheme = document.getElementsByName('colorscheme'); -function setTheme(mode) { - var st = document.querySelector('#css_alt'); - var cb = document.querySelector('#contrast'); - if (mode == DEFAULT_THEME) { - st.setAttribute("media", "speech"); - cb.checked = true; +function setTheme(e) { + var mode = e.target.value; + if (mode == 'auto') { + localStorage.removeItem(STORAGE_KEY); } else { - st.setAttribute("media", "all"); - cb.checked = false; + localStorage.setItem(STORAGE_KEY, mode); } + applyTheme(mode); } -function toggleTheme(e) { - var mode = DEFAULT_THEME; - if (e.checked == false) { - mode = ALT_THEME; +function applyTheme(mode) { + var st = document.getElementById('css_alt'); + if (mode == ALT_THEME) { + st.setAttribute('media', 'all'); + } + else { + st.setAttribute('media', 'speech'); + } + + for(var i = colorscheme.length; i--; ) { + if(colorscheme[i].value == mode) { + colorscheme[i].checked = true; + } } - setTheme(mode); - localStorage.setItem("theme", mode); - return true; } function mqlTheme(e) { - console.log(e); + if (localStorage.getItem(STORAGE_KEY) != null) { + return false; + } if (e.matches) { - setTheme(ALT_THEME); + applyTheme(ALT_THEME); } else { - setTheme(DEFAULT_THEME); + applyTheme(DEFAULT_THEME); } } -var theme = localStorage.getItem("theme"); -if (theme != null) { - setTheme(theme); +var current = localStorage.getItem(STORAGE_KEY); +if (current == null) { current = 'auto'; } +applyTheme(current); + +var mql = window.matchMedia('(prefers-color-scheme: ' + ALT_THEME + ')'); +mql.addListener(mqlTheme); +for(var i = colorscheme.length; i--; ) { + colorscheme[i].onclick = setTheme; } -else { - var mql = window.matchMedia("(prefers-color-scheme: " + ALT_THEME + ")"); - if(mql.matches) { - setTheme(ALT_THEME); - } - mql.addListener(mqlTheme); + +var themeforms = document.getElementsByClassName(STORAGE_KEY); +for(var i = themeforms.length; i--; ) { + themeforms[i].style.display = 'inline-block'; }