Docs: display examples based on the docs current color mode #37562
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
julien-deramond
force-pushed
the
main-jd-display-examples-in-dark-mode
branch
from
a1268d2
to
f6f9c15
Compare
mdo
force-pushed
the
main-jd-display-examples-in-dark-mode
branch
from
b5aa7b3
to
12086bd
Compare
|
Yes, let’s add a toggle later. And let’s also add a migration guide note, yes. I have a running list of things to update there. Will open a PR soon. |
mdo
approved these changes
Dec 29, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR adds the color mode JS in the example layout. It also replaces
.bg-lightby.bg-body-tertiaryto 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
Checklist
npm run lint)Live previews
Related issues
Related to #37549