Problem/Motivation
I've been struggling with this for a while and need to break down and ask for help.
The goal is to simply change the Navbar background color in the dark theme of Varbase.
Seems simple enough. I tried using the gin-custom override in the site/default/files directory but that didn't work.
Now I am trying to create a subtheme of the vartheme_bs4 theme.
I used the scripts included in vartheme_bs4 to create my new subtheme and I have that new subtheme compiled and installed. This was time consuming and frustrating because I started with the npm install/gulp method and kept getting errors. The yarn method seems to work fine.
Now I am trying to tweak the colors.
First observation is that there are various variable.scss files with color definitions for both the light and dark variants. I tweaked the color in there and nothing happened.
vi scss/variables.scss
$primary: $blue !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
//$dark: $gray-800 !default;
$dark: #E81B23 !default;
$theme-colors: () !default;
$theme-colors: map-merge(
(
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
),
$theme-colors
);
I noted in the gulpfile that there was a line telling the compiler not to include variables files in the css. OK, fine. But where do I change the colors?
I went to some of what I thought were likely candidate:
./scss/components/header.component.scss
./node_modules/bootstrap/scss/_navbar.scss
but they are showing code like this:
vi ./node_modules/bootstrap/scss/_navbar.scss
// White links against a dark background
.navbar-dark {
.navbar-brand {
// color: $navbar-dark-brand-color;
color: #E81B23;
@include hover-focus() {
// color: $navbar-dark-brand-hover-color;
color: #E81B23;
}
}
or
vi ./scss/components/header.component.scss
#navbar-top.navbar-dark .nav-link:hover,
#navbar-top.navbar-dark .nav-link:focus {
color: rgba(255, 255, 255, 0.75);
}
#navbar-top.navbar-dark .nav-link {
color: rgba(255, 255, 255, 0.5);
}
WHAT??? what is with the 255/255/255 colors being hardcoded? That can't be right?
I noted in there that there is only reference to 'color' and not 'background-color'.
Neither of these seem to get the desired result but at least edits seem to kick the yarn:watch function to recompile. Cache refreshes were done to make sure nothing was stale.
I'm starting to hit a wall and running out of things to try.
Does anyone have any pointers to where I am going wrong? I just want to change the banner color :-(
Steps to reproduce
Given
When
Then
Proposed resolution
Remaining tasks
- ✅ File an issue about this project
- ❌ Addition/Change/Update/Fix to this project
- ❌ Testing to ensure no regression
- ❌ Automated unit/functional testing coverage
- ❌ Developer Documentation support on feature change/addition
- ❌ User Guide Documentation support on feature change/addition
- ❌ Accessibility and Readability
- ❌ Code review from 1 Varbase core team member
- ❌ Full testing and approval
- ❌ Credit contributors
- ❌ Review with the product owner
- ❌ Update Release Notes and Update Helper on new feature change/addition
- ❌ Release
- ✅ No Update
- ➖ Optional Update
- ➖ Forced Update
- ➖ Forced Update if Unchanged
User interface changes
API changes
Data model changes
Release notes snippet