Dark mode: add a warning callout to Orange's colors section (#2444)

site/content/docs/5.3/components/orange-navbar.md

@@ -384,6 +384,8 @@ You can add a mode selector control into your Global header.
 In this section, the dropdown menu items are not functional because the JavaScript is linked to the documentation mode selector; the active state and the tick icon are not rendered correctly. But don't worry, it'll work perfectly in your project.
 
 Don't forget to import the [corresponding color modes JavaScript]({{< docsref "/customize/color-modes#javascript" >}}) in your project.
+
+To easily integrate it in your project, you can start from our [Navbar mode selector example]({{< docsref "/examples/navbar-mode-selector" >}}).
 {{< /callout >}}
 
 <div class="bd-example-snippet">

site/content/docs/5.3/utilities/colors.md

@@ -62,9 +62,13 @@ To be sure to respect the specifications, it is necessary to define `color`, `ba
 Thus, the `.text-primary` color on white background (`#f16e00`) can only be used in a font size greater than 24px (using for example `.fs-3` utility), or 19px bold (using for example `.fs-4` and `.fw-bold` utilities).
 The `.text-primary` color on dark background (`#ff7900`) can be used in any size, and it shouldn't be used on light grey backgrounds at all.
 
+{{< callout warning >}}
+When the interface allows to switch between light and dark backgrounds, the light mode stricter restrictions must be applied!
+{{< /callout >}}
+
 Here are some compliant combinations examples for texts:
 
-  {{< example >}}
+{{< example >}}
 <div class="p-1" data-bs-theme="light">
   <p>regular text</p>
   <p class="text-primary fs-3">regular primary text with minimum font-size for contrast with .fs-3 (restrictive because of the light mode)</p>