Merge pull request #382 from nr1q/master

Add dark theme toggle button

css/style.css

@@ -371,3 +371,39 @@ code {
   font-style: italic;
   text-align: right;
 }
+
+/* Theme Switcher
+ * ---------------------------------
+ * */
+
+.themeSwitcher {
+    appearance: none;
+    background: none;
+    border: none;
+    margin-bottom: 1.25em;
+    font: inherit;
+    font-size: 0.8em;
+    font-style: italic;
+    color: #555;
+    cursor: pointer;
+}
+
+[data-theme='dark'] {
+    filter: invert(1);
+    background-color: #000;
+}
+
+[data-theme='dark'] img,
+[data-theme='dark'] iframe,
+[data-theme='dark'] canvas:not([data-fragment-url$='moon.frag']) {
+    filter: invert(1);
+}
+
+[data-theme='dark'] img {
+    opacity: 0.75;
+}
+
+[data-theme='dark'] img:hover {
+    opacity: 1;
+}
+

src/main.js

@@ -277,11 +277,35 @@ function nextPage() {
 	window.location.href =  url;
 }
 
+function enableThemeSwitcher() {
+    function setTheme(theme) {
+        document.body.dataset.theme = currentTheme;
+        switcher.innerText = 'Turn ' + (theme === 'light' ? 'off' : 'on') + ' the lights';
+    }
+
+    var switcher = document.createElement('button');
+    switcher.setAttribute('type', 'button');
+    switcher.classList.add('themeSwitcher');
+    switcher.addEventListener('click', function(event) {
+        currentTheme = currentTheme === 'light' ? 'dark' : 'light';
+        localStorage.setItem('theme', currentTheme);
+        setTheme(currentTheme);
+    } );
+
+    var className = window.location.pathname === '/' ? 'toc-header' : 'header';
+    var header = document.getElementsByClassName(className)[0];
+    header.insertAdjacentElement('beforeend', switcher);
+
+    var currentTheme = localStorage.getItem('theme') || 'light';
+    setTheme(currentTheme);
+}
+
 window.addEventListener("load", function(){
     window.scrollTo(0, 0);
     styleCodeBlocks();
     loadGlslElements();
     captionizeImages();
+    enableThemeSwitcher();
     window.scrollTo(0, 0);
     setTimeout(function () {
          window.scrollTo(0, 0);