Fix colours

Author: bitbrain

_includes/theme-toggle.html

@@ -1,5 +1,5 @@
 <div class="toggleWrapper">
-    <input type="checkbox" class="dn" id="theme-toggle" onclick="modeSwitcher()"/>
+    <input type="checkbox" class="dn" id="theme-toggle" onclick="modeSwitcher()" checked />
     <label for="theme-toggle" class="toggle">
     <span class="toggle__handler">
       <span class="crater crater--1"></span>
@@ -22,22 +22,26 @@
 const userPrefers = getComputedStyle(document.documentElement).getPropertyValue('content');
 
 if (theme === "dark") {
+    document.getElementById('theme-toggle').checked = true;
     document.documentElement.setAttribute('data-theme', 'dark');
     document.documentElement.classList.add('theme--dark');
     document.documentElement.classList.remove('theme--light');
 	document.getElementById("theme-toggle").className = 'light';
 } else if (theme === "light") {
+    document.getElementById('theme-toggle').checked = false;
     document.documentElement.setAttribute('data-theme', 'light');
     document.documentElement.classList.add('theme--light');
     document.documentElement.classList.remove('theme--dark');
 	document.getElementById("theme-toggle").className = 'dark';
 } else if  (userPrefers === "dark") {
+    document.getElementById('theme-toggle').checked = false;
     document.documentElement.setAttribute('data-theme', 'dark');
 	document.documentElement.classList.add('theme--dark');
     document.documentElement.classList.remove('theme--light');
 	window.localStorage.setItem('theme', 'dark');
 	document.getElementById("theme-toggle").className = 'light';
 } else {
+    document.getElementById('theme-toggle').checked = true;
     document.documentElement.setAttribute('data-theme', 'light');
 	document.documentElement.classList.add('theme--light');
     document.documentElement.classList.remove('theme--dark');

_sass/dash/_base.scss

@@ -111,7 +111,9 @@ a {
   text-decoration: none;
 
   &:hover {
-    color: $color-foreground;
+    @include themed() {
+       color: t('foreground-color');
+    }
     text-decoration: underline;
   }
 
@@ -151,7 +153,8 @@ code {
   @include relative-font-size(0.9375);
   border-radius: 0.3em;
   @include themed() {
-     background-color: t('background-color');
+     background-color: $color-background-dark;
+     color: $color-foreground;
   }
 }
 

_sass/dash/_colors.scss

@@ -4,7 +4,7 @@ $color-foreground: #DAE4ED;
 $color-foreground-dark: lighten($color-background-dark, 30%);
 
 $color-background-light: #DAE4ED;
-$color-background-lighter: lighten($color-background-light, 30%);
+$color-background-lighter: lighten($color-background-light, 7%);
 $color-foreground-dark: #1E2227;
 $color-foreground-darker: #15171A;
 
@@ -19,24 +19,24 @@ $color-blue: #637AFE;
 $color-indigo: #6775C4;
 $color-purple: #8E59D7;
 
-.color-pink { color: $color-pink; }
-.color-red { color: $color-red; }
-.color-orange { color: $color-orange; }
-.color-yellow { color: $color-yellow; }
-.color-teal { color: $color-teal; }
-.color-green { color: $color-green; }
-.color-cyan { color: $color-cyan; }
-.color-blue { color: $color-blue; }
-.color-indigo { color: $color-indigo; }
-.color-purple { color: $color-purple; }
+.color-pink { color: $color-pink !important; }
+.color-red { color: $color-red !important; }
+.color-orange { color: $color-orange !important; }
+.color-yellow { color: $color-yellow !important; }
+.color-teal { color: $color-teal !important; }
+.color-green { color: $color-green !important; }
+.color-cyan { color: $color-cyan !important; }
+.color-blue { color: $color-blue !important; }
+.color-indigo { color: $color-indigo !important; }
+.color-purple { color: $color-purple !important; }
 
-.color-pink-hover:hover { color: $color-pink; }
-.color-red-hover:hover { color: $color-red; }
-.color-orange-hover:hover { color: $color-orange; }
-.color-yellow-hover:hover { color: $color-yellow; }
-.color-teal-hover:hover { color: $color-teal; }
-.color-green-hover:hover { color: $color-green; }
-.color-cyan-hover:hover { color: $color-cyan; }
-.color-blue-hover:hover { color: $color-blue; }
-.color-indigo-hover:hover { color: $color-indigo; }
-.color-purple-hover:hover { color: $color-purple; }
+.color-pink-hover:hover { color: $color-pink !important; }
+.color-red-hover:hover { color: $color-red !important; }
+.color-orange-hover:hover { color: $color-orange !important; }
+.color-yellow-hover:hover { color: $color-yellow !important; }
+.color-teal-hover:hover { color: $color-teal !important; }
+.color-green-hover:hover { color: $color-green !important; }
+.color-cyan-hover:hover { color: $color-cyan !important; }
+.color-blue-hover:hover { color: $color-blue !important; }
+.color-indigo-hover:hover { color: $color-indigo !important; }
+.color-purple-hover:hover { color: $color-purple !important; }

_sass/dash/_layout.scss

@@ -242,7 +242,7 @@
   border-radius: 0.3em;
   &:hover {
     text-decoration: none;
-    color: lighten($color-green, 20%);
+    color: lighten($color-green, 20%) !important;
     @include themed() {
        background-color: lighten(t('background-color'), 5%);
     }

_sass/dash/dn-toggle.scss

@@ -1,9 +1,3 @@
-body {
-  background-color: #1E314F;
-  font-family: 'Helvetica Rounded', 'Arial Rounded MT Bold','Montserrat', sans-serif;
-  color: #fff;
-}
-
 .toggleWrapper {
   display: inline-block;
   float: right;