Repository: material-ui
Issue: [material-ui][pigment-css] How to toggle between color modes
Labels: new feature,package: pigment-css

### Steps to reproduce

Link to live example: (required) [codesandbox](https://codesandbox.io/p/devbox/elegant-andras-frnk5m?workspaceId=257d2a8f-3202-4ba8-a303-97d6c62a9cf6&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cm0glfrow00063589334nnnrz%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cm0glfrov00023589vk16l4ga%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cm0glfrov00043589rxgyfg41%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cm0glfrow00053589z54c2l6v%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cm0glfrov00023589vk16l4ga%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm0glfrov00013589b6lziqi9%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522cm0sy68z3000k3585fkj0upgk%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A13%252C%2522startColumn%2522%253A36%252C%2522endLineNumber%2522%253A13%252C%2522endColumn%2522%253A36%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252Fapp%252Flayout.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522cm0glfrov00023589vk16l4ga%2522%252C%2522activeTabId%2522%253A%2522cm0sy68z3000k3585fkj0upgk%2522%257D%252C%2522cm0glfrow00053589z54c2l6v%2522%253A%257B%2522id%2522%253A%2522cm0glfrow00053589z54c2l6v%2522%252C%2522activeTabId%2522%253A%2522cm0sy9su5000o356j3ry8a0dg%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A3000%252C%2522id%2522%253A%2522cm0glig4c00703589mimmppfr%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%252C%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A3000%252C%2522id%2522%253A%2522cm0gm26oy000r35853whzlrw0%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A3000%252C%2522id%2522%253A%2522cm0sy9su5000o356j3ry8a0dg%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%252C%2522cm0glfrov00043589rxgyfg41%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm0glfrov000335895awxdf6w%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%257D%255D%252C%2522id%2522%253A%2522cm0glfrov00043589rxgyfg41%2522%252C%2522activeTabId%2522%253A%2522cm0glfrov000335895awxdf6w%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D)

Steps:
1. Deploy https://github.com/mui/material-ui/blob/master/examples/material-ui-pigment-css-nextjs-ts/src/app/page.tsx
2. Add getSelector: (colorScheme) => colorScheme ? `.theme-${colorScheme}` : ":root" to the theme file
3. Add a toggle button with logic like document.documentElement.classList.toggle("theme-light"); from the pigment css documentation


### Current behavior

<html> adds class="theme-light" or "theme-dark"

Color scheme does not change after button click

### Expected behavior

<html> adds class="theme-light" or "theme-dark"

Color scheme changes on button click

### Context

I'm trying to use mui v6 with pigment css with the ability to select a particular color scheme, overriding the system defaults. 

You'll also notice I had to comment out a Grid component in the codesandbox example. The nextjs pigment css example does not currently render with <Grid><Grid>Grid/><Grid/> without changing to a client component. 

### Your environment

<details>
  <summary><code>npx @mui/envinfo</code></summary>

```
   Replicated in Chrome

   System:
    OS: Linux 6.1 Ubuntu 20.04.6 LTS (Focal Fossa)
  Binaries:
    Node: 20.12.1 - /home/codespace/nvm/current/bin/node
    npm: 10.5.0 - /home/codespace/nvm/current/bin/npm
    pnpm: 8.15.6 - /home/codespace/nvm/current/bin/pnpm
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react:  11.13.3 
    @emotion/styled:  11.13.0 
    @mui/core-downloads-tracker:  6.0.2 
    @mui/material: 6.0.2 => 6.0.2 
    @mui/material-pigment-css: 6.0.2 => 6.0.2 
    @mui/private-theming:  6.0.2 
    @mui/styled-engine:  6.0.2 
    @mui/system:  6.0.2 
    @mui/types:  7.2.16 
    @mui/utils:  6.0.2 
    @pigment-css/nextjs-plugin: latest => 0.0.22 
    @pigment-css/react:  0.0.21 
    @pigment-css/unplugin:  0.0.22 
    @types/react: latest => 18.3.4 
    react: latest => 18.3.1 
    react-dom: latest => 18.3.1 
    typescript: latest => 5.5.4 
```
</details>


**Search keywords**: pigment-css v6