Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs: change colors of position marker example to work with dark mode #38445

Merged
merged 2 commits into from Apr 21, 2023

Conversation

julien-deramond
Copy link
Member

@julien-deramond julien-deramond commented Apr 12, 2023

Description

This PR suggests changing the color of the marker shown in our docs in "Position > Examples" so that the colors can work either in light or dark modes.

The black color was better in light mode but we don't have any utilities to do the opposite (white color) in dark mode.

Motivation & Context

When https://twbs-bootstrap.netlify.app/docs/5.3/utilities/position/#examples is displayed in dark mode, one can't see the marker's shape:

Screenshot 2023-04-12 at 06 43 52

Type of changes

  • Enhancement (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
  • (N/A) I have added tests to cover my changes
  • All new and existing tests passed

Live previews

Related issues

Closes #38444

@julien-deramond
Copy link
Member Author

Linked to this PR, when I do this kind of change, it confirms somehow that we'd need some utilities that switch colors in light/dark mode. We have .bg-dark and .bg-black that stay black. We need something that is black in light mode and white in dark mode and could be named .bg-opposite or something else.

@julien-deramond julien-deramond marked this pull request as ready for review April 12, 2023 04:54
@mdo mdo merged commit 57df533 into main Apr 21, 2023
16 checks passed
@mdo mdo deleted the main-jd-make-position-marker-work-with-dark-mode branch April 21, 2023 03:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
Status: Done
Development

Successfully merging this pull request may close these issues.

Please fix marker SVG color, performance in dark mode
2 participants