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 {
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>
<!-- include this into the <body> to have controls -->
<form class="theme" aria-hidden="true">
<span>
🔆
</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>
<!-- example of container and sibling that will auto-include the theme form -->
<div id="header-forms">
<!-- 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/">
<label for="qsub">
<input type="submit" value="search" id="qsub" name="qsub" />
<svg width="16" height="16">
<use xlink:href="#icon-search"></use>
</svg>
</label>
<input type="search" placeholder="search..." value="" name="q" id="q" title="Search for:" />
</form>
</div>

55
themeswitcher.js
View file

@ -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='<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';
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');
}