diff --git a/site/content/docs/5.3/customize/color-modes.md b/site/content/docs/5.3/customize/color-modes.md index 6ccb311418..c1c93e2c28 100644 --- a/site/content/docs/5.3/customize/color-modes.md +++ b/site/content/docs/5.3/customize/color-modes.md @@ -14,7 +14,7 @@ Color mode mechanism coming from Bootstrap is available from Boosted v5.3.0. However, the dark mode is not yet available in the Orange Design System specifications. -Please wait for the next Boosted versions to use it in your websites. +Please use Boosted v5.3.3 to have the dark mode available. {{< /design-callout-alert >}} {{< callout >}} diff --git a/site/content/docs/5.3/examples/download-app/download-app.css b/site/content/docs/5.3/examples/download-app/download-app.css index 14896f63a6..583397dd3d 100644 --- a/site/content/docs/5.3/examples/download-app/download-app.css +++ b/site/content/docs/5.3/examples/download-app/download-app.css @@ -66,7 +66,7 @@ } } -.dark-show { +[data-bs-theme="light"] .dark-show { display: none; } diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md index 1a8afd992e..d8dccff202 100644 --- a/site/content/docs/5.3/migration.md +++ b/site/content/docs/5.3/migration.md @@ -155,14 +155,6 @@ 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" >}}). -{{< design-callout-alert >}} -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 wait for the next Boosted versions to use it in your websites. -{{< /design-callout-alert >}} - - **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. diff --git a/site/layouts/_default/baseof.html b/site/layouts/_default/baseof.html index fdf19b31f0..0714faf3aa 100644 --- a/site/layouts/_default/baseof.html +++ b/site/layouts/_default/baseof.html @@ -1,5 +1,5 @@ - + {{ partial "header" . }} diff --git a/site/layouts/_default/examples.html b/site/layouts/_default/examples.html index 17051a15e1..5690e9a1f8 100644 --- a/site/layouts/_default/examples.html +++ b/site/layouts/_default/examples.html @@ -1,6 +1,9 @@ - + + {{- $colorModeJS := printf "/docs/%s/assets/js/color-modes.js" $.Site.Params.docs_version -}} + + @@ -87,6 +90,57 @@ {{- end }} + + + + + + + + + + + + + + + + +
+ + +
+ {{ .Content }} {{- if eq hugo.Environment "production" -}} diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html index 64b72095c0..d8d57b8ca8 100644 --- a/site/layouts/partials/docs-navbar.html +++ b/site/layouts/partials/docs-navbar.html @@ -52,6 +52,38 @@ {{ partial "docs-versions" . }} + diff --git a/site/layouts/partials/header.html b/site/layouts/partials/header.html index 2afa0e8abc..e97c19590c 100644 --- a/site/layouts/partials/header.html +++ b/site/layouts/partials/header.html @@ -23,6 +23,9 @@ +{{- $colorModeJS := printf "/docs/%s/assets/js/color-modes.js" $.Site.Params.docs_version -}} + + {{ partial "stylesheet" . }} {{ partial "favicons" . }} {{ partial "social" . }}