navbar dark theme (data-bs-theme="drak")

After trying to learn the bootstrap and dart-sass etc, it feels like this might actually be a bug, since there is no variable for navbar-background -color, hence there is no class to be included in the navbar for making it's background color switch from light to dark etc.

Very new to web technologies, could following be possible solution?

1. In "~bootstrap/scss/_variables.scss" file in the navbar area. define a new variable $navbar-bg-color (with default as 'light' background) --- "

OR

if we should a new navbar area in "~bootstrap/scss/variables-dark";) and define this new variable there (but the background color for navbar may even be needed even for the light mode, so it might be good to define in the main _variables.scss file.

2. Then define a new class say ".navbar-bg-color" and set the 'background-color' property in this class to have the value from $navbar-bg-color variable (which wil switch depending on the 'data-bs-theme' attribute value)

3. Then in navbar.twig include this new class in the element markup.

Just to save time in analyzing/reviewing the solution, here's the exact change I was able to test successfully:

1. Added new variable ($navbar-bg-color: #f8f9fa ;) to _variable.scss

web\themes\custom\prabhats_radix\src\scss\base\_variables.scss
/**
 * Variables
 * Variables should follow the $component-state-property-size formula for
 * consistent naming. Examples:
 * $nav-link-disabled-color
 * $modal-content-box-shadow-xs 
 *
 * Customization:
 * To customize Bootstrap variables:
 * Copy the desired variable from node_modules/bootstrap/scss/_variables.scss
 * @see https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss
 * Change the value and remove the !default flag.
 * Examples:
 * $body-bg: #000;
 * $body-color: $gray-100;
 */


/** set default navbar background color to be light
 * The exact value of these color is based on all theme colors defined in bootstrap currently for 'light' color
 */

$navbar-bg-color: #f8f9fa ;

2. Create an custom override file for navbar.scss

web\themes\custom\prabhats_radix\src\scss\base\_navbar.scss

// Navbar
//
// Add functionlaity to handle the background color of the navbar
//


.navbar[data-bs-theme="dark"] {
  --navbar-bg-color: #212529;
}

.navbar[data-bs-theme="light"] {
  --navbar-bg-color: #f8f9fa;
}

.navbar-bg-color {
  background-color: var(--navbar-bg-color);
}

3. Import our custom navbar.scss

web\themes\custom\prabhats_radix\src\scss\main.style.scss

// Bootstrap
// -----------------------------------------------------------------------------
@import 'init';
@import 'bootstrap';

// Include any custom stylesheets here
// -----------------------------------------------------------------------------
@import "base/elements";
@import "base/functions";
@import "base/helpers";
@import "base/typography";

// Include any Prabhats custom stylesheets here
// -----------------------------------------------------------------------------
@import "base/navbar";

4. Add the new class to the utility classes being passed to navbar.twig


web\themes\custom\prabhats_radix\components\page-navigation\page-navigation.twig
{# embed 'radix:navbar' with #}

{%
embed '/themes/custom/prabhats_radix/components/navbar/navbar.twig' with {
container: 'fixed',
navbar_theme: 'dark',
navbar_utility_classes: [
'justify-content-between','navbar-bg-color',
],
}
%}

@cookiejar:

it feels like this might actually be a bug, since there is no variable for navbar-background-color

IMO, the omission is in Bootstrap, not in Radix. The default Bootstrap _navbar.scss is missing a navbar background entry in it's CSS properties sections for light and dark.

It does call a background mixin here which would set the background to the specified color, but no color is specified.

I have no idea if it's a bug or intentional. Maybe they intend to only support the navbar background being the same color as the rest of the page, and expect devs to customize.

Filling in with custom CSS in the sub-theme's overrides as you did in #6 is a great solution.

But I don't think you need the new CSS selector, or even the custom properties. I think you could get by with something like this:

.navbar[data-bs-theme="dark"] {
  background-color: $navbar-dark-bg-color;
}

.navbar[data-bs-theme="light"] {
  background-color: $navbar-bg-color;
}

Looking at the Bootstrap docs more closely:

Doing it the "Bootstrap way", .navbar alone is expected to display the "light" version, and it has no background color by default. The docs use .bg-* utility classes in combination with data-bs-theme="dark" to get the desired color.

If you don't need to support both light and dark versions:

If .bg-dark isn't the desired color, you can create custom .bg-* utility classes by redefining the $colors variable or defining the $utilities-bg-colors variable (which is a Radix add-on to Bootstrap).

For example, adding the following to _variables.scss:

$utilities-bg-colors: (
  'navbar-dark-custom': #212529,
);

will result in the automatic creation of this new CSS rule in main.style.css:

.bg-navbar-dark-custom {
  --bs-bg-opacity: 1;
  background-color: #212529 !important;
}

Then you can just add that class in to your navbar in the template and change data-bs-theme to dark.

@kentr Thanks so much for the very insightful comments and comprehensive description. As you noted definitely it would not be a bug, since 'navbar's are so prominent for any front-end theme, if this was a bug it would have been identified years back. Thanks again and I will definitely adopt the solution you suggested in #8 (that helped me understand bootstrap further more).

We can close this thread as this is not really a bug. I will check if I can close this thread or if only the maintainers can close then kindly close this thread pass due credits to @Kentr. I tried clicking credits, thinking I will be able to credit kent, but likely only maintainers can accept resolution.

Thanks guys for the time spent and discussing this, closing this as works as designed