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

1 files changed, 5 insertions, 73 deletions

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 */