[material-ui][pigment-css] How to toggle between color modes
Open
@brijeshb42 is already working on this.
Since Sep 9, 2024.
package: pigment-css
type: new feature
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Steps to reproduce
Link to live example: (required) codesandbox
Steps:
- Deploy https://github.com/mui/material-ui/blob/master/examples/material-ui-pigment-css-nextjs-ts/src/app/page.tsx
- Add getSelector: (colorScheme) => colorScheme ?
.theme-${colorScheme}: ":root" to the theme file - Add a toggle button with logic like document.documentElement.classList.toggle("theme-light"); from the pigment css documentation
Current behavior
adds class="theme-light" or "theme-dark"Color scheme does not change after button click
Expected behavior
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/> without changing to a client component.
Your environment
npx @mui/envinfo
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
Search keywords: pigment-css v6
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.