Mui, PigmentCss, Vite, react-swc with Typescript setting up for Theme change manually

[babe5858]

https://codesandbox.io/p/devbox/buddika-test-forked-t69yqq

Hi, Would someone please be kind enough to help me to find out how to setup Mui, PigmentCss, Vite, react-swc with Typescript environment. I need to click a button and change the theme. I tried to use NextJs example, but getting a lot of errors. Please help. Thanks!

Search keywords:

[mj12albert]

@babe5858 Could you provide a minimal repro in a sandbox or a repo?

[babe5858]

@babe5858 Could you provide a minimal repro in a sandbox or a repo?

Really appreciate your quick response. If i can attach my pages, would that be okay?

[mj12albert]

If i can attach my pages, would that be okay?

@babe5858 We can't really look into issues without some runnable code that shows the issue, maybe you can fork this template as a start: https://codesandbox.io/p/devbox/strange-kirch-5fqkjl

Alternatively, clone this example repo

PS here are some tips for making a minimal example: https://stackoverflow.com/help/mcve

[babe5858]

Really appreciate your guidelines. I created a repo. Please check this:

https://codesandbox.io/p/devbox/strange-kirch-5fqkjl

I gave you edit access as well.

[mj12albert]

I created a repo. Please check this:

https://codesandbox.io/p/devbox/strange-kirch-5fqkjl

@babe5858 Hey I think this is the exact same link that I shared 😓

[babe5858]

@mj12albert I'm sorry, here is the correct link

https://codesandbox.io/p/devbox/buddika-test-forked-t69yqq

[mj12albert]

@babe5858 Did you start with a fork of the template I shared or the example repo? There are a lot of errors in your sandbox and a lot going on

Can you start with the template or the example repo and just add your styles in small steps to see where is it starting to go wrong ?

[babe5858]

@mj12albert : i forked this, https://codesandbox.io/p/devbox/strange-kirch-5fqkjl, and added my changes in app. Yes, its giving a lot of errors. is it related to bad viteConfig setup?

[babe5858]

If we forget about my repo/files above, at least if you can share a working example of a app, where Mui, PigmentCss, Vite, react-swc with Typescript is present in example page, and a simple button to change the theme with pigmentcss, i can study that and i can try it locally. Any thoughts

[babe5858]

is it Themeprovider needed for theming with pigmentCSS and how to setup it up and how to change theme in app with a button click. those are the main issues i have

[mj12albert]

if you can share a working example of a app, where Mui, PigmentCss, Vite, react-swc with Typescript

Here is a sandbox: https://codesandbox.io/p/devbox/holy-http-ygcwz2

This is the same example repo I previously shared.

The only change is @vitejs/plugin-react is replaced with @vitejs/plugin-react-swc

[github-actions]

👋 Thanks for using this project!

We use GitHub issues exclusively as a bug and feature requests tracker, however, this issue appears to be a support request.

For support with Material UI please check out https://mui.com/material-ui/getting-started/support/. Thanks!

If you have a question on Stack Overflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[babe5858]

if you can share a working example of a app, where Mui, PigmentCss, Vite, react-swc with Typescript

Here is a sandbox: https://codesandbox.io/p/devbox/holy-http-ygcwz2

This is the same example repo I previously shared.

The only change is @vitejs/plugin-react is replaced with @vitejs/plugin-react-swc

@mj12albert Thanks, with the app in place now, any thoughts how can i change theme in my defined light and dark customer colors schemes possible in above sandbox? i tried using documentations, but couldn't achieve it.

https://mui.com/material-ui/customization/dark-mode/#toggling-color-mode
https://www.npmjs.com/package/@pigment-css/react/v/0.0.3#theming

these didn't work for me. if you can help on this, that would be awesome! Anyway, really appreciate the help.