Mantine
Mantine color scheme support with SSR #4181
zbraniecki
started this conversation in
Feedback
Replies: 1 comment 2 replies
-
|
Mantine 7.0 will introduce new way to handle color scheme with css only. |
Beta Was this translation helpful? Give feedback.
2 replies
-
|
Is there a way to test Mantine 7.0? |
Beta Was this translation helpful? Give feedback.
-
|
When first alpha version is out it will be announced on Discord |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I've been trying to get Next.js (beta) to work with Mantine for persistent color scheme support.
By design the idea of persisting the color scheme selection is challenging especially in combination with SSR and in most scenarios leads to "FART" (as described here).
I found a way to handle persistent color scheme with SSR support by forcing one requirement - no UI decision that is color scheme related is being made dynamically in JSX.
I moved everything related to such decisions to CSS which controls "light" and "dark" variables that are then used in the code. This takes care of "default" state where the color scheme follows OS color scheme.
Now, for the persisted one, I use local storage and the only change I had to make was to add
data-color-schemeattribute on<html>element that combines with the media query forprefers-color-scheme.The source code is here, and the demo is here.
Unfortunately, this model breaks down when starting to use more of Mantine because Mantine components expect the color scheme to be set in JSX.
It seems to me that this is unnecessary. If Mantine components were to expose a variable that by default follows light/dark mantine color palette choices, then the user would be able to manually override them in CSS without ever having to resolve it in JS making it work both from SSR and in client side.
For example, currently, adding
AppShellor NavBarto my demo doesn't work well because in case ofdarkmode choice, the background stays white because I didn't specifycolorSchemein theMantineThemeProvider. But ifNavBarwould juse use--mantine-navbar-background-rgbvariable, then I can populate it with--mantine-navbar-backgroud-rgb: var(--mantine-color-black-6)` for dark, and some white for light theme and have SSR compile and ship it.Could you consider moving all color scheme related CSS decisions to CSS to allow for this to work?
Beta Was this translation helpful? Give feedback.
All reactions