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();