README

Bootstrap 5 Theme Switcher

Enable seamless switching between light, dark and system default modes.

Install

Add my recipe repository endpoint in your project's composer.json as described in the Symfony documentation.

{
  "extra": {
    "symfony": {
      "endpoint": [
        "https://api.github.com/repos/neuralglitch/symfony-recipes/contents/index.json",
        "flex://defaults"
      ]
    }
  }
}

Warning

If you don't, Composer will not use the Symfony Flex recipe for this bundle and you will need to follow these manual installation instructions.

Tip

The extra.symfony key will most probably already exist in your composer.json. In that case, add the endpoint key to the existing extra.symfony entry.

composer require neuralglitch/bootstrap-theme-switch

Execute the appropriate commands to build the frontend, if necessary.

Usage

Modify the base template

templates/base.html.twig

<html 
    data-bs-theme="{{ app.session.get('_theme', 'light') }}" 
    data-system-theme="{{ app.session.get('_is_system_theme', '0') }}">

Include one of the partial templates anywhere

i.e. templates/partials/footer.html.twig

    ...
    {% include '@BootstrapThemeSwitch/button.html.twig' %}
    ...

    ...
    {% include '@BootstrapThemeSwitch/select.html.twig' %}
    ...

If that's not enough, refer to the advanced usage instructions.

Now start to switch the Bootstrap theme in your application without glitches.

Uninstall

Warning

Wiithout the Symfony Flex recipe, Composer will not completely remove the bundle and you will need to follow these manual removal instructions.

composer remove neuralglitch/bootstrap-theme-switch

Execute the appropriate commands to build the frontend, if necessary.

What' next?

Upcoming features

neuralglitch / bootstrap-theme-switch

Maintainers

Details