From 3659b8cae282ab07e8e741360211887b8ad368f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Thu, 14 Dec 2023 10:02:32 +0100 Subject: [PATCH] Dark mode: enhance Color Modes v5.3.0 explanation in migration guide (#2413) --- site/content/docs/5.3/migration.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md index 44c5896e09..309ac3e040 100644 --- a/site/content/docs/5.3/migration.md +++ b/site/content/docs/5.3/migration.md @@ -225,6 +225,10 @@ If you need more details about the changes, please refer to the [v5.3.0 release] Learn more by reading the new [color modes documentation]({{< docsref "/customize/color-modes" >}}). +{{< callout danger >}} +Color mode mechanism coming from Bootstrap is available from Boosted v5.3.0. However, the dark mode was not yet available in the Orange Design System specifications at this time. **Please use at least Boosted v5.3.3 to have the dark mode available.** +{{< /callout >}} + - **Global support for light (default) and dark color modes.** Set color mode globally on the `:root` element, on groups of elements and components with a wrapper class, or directly on components, with `data-bs-theme="light|dark"`. Also included is a new `color-mode()` mixin that can output a ruleset with the `data-bs-theme` selector or a media query, depending on your preference. - **New extended color system.** We've added new theme colors (but not in `$theme-colors`) for a more nuanced, system-wide color palette with new secondary, tertiary, and emphasis colors for `color` and `background-color`. These new colors are available as Sass variables, CSS variables, and utilities.