🟡 ⚫ Boosted dark mode prototype #1858
Merged
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
✅ Deploy Preview for boosted ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
julien-deramond
force-pushed
the
main-jd-boosted-dark-mode
branch
2 times, most recently
from
f046984
to
acbbdc0
Compare
julien-deramond
force-pushed
the
main-jd-boosted-dark-mode
branch
from
acbbdc0
to
f48f917
Compare
louismaximepiton
requested changes
Mar 15, 2023
There was a problem hiding this comment.
Quick wins:
- Set the
.highlight-toolbarbg tovar(--bs-tertiary-bg) - Set the tables bg to
transparentornull - Set
$link-color-dark: $whiteorcurrentColoror$gray-300and$link-hover-color-dark: $primary - Card example may have a bg-white on the first part ?
.ods-guidelinesmay usevar(--bs-tertiary-bg)as a background.
Components that don't fill the minimum requirements:
- Breadcrumbs (divider and text)
- Cards:
.card-header/footertext color - Close buttons (cross is not visible), maybe a
currentColorwell placed may do the trick - Form elements are barely detectable
- Popovers but might be better with the incoming PR
- Stickers
- Tags: some tag icons (mainly the first one)
- Toasts
- Link with chevron
- Focus
- Quantity selector
- Code blocks
- Tables: caption, background, ...
Misc
Many of them are broken on some variants but let's tackle this later (Dropdown hover, disabled states, code previews, etc...)
louismaximepiton
approved these changes
Mar 15, 2023
julien-deramond
commented
Mar 20, 2023
There was a problem hiding this comment.
@louismaximepiton Few comments to tackle together. But thanks for these modifications :)
|
Kudos, SonarCloud Quality Gate passed!
|
12 tasks
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.
This PR is a prototype to play with the first set of colors provided by the designers to define the dark mode for Boosted.
However, IMO it can be merged as-is since our current dark mode version is based on Bootstrap (their colors) and is broken in our environment, and hurt my eyes everyday 😄
In light mode, we have components and their dark variants.
In dark mode, the light and dark variants are displayed the same way (with a black background)
Some rules for dark mode:
#000000#eeeeee#ffffffFor the moment, all this behavior is not developed. Here is the list of things tried:
$body-color-dark: #eee$body-bg-dark: #000$body-tertiary-bg-dark: #414141bg-whitebybg-tertiary-bgLive preview