Suggestion: Support for Dark Mode #98
Description
I assume this repo doesn't get checked much given the age of issues and the last activity, but just in case — Basically what the title says. Similar to its influence, explainshell.com, obviously. I assume this would be fairly trivial to implement.
Or, even do something like what Notepad++ does, i.e. programatically invert the colors (if it doens't look terrible):
HTML
<html>
<head>
<!-- etc -->
<style id="inverter" media="screen">html { filter: invert(100%) }
* { background-color: inherit }
img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%); background-color:#000 }
</style>
</head>
<body>
<!-- main content -->
<label for="themer">
dark theme: <input type="checkbox" id="themer" class="vh">
<span aria-hidden="true"></span>
</label>
</body>
</html>JavaScript
/* Switch and persist theme */
(function () {
function CSSSupported (property, value) {
var prop = property + ':',
el = document.createElement('test'),
mStyle = el.style;
el.style.cssText = prop + value;
return mStyle[property];
}
var checkbox = document.getElementById('themer');
var inverter = document.getElementById('inverter');
if (!CSSSupported('filter', 'invert(100%)')) {
checkbox.parentNode.hidden = true;
return;
}
function darkTheme(media) {
inverter.setAttribute('media', media);
inverter.textContent = inverter.textContent.trim();
localStorage.setItem('darkTheme', media);
}
checkbox.addEventListener('change', function () {
darkTheme(this.checked ? 'screen' : 'none');
});
window.addEventListener('DOMContentLoaded', function () {
if ('filter' in document.body.style) {
if (localStorage.getItem('darkTheme') === 'screen') {
checkbox.click();
}
}
});
}());