Is using with Material UI or similar possible?

[balazsorban44]

I had a comment about asking to solve this issue @mui-org before: mui/material-ui#12827 (comment)

But just to be clear, there is probably no workaround to get this work with Material UI and similar libraries without them being able to read CSS variables, right?

[pacocoursey]

Great question!

This library does not rely on your theme styling using CSS variables. You can hard-code the values in your CSS, and everything will work as expected (without any flashing):

html, body {
  color: #000;
  background: #fff;
}

[data-theme="dark"],
[data-theme="dark"] body {
  color: #fff;
  background: #000;
}

I added that to the README. A lot of blog posts about dark mode (in fact, every single one...) get something wrong. No need to inject all of your CSS variables at all!

[pacocoursey]

Closing as this should be answered above. Let me know if you have another issue!

[SalahAdDin]

If i want to use this with material UI, which theme provider should i use?

[oliviertassinari]

@pacocoursey What solution would you recommend for getting it right on Material-UI?

[pacocoursey]

Can either of you point me to a basic example that uses Next.js + Material UI? I haven't used it before so I'm not sure of the best approach. I have a feeling it will be similar to the Styled Components example though, where you basically stack Next Theme's Theme Provider with the UI library's one.

[SalahAdDin]

@pacocoursey You can see the example here.

[oliviertassinari]

@pacocoursey We are migrating from JSS to emotion/styled-components in v5. If there is an example with styled-components, that would be great!

So far, the solution we have considered is to allow the usage of CSS variables in the theme. Then, add a layer to leverage these CSS variables effectively. I imagine something that would either add a media query for prefers-color-scheme for an auto-switch or something that would store the information in cookie / local storage, and swap the correct values before the first pain, with a lightweight blocking <script>.

[trm217]

You could consume the resolvedTheme of this package's context and pass it to the ThemeProvider to choose the according theme of emotion. This should work perfectly fine.

[nanderLP]

You could consume the resolvedTheme of this package's context and pass it to the ThemeProvider to choose the according theme of emotion. This should work perfectly fine.

could you give an example for that? I don't really understand what you mean with "this package's context".

[trm217]

You could consume the resolvedTheme of this package's context and pass it to the ThemeProvider to choose the according theme of emotion. This should work perfectly fine.

could you give an example for that? I don't really understand what you mean with "this package's context".

It's pretty simple, both emotion and next-themes have a theme provider. You must use the values of the next-themes theme provider and pass them to the emotion theme provider. That's it.

[JasonDevTech]

This is still not clear to me, can anyone be able to provide a simple example?

[balazsorban44]

Even the new mui.com suffers from a flush, so they might have not found a solution yet. (Change the theme to dark, and refresh the page. It will load in as light for a split second.)

They use Next.js https://github.com/mui-org/material-ui/tree/master/docs

@oliviertassinari

[oliviertassinari]

@siriwatknp started working on this problem, exploring moving to CSS variables, the related issue: mui/material-ui#15588.

[siriwatknp]

@balazsorban44 some resources that you might be interested in

• RFC about css variables open [RFC] CSS theme variables support mui/material-ui#27651.
• POC css variables [POC] CSS Variables mui/material-ui#28639
• POC of new design system that leverage css variables [POC] create JoySwitch mui/material-ui#28637

Some apis and implementation are inspired from this repo 😊

[pacocoursey]

Sweet, hopefully that RFC makes some headway on the MUI side of things so that the two libraries become compatible. I'm closing this for now, since it's more of an issue with whatever styling provider you decide to use.

[waza-ari]

As I was wondering the same question and this issue comes up, I want to share that it's quite easy to combine MUI with this library. It's essentially just wrapping the two Theme Providers like this (NextJS example, in this case app/providers.tsx, but could be used anywhere else I assume):

import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
import { ThemeProvider } from '@mui/material/styles';
import { ThemeProvider as NextThemeProvider, useTheme } from 'next-themes';
import { CssBaseline } from '@mui/material';

const Provider = ({ children }: { children: ReactNode }) => {
  return (
    <AppRouterCacheProvider options={{ enableCssLayer: true }}>
          <NextThemeProvider>
            <Content>{children}</Content>
          </NextThemeProvider>
    </AppRouterCacheProvider>
  );
};

const Content = ({ children }: { children: ReactNode }) => {
  const { resolvedTheme } = useTheme();
  return (
    <ThemeProvider theme={getTheme(resolvedTheme === 'dark')}>
        <CssBaseline />
        {children}
    </ThemeProvider>
  );
};

export default Provider;

where getTheme is any function returning your createTheme result, for example something like this:

import { deDE } from '@mui/material/locale';
import { createTheme } from '@mui/material/styles';

const getTheme = (dark: boolean) => {
  return createTheme(
    {
      palette: {
        mode: dark ? 'dark' : 'light',
        primary: {
          main: '#2b8a3e'
        },
        background: {
          default: dark ? darkTheme.bg : styledTheme.bg,
          paper: dark ? darkTheme.nav : styledTheme.nav
        },
        secondary: {
          main: '#f50057'
        }
      },    
   },
    deDE
  );
};

[zinuu4]

This way it flashes for a brief second when reloading

[siriwatknp]

I will share several options to integrate next-themes with Material UI after v6 stable is released (in a few weeks)!