update some text, add theme switcher and icons

css/default.scss

@@ -1,29 +1,50 @@
 @import url(/fonts/fonts.css);
 
-$bg-color: #F3F8F1;
-$primary-color: #D7263D;
-$secondary-color: #984EA3;
+$themes: (
+  "light": (
+    "background": #F3F8F1,
+    "primary": #D7263D,
+    "secondary": #984EA3,
+    "text": black
+  ),
+  "dark": (
+    "primary": #88d498,
+    "secondary": #db5375,
+    "background": #161616,
+    "text": white
+  )
+);
+
+@each $theme-name, $properties in $themes {
+  body[data-theme="#{$theme-name}"] {
+    // define a css variable for each property
+    @each $name, $property in $properties {
+      --#{$name}: #{$property};
+    }
+  }
+}
 
 html {
   font-family: "SpaceGrotesk";
-  background-color: $bg-color;
 }
 
 a {
-  color: $primary-color;
+  color: var(--primary);
   text-decoration: none;
 }
 
 a:hover {
-  color : $secondary-color;
+  color : var(--secondary);
 }
 
 a:visited {
-    color: $secondary-color;
+  color: var(--secondary);
 }
 
 body {
   font-size: 1.6rem;
+  color: var(--text);
+  background-color: var(--background);
 }
 
 header {
@@ -37,11 +58,23 @@ nav {
 nav a {
   font-size: 1.8rem;
   font-weight: bold;
-  color: black;
+  color: var(--text);
   text-decoration: none;
   text-transform: uppercase;
 }
 
+#btn-switch {
+  	background: none;
+	color: inherit;
+	border: none;
+	font: inherit;
+	cursor: pointer;
+}
+
+#btn-switch:hover {
+  color : var(--secondary);
+}
+
 h1 {
   font-size: 2.4rem;
 }
@@ -58,7 +91,7 @@ article .header {
 
 .logo a {
   font-weight: bold;
-  color: #000;
+  color: var(--text);
   text-decoration: none;
 }