[Material You] Use md as a CSS var prefix (mui#36177)

docs/src/modules/components/MaterialYouUsageDemo.tsx

@@ -93,11 +93,11 @@ export const prependLinesSpace = (code: string, size: number = 2) => {
   return newCode.join('\n');
 };
 
-function ModeSwitcher({ md2Mode }: { md2Mode: Mode | undefined }) {
-  const { mode, setMode } = useColorScheme();
-  if (md2Mode && mode !== md2Mode) {
-    setMode(md2Mode ?? mode);
-  }
+function ModeSwitcher({ md2Mode }: { md2Mode: Mode }) {
+  const { setMode } = useColorScheme();
+  React.useEffect(() => {
+    setMode(md2Mode);
+  }, [md2Mode, setMode]);
   return null;
 }
 

packages/mui-material-next/src/styles/extendTheme.test.ts

@@ -0,0 +1,14 @@
+import { expect } from 'chai';
+import { extendTheme } from '@mui/material-next/styles';
+
+describe('Material You — extendTheme', () => {
+  it('should have default cssVarPrefix', () => {
+    expect(extendTheme().cssVarPrefix).to.equal('md');
+  });
+
+  it('`getCssVar` return default prefix', () => {
+    expect(extendTheme().getCssVar('palette-primary-main')).to.equal(
+      'var(--md-palette-primary-main)',
+    );
+  });
+});

packages/mui-material-next/src/styles/extendTheme.ts

@@ -49,10 +49,10 @@ function setColor(obj: any, key: string, defaultValue: any) {
   obj[key] = obj[key] || defaultValue;
 }
 
-export const createGetCssVar = (cssVarPrefix = 'mui') => systemCreateGetCssVar(cssVarPrefix);
+export const createGetCssVar = (cssVarPrefix = 'md') => systemCreateGetCssVar(cssVarPrefix);
 
 export default function extendTheme(options: CssVarsThemeOptions = {}, ...args: any[]) {
-  const { colorSchemes: colorSchemesInput = {}, cssVarPrefix = 'mui', ...input } = options;
+  const { colorSchemes: colorSchemesInput = {}, cssVarPrefix = 'md', ...input } = options;
   const getCssVar = createGetCssVar(cssVarPrefix);
 
   const md3LightColors = createMd3LightColorScheme(getCssVar, md3CommonPalette);