With Pigment CSS, it's unclear how to manually switch palette mode (light / dark)

[aleksei-berezkin]

Steps to reproduce

Link to live example: https://github.com/aleksei-berezkin/mui-pigment-example/

Steps:

1. Try to find some info in MUI migration guide — no info
2. According to Pigment CSS Readme, try to add getSelector somewhere in theme created in next.config.ts

Current behavior

• Not possible to add getSelector into an object passed to createTheme() — doesn't compile
• Changing createTheme() to extendTheme() (from '@pigment-css/nextjs-plugin') doesn't work — theme.spacing is now undefined in page.tsx
• Changing to extendTheme({...createTheme()}) doesn't compile

Expected behavior

There should be a documented way to switch themes manually

Context

No response

Your environment

System:
  OS: macOS 14.0
Binaries:
  Node: 20.14.0 - /opt/homebrew/opt/node@20/bin/node
  npm: 10.7.0 - /opt/homebrew/opt/node@20/bin/npm
  pnpm: 9.11.0 - /opt/homebrew/opt/node@20/bin/pnpm
Browsers:
  Chrome: 130.0.6723.117
  Edge: Not Found
  Safari: 17.0
npmPackages:
  @emotion/react: ^11.13.3 => 11.13.3 
  @emotion/styled: ^11.13.0 => 11.13.0 
  @mui/core-downloads-tracker:  6.1.6 
  @mui/material: ^6.1.6 => 6.1.6 
  @mui/material-pigment-css: ^6.1.6 => 6.1.6 
  @mui/private-theming:  6.1.6 
  @mui/styled-engine:  6.1.6 
  @mui/system:  6.1.6 
  @mui/types:  7.2.19 
  @mui/utils:  6.1.6 
  @pigment-css/nextjs-plugin: ^0.0.26 => 0.0.26 
  @pigment-css/react:  0.0.25 
  @pigment-css/unplugin:  0.0.26 
  @types/react: ^18.3.1 => 18.3.12 
  react: ^18.3.1 => 18.3.1 
  react-dom: ^18.3.1 => 18.3.1 
  typescript: ^5.6.3 => 5.6.3 

Search keywords: Pigment, material-pigment-css, palette mode

[siriwatknp]

I am putting this issue to high priority.

[oliviertassinari]

I guess we should transfer this issue to https://github.com/mui/pigment-css? I mean why should it be any different in Material UI compared to in Pigment CSS https://github.com/mui/pigment-css?tab=readme-ov-file#switching-color-schemes?

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@aleksei-berezkin How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[mnajdova]

@aleksei-berezkin I've updated the Material UI + Pigment CSS + next.js example, you can take a look at the code here, or check the StackBlitz link.

The example also show how you can use cookie to save the option the user chooses, and also uses a local storage to sync the mode switch between different tabs. I hope this helps.