component: navbar/page-header "color_mode"

Problem/Motivation

"color_mode" is used in the following but doesn't seem to be used for anything:

component: navbar
component: page-header

E.g.
navbar.twig

{% set color_mode = color_mode ? ['navbar-' ~ color_mode] : [] %}

Example results in

class="navbar-dark"

or...

class="navbar-light"

both classes don't exist anywhere,

Proposed resolution

Implement into navbar.twig

data-bs-theme="dark" 
data-bs-theme="light" 

EX:

BEFORE:

{% set container = container ?? false %}
{% set placement = placement ? [placement] : [] %}
{% set color_mode = color_mode ? ['navbar-' ~ color_mode] : [] %}
{% set color = color ? ['bg-' ~ color] : [] %}
{% set navbar_expand = navbar_expand ? ['navbar-expand-' ~ navbar_expand] : ['navbar-expand-lg'] %}
{% set utility_classes = utility_classes ? utility_classes : [] %}

{%
  set classes = [
    'navbar',
    'justify-content-between',
  ]|merge(placement)|merge(color_mode)|merge(color)|merge(navbar_expand)|merge(utility_classes)
%}

<nav{{ attributes.addClass(classes) }}>

AFTER:

{% set container = container ?? false %}
{% set placement = placement ? [placement] : [] %}
{% set color_mode = color_mode ? [color_mode] : [] %}
{% set color = color ? ['bg-' ~ color] : [] %}
{% set navbar_expand = navbar_expand ? ['navbar-expand-' ~ navbar_expand] : ['navbar-expand-lg'] %}
{% set utility_classes = utility_classes ? utility_classes : [] %}

{%
  set classes = [
    'navbar',
    'justify-content-between',
  ]|merge(placement)|merge(color_mode)|merge(color)|merge(navbar_expand)|merge(utility_classes)
%}



<nav{{ attributes.addClass(classes) }} {{ attributes.setAttribute('data-bs-theme', color_mode) }}>

***
As mentioned in bootstrap 5.3

https://getbootstrap.com/docs/5.3/components/navbar/

https://getbootstrap.com/docs/5.3/customize/color-modes/

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
• ➖ UX/UI designer responsibilities
• ➖ 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

Varbase update type

• ✅ No Update
• ➖ Optional Update
• ➖ Forced Update
• ➖ Forced Update if Unchanged

User interface changes

• N/A

API changes

• N/A

Data model changes

• N/A

Release notes snippet

• N/A