[material-ui] Difficult to find correct info on theming with Pigment CSS in Vite

Related page

https://mui.com/material-ui/experimental-api/pigment-css/#themes

Kind of issue

Missing information

Issue description

Docs are great but the Theming section doesn't provide an example for Vite. I've looked around, including at the examples and the quick start video, however, these resources either assume the project is using Nextjs or they have conflicting code/information from the docs themselves. The docs are also insufficient as the pigmentConfig in the docs doesn't actually work as written (e.g. pigment(): expects 1 argument but got 0) and the example further down also doesn't supply enough code to actually run.

Anyway, I finally found the solution I needed buried here in the mui migrating to pigmentcss guide. I didn't realize this was the correct implementation though because of all the conflicting information.

Hopefully this can be remedied either by linking to the migration guide or refreshing the other documentation to follow it.

Thanks in advance for any help!

Context

I'm trying to upgrade my Vite projects to MUI v6 and pigment css. I want the Vite config to run properly and also give me access to my custom theme (or css variables if they are intended to replace the old way of theming, which I'm not 100% clear on).

Search keywords: vite, theming, cssvariables