[system] Introduce mode to CssVarsProvider#29418
Merged
siriwatknp merged 40 commits intomui:masterfrom Nov 2, 2021
Merged
Conversation
|
@material-ui/system: parsed: +7.36% , gzip: +4.66% |
siriwatknp
commented
Nov 1, 2021
| } as unknown as MediaQueryList); | ||
| }); | ||
| afterEach(() => { | ||
| window.matchMedia = originalMatchmedia; |
Member
Author
There was a problem hiding this comment.
need to reset the matchMedia, otherwise, it will affect some tests in the project.
siriwatknp
commented
Nov 1, 2021
docs/pages/joy.tsx
Outdated
| @@ -0,0 +1,207 @@ | |||
| import * as React from 'react'; | |||
Member
Author
There was a problem hiding this comment.
This file is for the preview demo. (will be deleted before merging).
mnajdova
requested changes
Nov 2, 2021
Member
mnajdova
left a comment
mnajdova
left a comment
There was a problem hiding this comment.
I really think we should use dark and light instead of day and night.
docs/pages/joy.tsx
Outdated
| const { mode, setMode, colorScheme, setColorScheme } = useColorScheme(); | ||
|
|
||
| // When mounted on client, now we can show the UI | ||
| React.useEffect(() => setMounted(true), []); |
Member
Author
There was a problem hiding this comment.
To prevent SSR className mismatch because on the server there is no mode | colorScheme. Here is the explanation https://github.com/pacocoursey/next-themes#usetheme
This page is for demo only, will be removed before merging.
zannager
added
the
scope: system
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
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.
Summary
This PR separates
modefromcolorScheme, so that the application can achieve the upcoming toggle on the Joy page (design link).The
modewill always beday | night | system. The application cannot replace or add more modes. However, they can have unlimited color schemes (light,darkis the default color scheme from the design system).Primer design system also apply this approach
Changes
Demo: https://deploy-preview-29418--material-ui.netlify.app/joy/
useColorSchemeprovidemodeandcolorScheme.dayandnightmode separately.