Bootstrap Light-Dark-Color Theme Mode Toggler

The Bootstrap Theme Toggler Module enables switching of color modes for a Bootstrap based theme using the bootstrap library ver. 5.3 or later. With ver. 5.3, bootstrap introduced support for light & dark color modes. This module is a Drupal block that implements a theme changing toggle drop-down button to integrate this feature into your site. Any theme using bootstrap >5.3 can use this module, however Bootstrap Barrio 5 Theme, its related Bootstrap 5 - SASS Starter Kit, or any derivates are recommended.

Those utilizing bootstrap 5 SASS themes can make use of full re-templating of the 'light' and 'dark' modes, as well as add additional custom modes.

The Toggler configuration provides full customization of the visible drop-down menu elements.

For full instructions on implementation and usage of this module please review the module's documentation.

Quick Start - for Use With Bootstrap Barrio 5 Theme

See Theme Toggler documentation for Bootstrap Barrio 5 theme for detailed instruction

1. Download & install the Barrio Bootstrap 5 Theme.
2. Copy bootstrap folder in `../web/vendor/twbs/`, in full, to your sites libraries folder at `..web/libraries/`.
3. Set Barrio Bootstrap 5 as the default theme.
4. From the Bootstrap Barrio settings panel, change the `Load Library` to `Local`.
5. From the Barrio settings->components->navbar structure, set all color settings to 'default'.
6. Download & enable the Bootstrap Theme Toggler module.
7. Place Theme Toggler block onto your site in any region.
8. Use the `bootstrap_theme_toggler/css/_component_overrides.css` to allow theme mode's to override any Barrio classed components.

Quick Start - for Use With Bootstrap Barrio 5 SASS Theme

See Theme Toggler documentation for SASS sub-theme for detailed instruction

1. Download & install the Barrio Bootstrap 5 Theme & SASS Starter Kit
2. Create SASS sub-theme using Start Kit script & install theme dependencies
3. If using Drupal 10, update `sass_sub_theme.libraries.yml`, `global-styling` library to reference `js/popper.min.js`.
4. Set SASS sub-theme as the default theme for site.
5. Download & enable the Bootstrap Theme Toggler module.
6. Add `bootstrap_theme_toggler/scss/themes.scss` file to the SASS theme's `import.scss` file.
7. Update SASS sub-theme's `gulpfile.js` to add Theme Toggler's scss folder to watch list.
8. Place Theme Toggler block onto site in any region.
9. Modify light & dark mode theme palettes using `bootstrap_theme_toggler/scss/default_overrides.scss`.
10. Create/edit custom color mode's for additional theme palettes.

Additional Requirements

This module is intended for use with themes that are compatible with color modes introduced with Bootstrap 5.3.

Required Libraries

• Bootstrap 5.3, or later
• Popper.js (or bootstrap bundled with popper)

Recommended Themes

Bootstrap Barrio 5 Theme
Bootstrap 5 - SASS Start Kit based sub-themes