Moved dark mode styling to the bottom of the page (so I don't use !important everywhere)

1 files changed, 62 insertions, 55 deletions

diff --git a/src/styles.css b/src/styles.css
index 7ffcc35..9fa69cb 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,56 +1,3 @@
-/* Dark mode start */
-
-:root {
-  --link-tab-bg-color: #464646 !important;
-  --link-tab-bg-hover-color: #d47408 !important;
-}
-
-* {
-  color: #ffeede !important;
-  border-color: #777 !important;
-  background-color: #262626;
-}
-
-blockquote * {
-  color: #919191 !important;
-}
-
-
-
-h1, h2, h3, h4, h5, h6, b {
-  color: #d49408 !important;
-}
-
-strong {
-  color: #c35b5b !important;
-}
-
-body > :not(nav) a, a strong {
-  color: #b47494 !important;
-}
-
-body > :not(nav) a:hover, a strong:hover {
-  color: #da8db3 !important;
-}
-
-pre, code {
-  background-color: #464646 !important;
-}
-
-i, em {
-  color: #999908 !important;
-}
-
-table * {
-  background-color: inherit !important;
-}
-
-article > table tr:nth-child(2n) {
-  background-color: #373737 !important;
-}
-
-/* Dark mode end */
-
 :root {
   --link-tab-bg-color: #303030;
   --link-tab-bg-hover-color: #004080;
@@ -167,12 +114,12 @@ h2 + p img, h3 + p img, h4 + p img, h5 + p img, h6 + p img {
 
 .header {
   font-size: 23px;
-  border-bottom: 5px solid var(--link-tab-bg-color) !important;
+  border-bottom: 5px solid var(--link-tab-bg-color);
   padding-bottom: 3px;
 }
 
 .footer {
-  border-top: 5px solid var(--link-tab-bg-color) !important;
+  border-top: 5px solid var(--link-tab-bg-color);
   padding-top: 3px;
 }
 
@@ -368,3 +315,63 @@ 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;
+}
+
+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) {
+  background-color: #373737;
+}
+
+.link-tab {
+  color: #ffeede;
+}
+
+/* Dark mode end */