Added a light theme

index.html

@@ -897,6 +897,16 @@
     */
         overflow-y      : scroll;
     }
+
+    .visible
+    {
+        filter: brightness(100%);
+    }
+
+    .hidden
+    {
+        filter: brightness(50%);
+    }
 
     div.c
     {
@@ -952,6 +962,7 @@
     z-index         : 1;
 }
         </style>
+        <link rel="stylesheet" href="themes/light.css">
         <script>
 "use strict"; // Stupid hack to turn on type safety
 
@@ -1157,7 +1168,9 @@
     //  &#x2611; \u2611  Ballot Box with Check
     const FACE     = [ '-', '+' ], // Button collapse faces
           FAVS     = [ '\u2610', '\u2611' ],
-          COLLAPSE = [ 'Collapse', 'Expand' ];
+          COLLAPSE = [ 'Collapse', 'Expand' ],
+          MONO = [ 'Mono', 'Color' ],
+          LIGHT = [ 'Light', 'Dark' ];
 
 // Globals
     var gaAvailableRunes    = [], // saved
@@ -1576,14 +1589,22 @@
 
 function onColor( button )
 {
-    document.getElementById('content').style = '';
-
-    if( !button.disabled )
+    button.light = (!!!button.light)|0;
+    button.textContent = LIGHT[ button.light ];
+
+    if (button.light)
+    {
+        document.body.className = "light_theme";
+    }
+    else
     {
-        button.disabled = true;
-        document.getElementById( 'mono' ).disabled = false;
+        document.body.className = "";
     }
 }
+
+function insertAfter(newNode, existingNode) {
+    existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
+}
 
 function onLoad()
 {
@@ -1615,12 +1636,16 @@
 
 function onMono( button )
 {
-    document.getElementById('content').style = 'filter:grayscale(100%);';
-
-    if( !button.disabled )
+    button.mono = (!!!button.mono)|0;
+    button.textContent = MONO[ button.mono ];
+
+    if (button.mono)
+    {
+        document.getElementById('content').style = 'filter:grayscale(100%);';
+    }
+    else
     {
-        button.disabled = true;
-        document.getElementById( 'color' ).disabled = false;
+        document.getElementById('content').style = '';
     }
 }
 
@@ -1677,8 +1702,8 @@
 // Runeword table row or Rune image
 function setElementVisible( elem, vis )
 {
-    if   ( vis ) { elem.style.filter = ''               ; }
-    else         { elem.style.filter = 'brightness(50%)'; }
+    if   ( vis ) { elem.classList.add('visible'); elem.classList.remove('hidden');}
+    else         { elem.classList.add('hidden'); elem.classList.remove('visible');}
 
 }
 
@@ -1940,7 +1965,7 @@
             <span style='font-size:18px;'><i>Diablo 2</i> <a href='https://github.com/Michaelangel007/d2_cheat_sheet'>Cheat Sheet</a></span>
             <span style='font-size:14px;'> by <i>Michaelangel007</i></span> <img alt='m007' src='pics/m007.png'> <i><a href='https://www.reddit.com/user/MysticReddit'>/u/MysticReddit</a></i>
 <button type='button' id='mono'                  onclick='onMono(this)       ;'>Mono</button>
-<button type='button' id='color'        disabled onclick='onColor(this)      ;'>Color</button>
+<button type='button' id='color'                 onclick='onColor(this)      ;'>Light</button>
 <button type='button' id='collapse_all'          onclick='onCollapseAll(this);'>Collapse</button>
             <br>
             <br>