data-bs-theme auto

[FaridAghili]

Hi 👋
Thanks everyone for all the great work on v5.3 and dark mode, amazing 😍

I've some difficulty implementing proper dark mode switcher:

• When user selects "light", I set data-bs-theme=light on html tag. All good.

• When user selects "dark", I set data-bs-theme=dark on html tag. All good.

• But when user selects "auto", what should I set?

I've tried to not set anything at all but it defaults to "light". The problem is, if user is using dark mode on device, it doesn't respect that.

Then I've tried to get user's preferred mode in JS and set proper them, it works but there is a flicker on page load of user prefer dark.

On getbootstrap.com home page, you're using data-bs-theme=auto, but It's not defined in bootstrap.css.

Am I doing it wrong?

[julien-deramond]

Hi @FaridAghili.
IDK if you've seen it but you can reuse our color-modes.js that is used in our docs to handle the switcher. Or at least you should be able to take inspiration from it.

[TrinsyCa]

Hi 👋 I have a question.

How can i when user selects "light" or "dark" , I set data-bs-theme="light" or "dark" on html tag ?

I'm a student and somehow I couldn't find anywhere how to edit the data-bs-theme tag.

[AucT]

if you want button in navigation like on https://getbootstrap.com/ check it's source code and https://getbootstrap.com/docs/5.3/assets/js/color-modes.js

if you want simple buttons check my demo https://auct.github.io/uajax/demo/ and this https://auct.github.io/uajax/demo/dark-theme-switcher.js

[mdo]

https://github.com/twbs/examples/tree/main/color-modes has an official example project using our color mode switcher JavaScript from our docs.

[TrinsyCa]

https://github.com/twbs/examples/tree/main/color-modes has an official example project using our color mode switcher JavaScript from our docs.

if you want button in navigation like on https://getbootstrap.com/ check it's source code and https://getbootstrap.com/docs/5.3/assets/js/color-modes.js

if you want simple buttons check my demo https://auct.github.io/uajax/demo/ and this https://auct.github.io/uajax/demo/dark-theme-switcher.js

u helped a lot thanks 😊

[palcarazm]

if you want button in navigation like on https://getbootstrap.com/ check it's source code and https://getbootstrap.com/docs/5.3/assets/js/color-modes.js

if you want simple buttons check my demo https://auct.github.io/uajax/demo/ and this https://auct.github.io/uajax/demo/dark-theme-switcher.js

Very awesome demo!🥳

I also develop a bs darkmode toggler plugin.

https://palcarazm.github.io/bs-darkmode-toggle/

If you like It, it's published in npm and use JSdelivr as CDN.

[HamishRM86]

A very basic toggler is here.
https://codepen.io/HamishRM86/pen/VYaXVwj