Moved most coloring in light and dark theme to root variables

1 files changed, 86 insertions, 32 deletions

diff --git a/src/styles.css b/src/styles.css
index 78bd8e8..c5629ae 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,6 +1,25 @@
 :root {
+  --fg-color: black;
+  --bg-color: white;
+  --fg-selection-color: white;
+  --bg-selection-color: #338fff;
+  --border-color: black;
+  --blockquote-color: #6a737d;
+  --blockquote-border-color: #dfe2e5;
+  --header-color: black;
+  --link-tab-fg-color: white;
   --link-tab-bg-color: #303030;
   --link-tab-bg-hover-color: #004080;
+  --strong-color: black;
+  --a-color: #004080;
+  --a-hover-color: #004080;
+  --code-bg-color: #e2e4e6;
+  --pre-bg-color: #f6f8fa;
+  --em-color: black;
+  --td-border-color: #dfe2e5;
+  --tr-bg-color: #fff;
+  --tr-border-color: #c6cbd1;
+  --alternating-row-color: #f6f8fa;
 }
 
 /* Custom scrollbar style */
@@ -21,10 +40,25 @@
   background: #555;
 }
 
+/* Custom mouse text selection colors */
+
+::-moz-selection {
+  color: var(--fg-selection-color);
+  background: var(--bg-selection-color);
+}
+
+::selection {
+  color: var(--fg-selection-color);
+  background: var(--bg-selection-color);
+}
+
 /* Global */
 
 body {
   min-height: calc(100vh - 16px);
+  color: var(--fg-color);
+  background-color: var(--bg-color);
+  border-color: var(--border-color);
 }
 
 body, td, th {
@@ -32,6 +66,11 @@ body, td, th {
   line-height: 1.5em;
 }
 
+h1, h2, h3, h4, h5, h6, b {
+  color: var(--header-color);
+  border-color: var(--border-color);
+}
+
 h1 {
   font-size: 1.7em;
   line-height: 1.2em;
@@ -45,7 +84,7 @@ h1 ~ h1 {
 h2 {
   font-size: 1.35em;
   padding-bottom: 0.25em;
-  border-bottom: 2px solid black;
+  border-bottom: 2px solid var(--border-color);
 }
 
 h3 {
@@ -63,12 +102,32 @@ img {
 }
 
 img, hr {
-  border: 1px solid black;
+  border: 1px solid var(--border-color);
+}
+
+strong {
+  color: var(--strong-color);
 }
 
 a {
   text-decoration: none;
-  color: var(--link-tab-bg-hover-color);
+}
+
+a * {
+  color: var(--fg-color);
+}
+
+body > :not(nav) a, a strong {
+  color: var(--a-color);
+  border-bottom: 1px dashed;
+}
+
+body > :not(nav) a:hover, a strong:hover {
+  color: var(--a-hover-color);
+}
+
+i, em {
+  color: var(--em-color);
 }
 
 article {
@@ -147,7 +206,7 @@ h2 + p img, h3 + p img, h4 + p img, h5 + p img, h6 + p img, .about-p img {
 .link-tab {
   font-weight: normal;
   padding: 10px;
-  color: white;
+  color: var(--link-tab-fg-color);
   background-color: var(--link-tab-bg-color);
 }
 
@@ -165,7 +224,7 @@ h2 + p img, h3 + p img, h4 + p img, h5 + p img, h6 + p img, .about-p img {
   #index-contents {
     display: flex;
     align-items: center;
-    justify-content: center;	
+    justify-content: center;
   }
 
   #index-contents-text {
@@ -183,8 +242,7 @@ h2 + p img, h3 + p img, h4 + p img, h5 + p img, h6 + p img, .about-p img {
 
 /* The following CSS is a modified version of sindresorhus's github-markdown-css repo: https://github.com/sindresorhus/github-markdown-css */
 
-code,
-pre {
+code, pre {
   font-family: monospace;
   font-size: 1em;
 }
@@ -193,20 +251,10 @@ code {
   padding: .2em .4em;
   margin: 0;
   font-size: 85%;
-  background-color: rgba(40,46,52,.5);
+  background-color: var(--code-bg-color);
   border-radius: 3px;
 }
 
-pre > code {
-  padding: 0;
-  margin: 0;
-  font-size: 100%;
-  word-break: normal;
-  white-space: pre;
-  background: transparent;
-  border: 0;
-}
-
 pre code {
   display: inline;
   max-width: auto;
@@ -215,7 +263,17 @@ pre code {
   overflow: visible;
   line-height: inherit;
   word-wrap: normal;
-  background-color: initial;
+  background-color: var(--code-bg-color);
+  border: 0;
+}
+
+pre > code {
+  padding: 0;
+  margin: 0;
+  font-size: 100%;
+  word-break: normal;
+  white-space: pre;
+  background-color: inherit;
   border: 0;
 }
 
@@ -224,7 +282,7 @@ pre {
   overflow: auto;
   font-size: 85%;
   line-height: 1.45;
-  background-color: #f6f8fa;
+  background-color: var(--pre-bg-color);
   border-radius: 3px;
   margin: 0;
   word-break: normal;
@@ -262,16 +320,16 @@ article > table th {
 article > table td,
 article > table th {
   padding: 6px 13px;
-  border: 1px solid #dfe2e5;
+  border: 1px solid var(--td-border-color);
 }
 
 article > table tr {
-  background-color: #fff;
-  border-top: 1px solid #c6cbd1;
+  background-color: var(--tr-bg-color);
+  border-top: 1px solid var(--tr-border-color);
 }
 
 article > table tr:nth-child(2n) {
-  background-color: #f6f8fa;
+  background-color: var(--alternating-row-color);
 }
 
 blockquote {
@@ -279,8 +337,8 @@ blockquote {
   margin-top: 0;
   margin-bottom: 16px;
   padding: 0 1em;
-  color: #6a737d;
-  border-left: .25em solid #dfe2e5;
+  color: var(--blockquote-color);
+  border-left: .25em solid var(--blockquote-border-color);
 }
 
 blockquote > :first-child {
@@ -304,7 +362,7 @@ blockquote > :last-child {
 }
 
 .contact-card-title, .contact-card-content {
-  background-color: #343434;
+  background-color: var(--alternating-row-color);
   padding: 0.7rem;
   line-height: 1.5rem;
 }
@@ -317,7 +375,7 @@ blockquote > :last-child {
 .contact-card-title {
   font-size: 1.2em;
   margin: 0em 0.4em;
-  color: var(--bold-color);
+  color: var(--header-color);
 }
 
 .contact-card-content {
@@ -328,10 +386,6 @@ blockquote > :last-child {
 
 /* Syntax highlighting (colours are inspired from gruvbox) */
 
-code span {
-  background-color: inherit;
-}
-
 .cst, .chr { /* Constant, Chars */
   color: #d787af;
 }