From edba941110e9bac4d85f0321dcb0a52d00f16d7d Mon Sep 17 00:00:00 2001 From: J S Date: Mon, 13 Nov 2023 20:52:45 -0500 Subject: [PATCH] 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 | 88 ++++++++++++++++++++------- static/js/dark.js | 138 ++----------------------------------------- 2 files changed, 73 insertions(+), 153 deletions(-) diff --git a/static/css/style.css b/static/css/style.css index 43569e2..3f99abd 100644 --- a/static/css/style.css +++ b/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; } @@ -55,29 +72,60 @@ white-space: pre-wrap; code.has-jax { - -webkit-font-smoothing: antialiased; - background: inherit !important; - border: none !important; - font-size: 100%; +-webkit-font-smoothing: antialiased; +background: inherit !important; +border: none !important; +font-size: 100%; } alert { - position: relative; - padding: 0rem 1rem; - margin-bottom: 1rem; - border: 1px solid transparent; +position: relative; +padding: 0rem 1rem; +margin-bottom: 1rem; +border: 1px solid transparent; } .alert-warning { - border-style: solid; - border-color: #ed6a5a; - border-width: 0 0 0 4px; - padding-left: 1rem +border-style: solid; +border-color: #ed6a5a; +border-width: 0 0 0 4px; +padding-left: 1rem } .alert-heading { - font-family: sans-serif; - font-size: 1.5rem; - color: #ed6a5a; - weight: bold; +font-family: sans-serif; +font-size: 1.5rem; +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 } diff --git a/static/js/dark.js b/static/js/dark.js index d3ec62f..2996ba7 100644 --- a/static/js/dark.js +++ b/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", ``); - - document.querySelector("head").insertAdjacentHTML("beforeend", ``); - 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(); -}); +injectModeSelector();