Implement dark mode #9181
Merged
Implement dark mode #9181
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
|
Size Change: 0 B Total Size: 1.44 MB ℹ️ View Unchanged
|
cemms1
force-pushed
the
implement-dark-mode
branch
2 times, most recently
from
cd55c2d to
1d8be34
Compare
- Uses CSS vars to provide colours - Adds support for dark mode - Adds an example component and story
cemms1
force-pushed
the
implement-dark-mode
branch
from
40f8220 to
9b48ee9
Compare
georgeblahblah
approved these changes
Oct 19, 2023
mxdvl
reviewed
Oct 20, 2023
| * Creates storybook decorator used to wrap components in an element | ||
| * containing the light or dark mode palette colours. | ||
| * | ||
| * @param colourScheme Choose whether to use the light or darPerformanceNavigation.type palette. |
There was a problem hiding this comment.
I love PerformanceNavigation.type as much as the next person, but not sure what it’s doing there…
There was a problem hiding this comment.
how are you SO eagle eyed
|
I ran some numbers, and it’s worth noting that the uncompressed weight of light & dark mode for a complete palette could be just shy of ~9kB. In the absolute worse case scenario of having all 864 formats (8 × 27 & times 4), we could be shipping up to ~7.5MB of CSS. |
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.
What does this change?
As part of a WebX mobbing session, this PR builds upon the proof of concept work set out in #7766 to implement CSS variables to control the palette colours depending on the client colour scheme preference.
This is currently done for
ArticlePageby adding the CSS variables into emotion'sGlobalcomponent, already used for some global styling.Dark mode CSS will be loaded for apps if the switch is turned on in frontend (guardian/frontend#26650)
Why?
As part of our DCAR migration, this introduces the pattern to follow to introduce a palette for dark mode into components (resolves #9175)