Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Merge requests
  • !37562

Docs: display examples based on the docs current color mode

  • Review changes

  • Download
  • Email patches
  • Plain diff
Merged Julien Déramond requested to merge main-jd-display-examples-in-dark-mode into main Nov 29, 2022
  • Overview 2
  • Commits 2
  • Pipelines 0
  • Changes 27

Description

This PR adds the color mode JS in the example layout. It also replaces .bg-light by .bg-body-tertiary to fix some color issues; but more tweaks should be added to really fix the other issues.

Motivation & Context

Users should be able to access the examples in dark mode as well. This is a prototype to see how it would be if we just take into account the current color mode of the docs to display our examples. Another option would be to change it on the fly within the example OR to provide a light/dark button in the list of examples to display specifically one of them.

@mdo I'm not sure in which direction to go yet so your thoughts will be very important here :) IMHO it could be a first version before having something more complicated, but it'll "force us" to fix all the tiny issues in the examples in dark mode.

Another question here, do we need to mention in the migration guide that the markups (at least) have changed. Could be useful for people using the previous one as is and deciding to use the new dark mode.

Type of changes

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

Checklist

  • I have read the contributing guidelines
  • My code follows the code style of the project (using npm run lint)
  • My change introduces changes to the documentation
  • I have updated the documentation accordingly
  • All new and existing tests passed

Live previews

  • https://deploy-preview-37562--twbs-bootstrap.netlify.app/docs/5.3/examples

Related issues

Related to https://github.com/twbs/bootstrap/issues/37549

Assignee
Assign to
Reviewers
Request review from
Time tracking
Source branch: main-jd-display-examples-in-dark-mode