petermolnar/themeswitcher
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Browse source
This commit is contained in:
Peter Molnar 2019-04-29 08:28:18 +00:00 committed by GitHub
parent f5818864c5
commit f2ba6cde56
3 changed files with 68 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
themeswitcher.css
View file

@ -1,12 +1,21 @@
.theme input + label {
border-bottom: 3px solid transparent;
}
.theme input:checked + label {
border-bottom: 3px solid #ccc;
}
.theme,
.theme input { .theme input {
display: none; 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;
} }

27
themeswitcher.html
View file

@ -7,17 +7,16 @@
</style> </style>
<!-- include this into the <body> to have controls --> <!-- example of container and sibling that will auto-include the theme form -->
<form class="theme" aria-hidden="true"> <div id="header-forms">
<span> <!-- theme form will be inserted here if the selectors in the JS code below are unmodified -->
🔆 <form id="search" role="search" method="get" action="/search/">
</span> <label for="qsub">
<span> <input type="submit" value="search" id="qsub" name="qsub" />
<input name="colorscheme" value="dark" id="darkscheme" type="radio"> <svg width="16" height="16">
<label for="darkscheme">dark</label> <use xlink:href="#icon-search"></use>
</span> </svg>
<span> </label>
<input name="colorscheme" value="light" id="lightscheme" type="radio"> <input type="search" placeholder="search..." value="" name="q" id="q" title="Search for:" />
<label for="lightscheme">light</label> </form>
</span> </div>
</form>

55
themeswitcher.js
View file

@ -1,7 +1,10 @@
var DEFAULT_THEME = 'dark'; var DEFAULT_THEME = 'dark';
var ALT_THEME = 'light'; var ALT_THEME = 'light';
var STORAGE_KEY = 'theme'; 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) { function indicateTheme(mode) {
for(var i = colorscheme.length; i--; ) { for(var i = colorscheme.length; i--; ) {
@ -28,10 +31,8 @@ function setTheme(e) {
if ((mode == DEFAULT_THEME && !mql.matches) || (mode == ALT_THEME && mql.matches)) { if ((mode == DEFAULT_THEME && !mql.matches) || (mode == ALT_THEME && mql.matches)) {
localStorage.removeItem(STORAGE_KEY); 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 { 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); localStorage.setItem(STORAGE_KEY, mode);
} }
} }
@ -55,25 +56,43 @@ function autoTheme(e) {
indicateTheme(mode); indicateTheme(mode);
} }
/* at 2019-01 this only works in Dev Safari on Mojave */ function doTheme() {
var mql = window.matchMedia('(prefers-color-scheme: ' + ALT_THEME + ')'); var themeform = document.createElement('form');
autoTheme(mql); themeform.className = "theme";
mql.addListener(autoTheme); themeform.innerHTML='<svg width="16" height="16"><use xlink:href="#icon-contrast"></use></svg>';
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'; var test = 'ping';
try { try {
localStorage.setItem(test, test); localStorage.setItem(test, test);
localStorage.removeItem(test); localStorage.removeItem(test);
/* add a listener for the controle */ doTheme();
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';
}
} catch(e) { } catch(e) {
console.log('localStorage is not available, manual theme switching is disabled'); console.log('localStorage is not available, manual theme switching is disabled');
} }