[customization] Working with custom themes & Extend Theme issue

[Rafcin]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

@siriwatknp

Link to live example: https://oxygen-sandbox-git-main-rafcin.vercel.app/
Repo: https://github.com/Rafcin/oxygen-sandbox/tree/main

Steps:

1. Build the project by running pnpm sandbox:build.
2. Run pnpm dev
3. Load the app and use the navigation light dark mode button to see the issue.

Current behavior 😯

I've been confused by the MUI documentation and best practices, and I apologize if any of this is wrong.

So I've been following https://mui.com/material-ui/experimental-api/css-theme-variables/customization/#color-schemes trying to make a component library built on MUI that has a dark and light mode. For the most part, it works, I have a small personal site deployed with it currently, and it works really well! Now when the new 12 MUI release came out on the 6th (https://github.com/mui/material-ui/releases/tag/v5.11.12), I updated the packages, and when I used my site in dev mode, my theme would constantly stay white and use the default theme values. I found out moments ago, when gutting my project and making a minimal reproduction after removing all the important stuff, this issue appeared, and I'm still on version 11. Perhaps this isn't an extended theme issue, or maybe it is; I'm actually really unsure.

Also, this repo contains my little component library I've been working on for a while, I really love MUI and I have an obsession with AirBnB, and this is my attempt at trying to meld the two together. I'm really happy with it, and if you happen to look at the code and see something I should change or improve, let me know, it's not great code, but it's been slowly improving!!!

Edit After writing this, I deployed the app to Vercel, and magically it works on Vercel; I really don't understand the issue now; I have this weird, odd feeling it's Emotion, and Emotion already drives me nuts with the Next 13 issues and all.

Expected behavior 🤔

Usually when you switch modes it should go from dark to light or light to dark depending on the system default.,

Context 🔦

For now, I want to get light and dark themes to work, but my hope with this issue is to raise some more awareness regarding themes and extend MUI components for custom component libraries. It took me a while to make this component library, and I hope to turn this into a component library that has a set of themes people can use and components that are helpful that MUI doesn't offer out of the box. It would be nice to see the theme system be more flexible and work with theme types to be more accessible.

Your environment 🌎

npx @mui/envinfo

 System:
    OS: Linux 5.19 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
  Binaries:
    Node: 19.7.0 - ~/.nvm/versions/node/v19.7.0/bin/node
    Yarn: 1.22.17 - /usr/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v19.7.0/bin/npm
  Browsers:
    Chrome: 111.0.5563.64
    Firefox: Not Found
  npmPackages:
    typescript: ^4.9.5 => 4.9.5 

[mnajdova]

It may be related to the changes done in #35739, but I can't run locally the repository that you've shared. I am on Windows. Can you check if everything is setup correctly? I am getting this error:

@oxygen/sandbox:dev: Module not found: Can't resolve 'swiper/css'

Looks like it's related to some of the last commits on the repo.

[mnajdova]

You can also try to setup a codesandbox with the reproduction if it's easier.

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.