5 ms·

I'd love to see a built-in dark mode! I develop a SaaS-type control panel and many of my users spend hours a day interacting with it. Requests for a dark mode h

by Meekro 6y ago

I'd love to see a built-in dark mode! I develop a SaaS-type control panel and many of my users spend hours a day interacting with it. Requests for a dark mode have been increasing over the last year, but restyling every built-in Bootstrap component feels clumsy.

Jugurtha 6y ago
Can your users install extensions? Dark Reader[1] works well enough that I don't care if websites offer dark mode, they are dark for me. [1]: https://darkreader.org/ https://darkreader.org/
sebazzz 6y ago
Do you use CSS or a preprocessor like SCSS? In the later it is mostly a matter of changing a few variables.
- Meekro 6y ago
  You can create a dark mode by changing a few variables, and all of the Bootstrap components will still look right? Can you show me how?
  - ceejayoz 6y ago
    Yes. https://bootswatch.com/darkly/ https://bootswatch.com/darkly/ It's just a matter of setting some Sass variables. https://getbootstrap.com/docs/4.1/getting-started/theming/ https://getbootstrap.com/docs/4.1/getting-started/theming/
  - deleted 6y ago
    [deleted]
zyang 6y ago
CSS custom properties would be a step in that direction. Although native dark mode support would be nice.
purerandomness 6y ago
The beauty of Bootstrap is that it's easily tweakable with SCSS variables. If you do, make sure you use Bootstrap's color-yiq() function so you'll always have the same color/text contrast, in dark and in light mode. Read more about Bootstrap's color-yiq() here: https://getbootstrap.com/docs/4.5/getting-started/theming/#color-contrast https://getbootstrap.com/docs/4.5/getting-started/theming/#c...
mdo 6y ago
Unsure how we'll tackle this overall, but we are looking at increased customization and variants for a handful of key components. This might be a mistake, and if so, we'll hope to hear it in the alphas so we can shift gears and do dark mode across the framework. That said, it could be too far reaching and mean it'd come in v6.

by Meekro 6y ago

Jugurtha 6y ago

Can your users install extensions? Dark Reader[1] works well enough that I don't care if websites offer dark mode, they are dark for me. [1]: https://darkreader.org/ https://darkreader.org/

sebazzz 6y ago

Do you use CSS or a preprocessor like SCSS? In the later it is mostly a matter of changing a few variables.

Meekro 6y ago
You can create a dark mode by changing a few variables, and all of the Bootstrap components will still look right? Can you show me how?
- ceejayoz 6y ago
  Yes. https://bootswatch.com/darkly/ https://bootswatch.com/darkly/ It's just a matter of setting some Sass variables. https://getbootstrap.com/docs/4.1/getting-started/theming/ https://getbootstrap.com/docs/4.1/getting-started/theming/
- deleted 6y ago
  [deleted]

zyang 6y ago

CSS custom properties would be a step in that direction. Although native dark mode support would be nice.

purerandomness 6y ago

The beauty of Bootstrap is that it's easily tweakable with SCSS variables. If you do, make sure you use Bootstrap's color-yiq() function so you'll always have the same color/text contrast, in dark and in light mode. Read more about Bootstrap's color-yiq() here: https://getbootstrap.com/docs/4.5/getting-started/theming/#color-contrast https://getbootstrap.com/docs/4.5/getting-started/theming/#c...

mdo 6y ago

Unsure how we'll tackle this overall, but we are looking at increased customization and variants for a handful of key components. This might be a mistake, and if so, we'll hope to hear it in the alphas so we can shift gears and do dark mode across the framework. That said, it could be too far reaching and mean it'd come in v6.