feat[css,js]: Further edits to dark.js

I removed all css styling from dark.js

I edited dark.js to run immediately, rather than after the page is loaded.

I added css styling for dark mode.

static/css/style.css

@@ -10,14 +10,25 @@ background: #fafafa;
 overscroll-behavior-y: none;
 }
 
+body.dark{
+color: #DDD;
+background: #151515;
+}
+
+body.dark > *{
+color: #DDD;
+}
+
 img {
 max-width: 100%; }
 
 a {
-color: #0074D9; }
+color: #0074D9;
 
-h1, h2, strong {
+}
-color: #111; }
+body.dark a {
+color: #ff8b26;
+}
 
 h1 {
 font-size: 1.6em; }
@@ -29,8 +40,14 @@ h3 {
 font-size: 1.1em; }
 
 .muted {
+color: #555;
+text-decoration: none;
+}
+
+body.dark .muted {
 color: #aaa;
-text-decoration: none; }
+text-decoration: none;
+}
 
 .small {
 font-size: .8em; }
@@ -81,3 +98,34 @@ alert {
 color: #ed6a5a;
 weight: bold;
 }
+
+
+#mode-selector {
+position: relative;
+display: flex;
+padding: 0.125em 0.25em;
+border: 3px solid transparent;
+}
+#mode-selector button {
+-moz-appearance: none;
+appearance: none;
+border: none;
+background-color: transparent;
+padding: 0.5em;
+margin: 0;
+line-height: 1;
+font-family: Lucida Sans Unicode, Source Sans Pro, Helvetica, Trebuchet MS, sans-serif;
+font-size: 0.99rem;
+text-align: center;
+color: #000;
+position: relative;
+}
+
+#mode-selector button:hover,
+#mode-selector button.selected {
+    border-bottom: solid;
+}
+
+#mode-selector.dark button {
+color: #FFF
+}

static/js/dark.js

@@ -49,73 +49,6 @@ GW.modeOptions = [
     [ 'light', 'Light', 'Light mode at all times' ],
     [ 'dark', 'Dark', 'Dark mode at all times' ]
 ];
-GW.modeStyles = `
-    :root {
-        --GW-blockquote-background-color: #ddd
-    }
-    body::before,
-    body > * {
-        filter: invert(90%)
-    }
-    body::before {
-        content: '';
-        width: 100vw;
-        height: 100%;
-        position: fixed;
-        left: 0;
-        top: 0;
-        background-color: #fff;
-        z-index: -1
-    }
-    img,
-    video {
-        filter: invert(100%);
-    }
-    #markdownBody, #mode-selector button {
-        text-shadow: 0 0 0 #000
-    }
-    article > :not(#TOC) a:link {
-        text-shadow:
-                 0      0 #777,
-             .03em      0 #fff,
-            -.03em      0 #fff,
-                 0  .03em #fff,
-                 0 -.03em #fff,
-             .06em      0 #fff,
-            -.06em      0 #fff,
-             .09em      0 #fff,
-            -.09em      0 #fff,
-             .12em      0 #fff,
-            -.12em      0 #fff,
-             .15em      0 #fff,
-            -.15em      0 #fff
-    }
-    article > :not(#TOC) blockquote a:link {
-        text-shadow:
-                 0      0 #777,
-             .03em      0 var(--GW-blockquote-background-color),
-            -.03em      0 var(--GW-blockquote-background-color),
-                 0  .03em var(--GW-blockquote-background-color),
-                 0 -.03em var(--GW-blockquote-background-color),
-             .06em      0 var(--GW-blockquote-background-color),
-            -.06em      0 var(--GW-blockquote-background-color),
-             .09em      0 var(--GW-blockquote-background-color),
-            -.09em      0 var(--GW-blockquote-background-color),
-             .12em      0 var(--GW-blockquote-background-color),
-            -.12em      0 var(--GW-blockquote-background-color),
-             .15em      0 var(--GW-blockquote-background-color),
-            -.15em      0 var(--GW-blockquote-background-color)
-    }
-    #logo img {
-        filter: none;
-    }
-    #mode-selector {
-        opacity: 0.6;
-    }
-    #mode-selector:hover {
-        background-color: #fff;
-    }
-`;
 
 /****************/
 /* DEBUG OUTPUT */
@@ -262,67 +195,6 @@ function injectModeSelector() {
         });
     });
 
-    document.querySelector("head").insertAdjacentHTML("beforeend", `<style id='mode-selector-styles'>
-    #mode-selector {
-        position: relative;
-        display: flex;
-        padding: 0.125em 0.25em;
-        border: 3px solid transparent;
-        opacity: 0.3;
-        transition:
-            opacity 2s ease;
-    }
-    #mode-selector.hidden {
-        opacity: 0;
-    }
-    #mode-selector:hover {
-        transition: none;
-        opacity: 1.0;
-    }
-    #mode-selector button {
-        -moz-appearance: none;
-        appearance: none;
-        border: none;
-        background-color: transparent;
-        padding: 0.5em;
-        margin: 0;
-        line-height: 1;
-        font-family: Lucida Sans Unicode, Source Sans Pro, Helvetica, Trebuchet MS, sans-serif;
-        font-size: 0.99rem;
-        text-align: center;
-        color: #000;
-        position: relative;
-    }
-    #mode-selector button:hover,
-    #mode-selector button.selected {
-        box-shadow:
-            0 2px 0 6px #fff inset,
-            0 1px 0 6px currentColor inset;
-    }
-    #mode-selector button:not(:disabled):hover {
-        color: #000;
-        cursor: pointer;
-    }
-    #mode-selector button:not(:disabled):active {
-        transform: translateY(2px);
-        box-shadow:
-            0 0px 0 6px #fff inset,
-            0 -1px 0 6px currentColor inset;
-    }
-    #mode-selector button.active:not(:hover)::after {
-        content: "";
-        position: absolute;
-        bottom: 0.25em;
-        left: 0;
-        right: 0;
-        border-bottom: 1px dotted currentColor;
-        width: 25%;
-        margin: auto;
-    }
-    </style>`);
-
-    document.querySelector("head").insertAdjacentHTML("beforeend", `<style id='mode-styles'></style>`);
-
     setMode(currentMode);
 
     // We pre-query the relevant elements, so we don’t have to run queryAll on
@@ -422,9 +294,11 @@ function setMode(modeOption) {
     if (modeOption == 'auto') {
         modeStyles.innerHTML = `@media (prefers-color-scheme:dark) {${GW.modeStyles}}`;
     } else if (modeOption == 'dark') {
-        modeStyles.innerHTML = GW.modeStyles;
+        document.body.classList.add('dark');
+        document.getElementById("mode-selector").classList.add('dark');
     } else {
-        modeStyles.innerHTML = "";
+        document.body.classList.remove('dark');
+        document.getElementById("mode-selector").classList.remove('dark');
     }
 
     // Update selector state.
@@ -435,6 +309,4 @@ function setMode(modeOption) {
 /* INITIALIZATION */
 /******************/
 
-doWhenPageLoaded(() => {
 injectModeSelector();
-});