Skip to content

Commit

Permalink
Dark mode: add a warning callout to Orange's colors section
Browse files Browse the repository at this point in the history
  • Loading branch information
julien-deramond committed Dec 27, 2023
1 parent cabe651 commit 9e27814
Showing 1 changed file with 5 additions and 1 deletion.
6 changes: 5 additions & 1 deletion site/content/docs/5.3/utilities/colors.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 texts can be shown on both light and dark backgrounds (when there is a mode selector for instance), 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>
Expand Down

0 comments on commit 9e27814

Please sign in to comment.