Moved dark mode to it's own stylesheet and added a userscript that can toggle light mode on and off

3 files changed, 79 insertions, 73 deletions

diff --git a/src/_header.html b/src/_header.html
index e30896d..3b1128d 100644
--- a/src/_header.html
+++ b/src/_header.html
@@ -10,6 +10,7 @@
 	<meta name="theme-color" content="#ffffff"/>
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<link rel="stylesheet" href="/styles.css">
+	<link rel="stylesheet" href="/darkmode.css">
 	<meta name="description" content="[DESCRIPTION]">
 	<meta property="og:type" content="website">
 	<meta property="og:title" content="[TITLE]">
diff --git a/src/darkmode.css b/src/darkmode.css
new file mode 100644
index 0000000..d74e189
--- /dev/null
+++ b/src/darkmode.css
@@ -0,0 +1,73 @@
+:root {
+  --link-tab-bg-color: #464646;
+  --link-tab-bg-hover-color: #d47408;
+}
+
+
+::-moz-selection {
+  color: #ffeede;
+  background: #59676f;
+}
+
+::selection {
+  color: #ffeede;
+  background: #59676f;
+}
+
+*,
+hr,
+article > table tr,
+article > table td,
+article > table th {
+  color: #ffeede;
+  border-color: #777;
+  background-color: #262626;
+}
+
+blockquote * {
+  color: #919191;
+}
+
+h1, h2, h3, h4, h5, h6, b {
+  color: #d49408;
+  border-color: #777;
+}
+
+  /* This selects the link images, next to headings */
+h2 + p img, h3 + p img, h4 + p img, h5 + p img, h6 + p img {
+  /* Refer to styles.css on why this is necessary */
+  filter: none; 
+}
+
+strong {
+  color: #c35b5b;
+}
+
+body > :not(nav) a, a strong {
+  color: #b47494;
+  border-bottom: 1px dashed;
+}
+
+body > :not(nav) a:hover, a strong:hover {
+  color: #da8db3;
+}
+
+pre, code {
+  background-color: #464646;
+}
+
+i, em {
+  color: #999908;
+}
+
+table * {
+  background-color: inherit;
+}
+
+article > table tr:nth-child(2n) td {
+  background-color: #373737;
+}
+
+.link-tab {
+  color: #ffeede;
+}
diff --git a/src/styles.css b/src/styles.css
index 142019b..9a51761 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -3,18 +3,6 @@
   --link-tab-bg-hover-color: #004080;
 }
 
-/* Custom text selection color */
-
-::-moz-selection {
-  color: #ffeede;
-  background: #59676f;
-}
-
-::selection {
-  color: #ffeede;
-  background: #59676f;
-}
-
 /* Custom scrollbar style */
 
 ::-webkit-scrollbar {
@@ -96,10 +84,15 @@ h1 + p a, h2 + p a, h3 + p a, h4 + p a, h5 + p a, h6 + p a {
   border: none !important;
 }
 
+  /* This selects the link images, next to headings */
 h2 + p img, h3 + p img, h4 + p img, h5 + p img, h6 + p img {
   height: 1.3em;
   border: none;
   vertical-align: text-top;
+  /* Since link images are made for dark mode, and have white-ish foreground,
+   * this filter makes them black (when in light mode)
+   */
+  filter: invert(1) brightness(0);
 }
 
 /* Main elements: article, header, footer */
@@ -318,64 +311,3 @@ blockquote > :last-child {
   font-weight: 600;
   font-style: italic;
 }
-
-/* Dark mode start */
-
-:root {
-  --link-tab-bg-color: #464646;
-  --link-tab-bg-hover-color: #d47408;
-}
-
-*,
-hr,
-article > table tr,
-article > table td,
-article > table th {
-  color: #ffeede;
-  border-color: #777;
-  background-color: #262626;
-}
-
-blockquote * {
-  color: #919191;
-}
-
-h1, h2, h3, h4, h5, h6, b {
-  color: #d49408;
-  border-color: #777;
-}
-
-strong {
-  color: #c35b5b;
-}
-
-body > :not(nav) a, a strong {
-  color: #b47494;
-  border-bottom: 1px dashed;
-}
-
-body > :not(nav) a:hover, a strong:hover {
-  color: #da8db3;
-}
-
-pre, code {
-  background-color: #464646;
-}
-
-i, em {
-  color: #999908;
-}
-
-table * {
-  background-color: inherit;
-}
-
-article > table tr:nth-child(2n) td {
-  background-color: #373737;
-}
-
-.link-tab {
-  color: #ffeede;
-}
-
-/* Dark mode end */