#CSS Variables Resolver Errors

6 messages · Page 1 of 1 (latest)

mild stag
#

Hi Team,

const resolver: CSSVariablesResolver = (theme) => ({
  variables: {},
  light: {},
  dark: {
    '--mantine-color-body': theme.colors.blue[2],
  },
});
export default function RootLayout({ children }: { children: any }) {
  return (
    <html lang="en">
      <head>
        <ColorSchemeScript />
        <link rel="shortcut icon" href="/favicon.svg" />
        <meta
          name="viewport"
          content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
        />
      </head>
      <body>
        <MantineProvider theme={theme} cssVariablesResolver={resolver}>
          {children}
        </MantineProvider>
      </body>
    </html>
  );
}

I just use the default Next-app template and trying to add a resovler to replace default body background color, but I got this error.
Do you have any suggestions on fixing this?
Thanks

image.png image.png
olive stone
#

I think you may need to also add a value for that var in the light argument

mild stag
#

doesn't work : (

mild stag
#

Seems you have to add "use client" and also make sure the metadata is not Export

image.png
olive stone
#

And metadata only works for server components btw. I suggest creating a wrapper component for the provider so your layout remains a server component