From 534daff81a4f420fca0efb1bd72269c4bb79e4b9 Mon Sep 17 00:00:00 2001 From: Peter Molnar Date: Thu, 15 Nov 2018 14:06:35 +0000 Subject: [PATCH] themeswitcher v3 --- templates/base.j2.html | 52 ++++++++++++++---------------- templates/style.css | 39 +++++++++++++++++------ templates/themeswitcher.js | 65 ++++++++++++++++++++++---------------- 3 files changed, 91 insertions(+), 65 deletions(-) diff --git a/templates/base.j2.html b/templates/base.j2.html index b1762e7..adcec29 100644 --- a/templates/base.j2.html +++ b/templates/base.j2.html @@ -4,6 +4,7 @@ {% block title %}{{ post.title }} - {{ site.domain }}{% endblock %} + {% block licence %}{% endblock %} {% for key, value in meta.items() %} @@ -19,26 +20,6 @@ - @@ -81,17 +62,27 @@
+ +
- - - -
+
@@ -422,6 +414,10 @@

+ + {% include 'symbols.svg' %} {% block prism %} diff --git a/templates/style.css b/templates/style.css index 87114b1..7dfccf7 100644 --- a/templates/style.css +++ b/templates/style.css @@ -17,6 +17,7 @@ body { 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; +} + +.theme { + margin: 0 0.3em; + display: none; + color: #ccc; +} + +.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; } -label { - display: none; -} - nav ul { list-style-type: none; margin: 0; @@ -223,11 +244,9 @@ body > header form { } body > header p { - margin: 1em 0 0 0; font-size: 0.8em; } - body > svg, body > script { display: none; @@ -337,4 +356,4 @@ body > footer > ul >li > a > span { body > header a svg { display: inline-block; } -} +} \ No newline at end of file diff --git a/templates/themeswitcher.js b/templates/themeswitcher.js index 18291a3..9772309 100644 --- a/templates/themeswitcher.js +++ b/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'; }