Added option to toggle dark mode

1 files changed, 45 insertions, 19 deletions

diff --git a/src/styles/style.css b/src/styles/style.css
index c5f9a89..0cee77a 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -1,13 +1,23 @@
 :root {
-  --bg: #181a1b;
-  --bg-light: #222; 
-  --fg: #ddd; 
-  --gray: #888; 
-  --gray-light: #555; 
-  --yellow: #fda; 
-  --yellow-dark: #ca8; 
-  --yellow-warm: #e6c79a;
-  --wine: #c65a5a
+  --bg: #f3f3f3; 
+  --fg: #181a1b;
+  --link: #006697;
+  --code: #e8e8e8; 
+  --footer: #828997; 
+  --home-link: #c02c38;
+  --quote-border: #c678dd;
+  --theme-toggle: #4078f2;
+}
+
+.dark-mode {
+  --bg: #282c34;
+  --fg: #a6adba; 
+  --link: #56b6c2;
+  --code: #363a45; 
+  --footer: #828997; 
+  --home-link: #e06c75;
+  --quote-border: #c678dd;
+  --theme-toggle: #5d8ffc;
 }
 
 body {
@@ -20,9 +30,18 @@ body {
 }
 
 header {
+    overflow:hidden;
     margin-top: 1em;
     font-size: 2em;
-    color: var(--gray);
+    color: var(--footer);
+}
+
+.nav-left {
+    float:left;
+}
+
+.nav-right {
+    float:right;
 }
 
 footer {
@@ -30,17 +49,16 @@ footer {
     margin-bottom: 1.5em;
     text-align: center;
     font-size: 0.95em;
-    color: var(--gray);
+    color: var(--footer);
 }
 
 a {
-    color: var(--yellow);
+    color: var(--link);
     text-decoration: none;
 }
 
 a:hover {
     text-decoration: underline;
-    text-decoration-color: var(--yellow-dark);
 }
 
 pre > code {
@@ -53,8 +71,8 @@ pre > code {
 pre, code {
     font-family: 'Fira Code', monospace;
     font-size: 0.98em;
-    color: var(--fg);
-    background-color: var(--bg-light);
+    /* color: var(--fg); */
+    background-color: var(--code);
     border-radius: 5px;
 }
 
@@ -74,14 +92,22 @@ img {
 }
 
 blockquote {
-    background-color: var(--bg-light);
-    border-left: 5px solid var(--yellow-warm);
+    background-color: var(--code);
+    border-left: 5px solid var(--quote-border);
     border-radius: 5px;
     margin: 0em 1em;
     padding-left: 1em;
 }
 
 .homepage-link { 
-    color: var(--wine);
-    text-decoration-color: var(--gray-light);
+    color: var(--home-link);
+}
+
+#darkmodetoggle {
+    color: var(--theme-toggle);
+}
+
+#darkmodetoggle:hover { 
+    cursor: pointer;
+    text-decoration: none;
 }