Dark mode

[PigeardSylvain]

A dark mode is needed for all components.

Stencil

[Lausselloic]

dark mode would quite double the size of css.
We need to define the strategy for that, does all components need to have a dark alternative?

[ffoodd]

Using CSS custom properties, this should be quite easy and only cost a new declaration block redefining some variables.

body {
    --background: white;
    --color: black;
}

.component {
    background: var(--background);
    border-color: currentColor;
    color: var(--color);
}

.is-dark {
    --background: black;
    --color: white;
}

By setting main color scheme on body, you get it for free everywhere as a default. And by using a utility class to switch to dark theme, you'll be able to use it on a component, on an entire section, or even directly on body to globally use dark theme.

And being lazy would be good: ensure using currentColor everywhere color code should match font's color. Also keep in mind var() function gets a second argument for default value (could save time).

IMHO this is the best possible approach, but it's highly related to browser support: that means no dark mode for IE11…

[ffoodd]

I reply to myself on this: .browserlistrc mentions IE10 and some other browser which don't support CSS custom properties.

Might try the same way using inherit and currentColor keywords, but not quite sure that it would work everywhere…

Is the "for all components" thing serious? If it is, I guess that dark mode should probably not be component specific but application specific: making a whole Boosted dark mode.

I've done this before…

[ffoodd]

Maybe check SNCF's Bootstrap fork, which has a dark mode

[ffoodd]

@PigeardSylvain FWIW, since v5 dropped IE11 support, my suggestion using custom properties should be fine :)

Things that worked in v4:

• Close button
• Navbar
• Buttons (using .btn-inverse)
• Alerts (only links need to adapt, could be done globally)
• etc.

[ffoodd]

Discussions in Bootstrap are taking place in #27514 with an interesting suggestion by mdo.

[ffoodd]

Bootstrap added dark variants to some components, noticeably carousel and dropdown. Don't think it's a safe way to, though.

[MewenLeHo]

Some useful ressources about the prefers-color-scheme media query:
https://opensource.com/article/21/10/dark-themes-websites
https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme

[ffoodd]

This should not be handled as a user preference since it's a branding choice. Supporting user choice is a great idea but dark mode (in that case) is not about users.