From f2ba6cde56b3f567694d99a6794dea3a6be4c4ca Mon Sep 17 00:00:00 2001 From: Peter Molnar Date: Mon, 29 Apr 2019 08:28:18 +0000 Subject: [PATCH] --- themeswitcher.css | 27 +++++++++++++++-------- themeswitcher.html | 27 +++++++++++------------ themeswitcher.js | 55 +++++++++++++++++++++++++++++++--------------- 3 files changed, 68 insertions(+), 41 deletions(-) diff --git a/themeswitcher.css b/themeswitcher.css index d3659e6..6f818a6 100644 --- a/themeswitcher.css +++ b/themeswitcher.css @@ -1,12 +1,21 @@ -.theme input + label { - border-bottom: 3px solid transparent; -} - -.theme input:checked + label { - border-bottom: 3px solid #ccc; -} - -.theme, .theme input { display: none; +} + +.theme { + margin: 0 0.3em 0 0; +} + +.theme input + label { + color: #f90; + cursor: pointer; + border-bottom: 3px solid transparent; + padding-bottom: 0.1em; + margin-left:0.6em; +} + +.theme input:hover + label, +.theme input:checked + label { + border-bottom: 3px solid #eee; + color: #eee; } \ No newline at end of file diff --git a/themeswitcher.html b/themeswitcher.html index 0400939..caac446 100644 --- a/themeswitcher.html +++ b/themeswitcher.html @@ -7,17 +7,16 @@ - - \ No newline at end of file + +
+ + +
\ No newline at end of file diff --git a/themeswitcher.js b/themeswitcher.js index 96ed7d8..b06453d 100644 --- a/themeswitcher.js +++ b/themeswitcher.js @@ -1,7 +1,10 @@ var DEFAULT_THEME = 'dark'; var ALT_THEME = 'light'; var STORAGE_KEY = 'theme'; -var colorscheme = document.getElementsByName('colorscheme'); +var theme_container = document.getElementById("header-forms"); +var theme_insbefore = document.getElementById("search"); +var colorscheme = []; +var mql = window.matchMedia('(prefers-color-scheme: ' + ALT_THEME + ')'); function indicateTheme(mode) { for(var i = colorscheme.length; i--; ) { @@ -28,10 +31,8 @@ function setTheme(e) { if ((mode == DEFAULT_THEME && !mql.matches) || (mode == ALT_THEME && mql.matches)) { localStorage.removeItem(STORAGE_KEY); } - /* avoid needing cookie banners; besides, messages like this would make people understand that clicking on a thing - might do something to their computer */ else { - if(confirm("I\'ll need to store your theme of choice in your browser, in a place called localStorage.\n\nAre you OK with this?")) { + if(confirm("I\'ll need to store your choice in your browser, in a place called localStorage.\n\nAre you OK with this?")) { localStorage.setItem(STORAGE_KEY, mode); } } @@ -55,25 +56,43 @@ function autoTheme(e) { indicateTheme(mode); } -/* at 2019-01 this only works in Dev Safari on Mojave */ -var mql = window.matchMedia('(prefers-color-scheme: ' + ALT_THEME + ')'); -autoTheme(mql); -mql.addListener(autoTheme); +function doTheme() { + var themeform = document.createElement('form'); + themeform.className = "theme"; + themeform.innerHTML=''; + theme_container.insertBefore(themeform, theme_insbefore); + var schemes = ["dark", "light"]; + for (var i = 0; i < schemes.length; i++) { + var span = document.createElement('span'); + themeform.appendChild(span); + + var input = document.createElement('input'); + input.name = 'colorscheme'; + input.type = 'radio'; + input.id = schemes[i] + input.name; + input.value = schemes[i]; + span.appendChild(input); + + var label = document.createElement('label'); + label.htmlFor = input.id; + label.innerHTML = schemes[i]; + span.appendChild(label); + } + + colorscheme = document.getElementsByName('colorscheme'); + for(var i = colorscheme.length; i--; ) { + colorscheme[i].onclick = setTheme; + } + + autoTheme(mql); + mql.addListener(autoTheme); +} -/* only show controls if localstorage is available */ var test = 'ping'; try { localStorage.setItem(test, test); localStorage.removeItem(test); - /* add a listener for the controle */ - for(var i = colorscheme.length; i--; ) { - colorscheme[i].onclick = setTheme; - } - /* show the control */ - var themeforms = document.getElementsByClassName(STORAGE_KEY); - for(var i = themeforms.length; i--; ) { - themeforms[i].style.display = 'inline-block'; - } + doTheme(); } catch(e) { console.log('localStorage is not available, manual theme switching is disabled'); } \ No newline at end of file