Some scss refactoring

- logo cursor color value is now defined in _variables
 - removed some hard coded colors - using vars instead

assets/scss/_header.scss

@@ -1,5 +1,5 @@
 .header {
-  background: #fafafa;
+  background: $light-background-secondary;
   display: flex;
   align-items: center;
   justify-content: center;

assets/scss/_logo.scss

@@ -22,10 +22,13 @@
     display: inline-block;
     width: 10px;
     height: 1rem;
-    background: $cursor-color;
+    background: $light-cursor-color;
     margin-left: 5px;
     border-radius: 1px;
     animation: cursor 1s infinite;
+    .dark-theme &{
+      background: $dark-cursor-color;
+    }
   }
 
   @media (prefers-reduced-motion: reduce) {

assets/scss/_menu.scss

@@ -1,5 +1,5 @@
 .menu {
-  background: #fafafa;
+  background: $light-background-secondary;
   border-right: 1px solid;
   margin-right: 18px;
   z-index: 9999;

assets/scss/_variables.scss

@@ -3,18 +3,17 @@
 /* light theme color */
 $light-background: #fff;
 $light-background-secondary: #eaeaea;
-$light-color: #222;
+$light-color: #494949;
 $light-color-secondary: #999;
 $light-border-color: #dcdcdc;
-
+$light-cursor-color: #a85656;
 /* dark theme colors */
 $dark-background: #34363a;
 $dark-background-secondary: #404653;
 $dark-color: #d4d4d4;
 $dark-color-secondary: #a1a1a1;
 $dark-border-color: #4a4b50;
-
-$cursor-color: #c75f36;
+$dark-cursor-color: #a85656;
 
 $media-size-phone: "(max-width: 684px)";
 $media-size-tablet: "(max-width: 900px)";