Customize navbar at Runtime.

[farmakiG]

Summary Toggle navbar and footer from dark to light mode at runtime.

Details Toggle between dark/light navigation bar and footer at runtime using the Toggle radio button located at the navigation bar Dropdown menu. To achieve this task, there are two technical approaches, an easy one and a more complicated one: 1) Instead of using the class: navbar-themed, use the classes: navbar-dark bg-dark (or navbar-light bg-light) and just toggle the values of the Bootstrap CSS variables: --bs-dark and --bs-light, accordingly. The change of these variables should have the desired effect. Also, modify the link colors of the navbar and footer by using an appropriate Bootstrap CSS variable. 2) Override the navbar-themed mixin so that it uses the value of a Bootstrap CSS variable (e.g. the --bs-dark and --bs-light) instead of a Sass variable. It must be tested if it is possible to realize the second approach.

Acceptance criteria

• [ ] If there are issues with chosen approach (for example some Bootstrap CSS variables are not supported), then document it a Word file "Support of Bootstrap CSS variables" for future reference.
• [ ] Manual tests.
• [ ] UI Customizability is preserved

Additional context Add any other context or screenshots about the task.

[farmakiG]

Relevant for the Backend: for a light navigation bar, set the following CSS variables:

--oscm-navbar-color: rgba(var(--oscm-white), 0.9); --oscm-navbar-links-color: rgb(var(--oscm-primary));

[farmakiG]

Close till replacement of rgb with hsl values. Customize navbar as described in above comment.