Unable to switch color mode with useTheme when using SSR with generating themes

[hahahumble]

Describe the bug Unable to switch color mode with useTheme() when using SSR with generating themes.

To Reproduce I used generating themes, and when using React, I can normally switch the color mode with useTheme(), but when using next.js, it doesn't work.

1. React example
2. Next.js example

Environment:

• Version 2.10.6

[blvdmitry]

I think that might happen because Reshaped is defined in the root layout which is a server component in Next.js. That means that its JS code is not loading and it can't switch the value in the context when you use the hook. Can you try checking if moving the Reshaped provider to a client component helps in your case?

https://reshaped.so/docs/getting-started/integrations/next#create-an-app-component

[hahahumble]

I tried to do it this way, but it still doesn't work.

CodeSandbox: Moving the Reshaped provider to a client component

[blvdmitry]

One last thing: you have data attributes on both html and body tags. When you click on the theme switch, I see attributes updating on the html tag correctly but than body tag still overrides that back. Removing the from body should fix the issue I think

[hahahumble]

This will solve the problem 🎉

By the way, If I want to change the background color of a Button in dark mode, how should I do it? Or can dark mode use a different palette to generate theme?

This is my current configuration:

const { generateThemeColors } = require("reshaped/themes");

const config = {
  themes: {
    productTheme: {
      color: generateThemeColors({
        primary: "#0891b2",
        critical: "#e22c2c",
        positive: "#118850",
        neutral: "#dfe2ea",
      }),
    },
  },
};

module.exports = config;

[blvdmitry]

Right now dark mode values are generated automatically and that was one of the ideas on the list to be implemented as a follow-up. Can you create a separate issue so I can track it in the product board for one of the upcoming releases?

[hahahumble]

Sure!