From a02f04cb0b018126dd6967a82225d3d16b5e72a1 Mon Sep 17 00:00:00 2001
From: nx <nx@watermelon>
Date: Fri, 4 Feb 2022 01:41:41 +0000
Subject: [PATCH] white blended theme is default

Dark was previously chosen as the default theme color, this meant light text on dark backgrounds. Now we move over to white. Browser extensions and system dark settings can do the heavy lifting for us. Support for a light theme is our aim.

settings/_colors.scss

Colors saw additional navbar color variables to bring cohesion to the table. For instance, $nav-bg-color.

components/_toolbar.scss

We shifted the practise of hard boiling hexidecimal values and opted for linking the variables from the color settings. Any changes to settings will be easily reflected across the toolbar with less effort.
---
 src/scss/components/_toolbar.scss | 14 +++++++-------
 src/scss/settings/_colors.scss    | 26 ++++++++++++++++++++------
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/scss/components/_toolbar.scss b/src/scss/components/_toolbar.scss
index 3a6faae..8531d75 100644
--- a/src/scss/components/_toolbar.scss
+++ b/src/scss/components/_toolbar.scss
@@ -2,8 +2,8 @@
   width: 100%;
   height: 56px;
   box-shadow: 0 2px 4px rgba(0,0,0,0.4);
-  background: $gray-900;
-  color: #FFF;
+  background: $nav-bg-color;
+  color: $nav-text-color;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -15,7 +15,7 @@
 	  padding-right:1em;
 	  text-decoration:none;
 	  > h1 { 
-	  color: $blue !important;
+	  color: $nav-brand-title !important;
 	  display: inline-flex;
       	  align-items:center;		
 	  @include font-size(26px);
@@ -25,7 +25,7 @@
 	 	margin-right:0.5rem;
 	 }
 	  & .second {
-	  color: $orange !important;	  
+	  color: $nav-brand-title-accent !important;	  
   	}
 	}
 	& .lang-select {
@@ -69,11 +69,11 @@
 }
 
 .nav-collapse a {
-  color: $gray-300;
+  color: $nav-link-item-color;
   text-decoration: none;
   width: 100%;
-  background: rgba(0,0,0,0.7);
-  border-bottom: 1px solid $gray-900;
+  background: $white;
+  border-bottom: 1px solid $nav-link-border-color;
   padding: 0.7em 1em;
   float: left;
 }
diff --git a/src/scss/settings/_colors.scss b/src/scss/settings/_colors.scss
index 39b576f..249b6c8 100644
--- a/src/scss/settings/_colors.scss
+++ b/src/scss/settings/_colors.scss
@@ -30,14 +30,16 @@ $black:    #000 !default;
 $brand-color: $blue !default;
 $secondary-color: $orange !default;
 
+$orange-100: adjust-hue($orange,10%);
+$orange-900: adjust-hue($orange,-10%);
 // body background color 
-$bg-color: $dark-gray !default;
+$bg-color: $white !default;
 
 // body text color
-$body-text-color: $gray-300 !default;
+$body-text-color: $gray-900 !default;
 
 // headings color
-$headings-color:$gray-300 !default;
+$headings-color:$gray-900 !default;
 
 // focused color text
 $focus-color: $black !default;
@@ -60,10 +62,22 @@ $success-text: $green !default;
 $link-color: $orange !default;
 
 // visted link color
-$link-visited-color:$pale-orange !default;
+$link-visited-color:$orange !default;
 
 // link hover color
-$link-hover-color:$pastel-blue !default;
+$link-hover-color:$orange-900 !default;
 
 // active link color 
-$link-active-color:$white !default;
+$link-active-color:$orange-100 !default;
+
+// =============================================================================
+// Nav
+// =============================================================================
+
+$nav-bg-color: transparent;
+$nav-text-color: $gray-900;
+$nav-link-item-bg: $gray-300;
+$nav-link-item-color: $black;
+$nav-link-border-color:$gray-900;
+$nav-brand-title: $blue;
+$nav-brand-title-accent:$orange;