Darkmode issue? | Mantine | Page 1

rich thicket Oct 9, 2022, 6:16 PM

#

My MantineProvider has the colorScheme set to dark but the content of the AppShell is still in light mode.

function App({ Component, pageProps }: AppProps) {
  const [opened, setOpened] = React.useState(false);

  return (
    <NavContext.Provider value={{ opened, setOpened }}>
      <MantineProvider theme={{ colorScheme: "dark" }}>
        <Component {...pageProps} />
      </MantineProvider>
    </NavContext.Provider>
  );
}

fathom hazel Oct 9, 2022, 6:17 PM

#

https://mantine.dev/theming/mantine-provider/#css-reset-and-global-styles

MantineProvider

React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience

#

rich thicket Oct 9, 2022, 6:17 PM

#

ah

foggy lantern Oct 9, 2022, 6:18 PM

#

Nope, it's not in light mode. Look at the sidebar. Like @fathom hazel pointed out, it's your body background-color that's not set.

rich thicket Oct 9, 2022, 6:18 PM

#

makes sense

fathom hazel Oct 9, 2022, 6:18 PM

#

90%+ of the time you basically want to have withNormalizeCSS withGlobalStyles set on MantineProvider

#

there are some cases where maybe you want to force external styles to take over where you won't need it

#

but usually it's a good idea to just assign both those props

rich thicket Oct 9, 2022, 6:19 PM

#

yep

fathom hazel Oct 9, 2022, 6:19 PM

#

with them off you'll see other issues, like Select having a horizontal scrollbar

#Darkmode issue?