LibreGaming
/
frontend-styles
Archived
14
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

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:
nx 2022-02-04 01:41:41 +00:00
parent 7657b963bf
commit a02f04cb0b
2 changed files with 27 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/scss/components/_toolbar.scss
View File

@ -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;
}

26
src/scss/settings/_colors.scss
View File

@ -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;