[Documentation] Add a demo for 3 states color scheme toggle with an additional Auto state #8102
Conversation
| @@ -0,0 +1,32 @@ | |||
| .root-background { | |||
There was a problem hiding this comment.
I made this change per your request.
I would beg to differ this decision, though.
Eversince I starting doing web development the naming of css classes have always been in kebab casing.
If we want the imported class name in camel case, we may want to borrow some ideas from here instead:
vercel/next.js#11267
| } | ||
|
|
||
| .dark { | ||
| @mixin dark { |
There was a problem hiding this comment.
Use light-dark function instead of @mixin light and @mixin dark
| Users may interact with the color scheme toggle assuming that the site will continue to follow their operating system's color preferences on future visits. | ||
| To address this, in addition to calling `clearColorScheme` when the root component mounts, you can also use a `SegmentedControl` with three options—such as `Light`, `Dark`, and `Auto`—allowing users to revert to automatic color scheme detection at any time. |
There was a problem hiding this comment.
Remove this description, replace with title: "Example: auto 3 state scheme toggle".
| function Demo({ | ||
| iconSizeInRem, | ||
| iconStroke = 2.5, | ||
| transitionDuration = 200, | ||
| ...restProp | ||
| }: ColorSchemeSegmentedControl) { |
There was a problem hiding this comment.
Demo components must not accept props.
| const theme = useMantineTheme(); | ||
| const { colorScheme, setColorScheme } = useMantineColorScheme(); | ||
| const [colorSchemeSegmentedControlValue, setColorSchemeSegmentedControlValue] = useState( | ||
| 'auto' as MantineColorScheme |
There was a problem hiding this comment.
Use useState<MantineColorScheme> instead.
| const { colorScheme, setColorScheme } = useMantineColorScheme(); | ||
| const [colorSchemeSegmentedControlValue, setColorSchemeSegmentedControlValue] = useState( | ||
| 'auto' as MantineColorScheme | ||
| ); // Allow the state of SegmentedControl to change immediately, before the color scheme actually changes |
| const lightIcon = ( | ||
| <IconSun | ||
| style={{ width: iconSize, height: iconSize }} |
There was a problem hiding this comment.
Use size prop for icon instead of style with width and height.
…dditional Auto state
|
Mantine UI light dark mode switching for Next.js is a pain to setup. If there is a official guideline for this that would be great. Now, It flickers and hydration error occurs when we do light dark mode switching in Next.js. Other library provides official support for this. Why it's so hard for Mantine then? NB. Official guide only mentions problems with the SSR/Nextjs it's not suggesting any solution. |
|
This PR is not a place to provide feedback or ask questions. If you want to get help, submit an issue or ask a question in GitHub discussion. |
3 participants
Closes: #8101
