Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dark mode: rework Color Modes pages #2442

Merged
merged 4 commits into from
Dec 27, 2023
Merged

Dark mode: rework Color Modes pages #2442

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4fceb3b
Dark mode: rework Color Modes pages
julien-deramond Dec 27, 2023
cb372c9
.
julien-deramond Dec 27, 2023
462eddf
.
julien-deramond Dec 27, 2023
a4e16fd
.
julien-deramond Dec 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 32 additions & 1 deletion site/content/docs/5.3/customize/color-modes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,41 @@ added: "5.3"

## Dark mode

**Boosted now supports color modes, starting with dark mode!** With v5.3.0 you can implement your own color mode toggler (see below for an example from Boosted's docs) and apply the different color modes as you see fit. We support a light mode (default) and now dark mode. Color modes can be toggled globally on the `<html>` element, or on specific components and elements, thanks to the `data-bs-theme` attribute.
**Boosted now supports color modes, starting with dark mode!** With v5.3.3 you can implement your own color mode toggler (see below for an example from Boosted's docs) and apply the different color modes as you see fit. We support a light mode (default) and now dark mode. Color modes can be toggled globally on the `<html>` element, or on specific components and elements, thanks to the `data-bs-theme` attribute.

This `data-bs-theme` attribute will automatically apply the corresponding `color` and `background-color` properties of the targeted element.

{{< example class="d-flex flex-column gap-4" >}}
<div class="p-1">
<h1>Title</h1>
<p class="lead mb-0">This is a lead paragraph.</p>
</div>
<div class="p-1" data-bs-theme="light">
<h1>Title</h1>
<p class="lead mb-0">This is a lead paragraph.</p>
</div>
<div class="p-2" data-bs-theme="dark">
<h1>Title</h1>
<p class="lead mb-0">This is a lead paragraph.</p>
</div>
<div class="bg-supporting-blue p-2" data-bs-theme="light">
<h1>Title</h1>
<p class="lead mb-0">This is a lead paragraph.</p>
</div>
{{< /example >}}

{{< callout warning >}}
Applying a color mode directly on a component or element (especially with some basic HTML elements, form controls, etc.), some unexpected rendering may occur. It is mostly related to the automatic change of `color` and `background-color` properties linked to the color mode.

Most of the time, the workaround will be to add a `data-bs-theme` attribute on the parent element of the component or element you want to apply a color mode to.
{{< /callout >}}

Alternatively, you can also switch to a media query implementation thanks to our color mode mixin—see [the usage section for details](#building-with-sass). Heads up though—this eliminates your ability to change themes on a per-component basis as shown below.

### Contextual dark mode vs. dark variants

Before v5.3.3, Boosted had dark variants for some components by applying `.{component}-dark` classes. These classes don't exist anymore and have been replaced by contextual dark mode. This means that all components will automatically switch to dark mode when the `data-bs-theme` attribute is set to `dark` on the parent element or the component itself.

## Example

For example, to change the color mode of a dropdown, add `data-bs-theme="light"` or `data-bs-theme="dark"` to the parent `.dropdown`. Now, no matter the global color mode, these dropdowns will display with the specified theme value.
Expand Down