\ 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