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.
This commit is contained in:
parent
7657b963bf
commit
a02f04cb0b
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
Reference in New Issue