feat: hide unimplemented dark mode for v5.3.0

[julien-deramond]

Description

This PR will be the latest PR to merge just before the release of Boosted v5.3.0. It hides the dark mode as it is not yet implemented for Boosted. The inner mechanism will stay, but it must be deactivated from the documentation.

The content of this PR must be reverted right after the release so we can get back to work based on the main branch of Bootstrap. If a v5.3.1 is released before we have the time to release the dark mode, we'll get back this PR again.

Detailed content of this PR in terms of modifications:

• Drop data-bs-theme in the layouts used to display the documentation (base and examples)
• Drop usage of color-modes.js in documentation
• Drop theme selector from the example and page layouts
• Check all docs pages to evaluate if content must be adapted here:
  • Customize > Sass: import of variables-dark must remain.
  • Customize > Options: test if disabling $enable-dark-mode could be easier to understand and evaluate the impact for users
  • Customize > Color
    • Create another PR to remove the following sentence which isn't true "Boosted’s color palette has continued to expand and become more nuanced in v5.3.0." → fix(docs): replace some 'Bootstrap' occurences by 'Boosted' and drop a sentence #2045
    • Colors section must remain to understand the new custom properties
  • Color modes
    • Create another PR to change "Bootstrap" by "Boosted" in the description and other places in the file → fix(docs): replace some 'Bootstrap' occurences by 'Boosted' and drop a sentence #2045
    • Add a design callout to explain that it must not be used now because not implemented in Boosted
  • Customize > CSS Variables Dark mode section can stay as it explains only how it works internally.
  • Customize > Optimize: import of variables-dark must remain
  • Forms > Validation: "These variables are also color mode adaptive, meaning they change color while in dark mode." can remain as it explains the inner behavior
  • Components > Navbar > Color schemes seems well described even talking about data-bs-theme="dark". IMO can stay as-is.
  • Utilities > API: variables-dark imports must remain
  • Utilities > Background and Utilities > Colors: the new utilities must remain even if some colors might be not well understood without dark mode (especially the text ones with body and body-emphasis).
• Rewrite the migration guide so it remains understandable
• Double-check in Sass files if some things must be removed

Motivation & Context

The readers/users must understand by reading the documentation (migration guide included) that the inner mechanism for the color mode is available but they can't use it yet for the dark mode in their projects.

Types of change

• New feature (non-breaking change which adds functionality)

Live previews

• https://deploy-preview-2044--boosted.netlify.app/

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	f01a65e
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/64b933461718060008453f1a
😎 Deploy Preview	https://deploy-preview-2044--boosted.netlify.app/docs/5.3/migration
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[louismaximepiton]

Should we remove all the references to data-bs-theme="*" and color mode in the doc ? (https://deploy-preview-2044--boosted.netlify.app/docs/5.3/components/navbar/#external-content, https://deploy-preview-2044--boosted.netlify.app/docs/5.3/components/navbar/#color-schemes, https://deploy-preview-2044--boosted.netlify.app/docs/5.3/migration/). Imo it could be a bit weird to reference something that people can't use.

Should we really keep the import of variables-dark.scss? Imo it could be hidden in the doc since we disable it via $enable-dark-mode: false ass you mention. I don't know the way people are using Boosted but it seems like Bootstrap has some trouble with it, so maybe we can retain it for now and see ?

In the scss, I think we are fine since it doesn't impact the bundle if the $enable-dark-mode is set to false. The main things are in the docs CSS.

For the color-mode experience, I agree that we might need a callout on the color modes page but maybe we can add an informative callout that it'll come until v5.4 or asap or something ? Otherwise, we could maybe retouch some parts of the page like the homemade color mode and the javascript part ?

I couldn't think about something you didn't mentionned in the description so well done :)

[julien-deramond]

Finally chose to keep $enable-dark-mode set to true because it breaks examples in the "Colors modes" page and wouldn't be compatible with plugins and libraries based on Bootstrap v5.3.0. Might be more difficult to understand for the users, and some might be angry, but compatibility would be ensured. On top of that, it will be easier for us to maintain rather than having to revert a ton of modifications in the documentation.

[louismaximepiton]

LGTM 🚀 I don't think we can handle much apart warning users, let's give it a try !