[system] Fix color-scheme implementation

packages/mui-joy/src/CssBaseline/CssBaseline.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { GlobalStyles } from '@mui/system';
+import { Theme, DefaultColorScheme, ColorSystem } from '../styles/types';
+import { CssBaselineProps } from './CssBaselineProps';
+
+/**
+ * Kickstart an elegant, consistent, and simple baseline to build upon.
+ */
+function CssBaseline({ children, enableColorScheme = false }: CssBaselineProps) {
+  return (
+    <React.Fragment>
+      <GlobalStyles
+        styles={(theme: Theme) => {
+          const colorSchemeStyles: Record<string, any> = {};
+          if (enableColorScheme) {
+            // The CssBaseline is wrapped inside a CssVarsProvider
+            (
+              Object.entries(theme.colorSchemes) as Array<[DefaultColorScheme, ColorSystem]>
+            ).forEach(([key, scheme]) => {
+              colorSchemeStyles[theme.getColorSchemeSelector(key).replace(/\s*&/, '')] = {
+                colorScheme: scheme.palette?.mode,
+              };
+            });
+          }
+          return {
+            html: {
+              WebkitFontSmoothing: 'antialiased',
+              MozOsxFontSmoothing: 'grayscale',
+              // Change from `box-sizing: content-box` so that `width`
+              // is not affected by `padding` or `border`.
+              boxSizing: 'border-box',
+              // Fix font resize problem in iOS
+              WebkitTextSizeAdjust: '100%',
+            },
+            '*, *::before, *::after': {
+              boxSizing: 'inherit',
+            },
+            'strong, b': {
+              fontWeight: theme.vars.fontWeight.lg,
+            },
+            body: {
+              margin: 0, // Remove the margin in all browsers.
+              color: theme.vars.palette.text.primary,
+              ...(theme.typography.body1 as any),
+              backgroundColor: theme.vars.palette.background.body,
+              '@media print': {
+                // Save printer ink.
+                backgroundColor: theme.vars.palette.common.white,
+              },
+              // Add support for document.body.requestFullScreen().
+              // Other elements, if background transparent, are not supported.
+              '&::backdrop': {
+                backgroundColor: theme.vars.palette.background.backdrop,
+              },
+            },
+            ...colorSchemeStyles,
+          };
+        }}
+      />
+      {children}
+    </React.Fragment>
+  );
+}
+
+CssBaseline.propTypes /* remove-proptypes */ = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * You can wrap a node.
+   */
+  children: PropTypes.node,
+  /**
+   * Enable `color-scheme` CSS property to use `theme.palette.mode`.
+   * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
+   * For browser support, check out https://caniuse.com/?search=color-scheme
+   * @default false
+   */
+  enableColorScheme: PropTypes.bool,
+} as any;
+
+export default CssBaseline;

packages/mui-joy/src/CssBaseline/CssBaselineProps.ts

@@ -0,0 +1,13 @@
+export interface CssBaselineProps {
+  /**
+   * You can wrap a node.
+   */
+  children?: React.ReactNode;
+  /**
+   * Enable `color-scheme` CSS property to use `theme.palette.mode`.
+   * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
+   * For browser support, check out https://caniuse.com/?search=color-scheme
+   * @default false
+   */
+  enableColorScheme?: boolean;
+}

packages/mui-joy/src/CssBaseline/index.ts

@@ -0,0 +1,2 @@
+export { default } from './CssBaseline';
+export * from './CssBaselineProps';

packages/mui-joy/src/index.ts

@@ -52,6 +52,9 @@ export * from './ChipDelete';
 export { default as Container } from './Container';
 export * from './Container';
 
+export { default as CssBaseline } from './CssBaseline';
+export * from './CssBaseline';
+
 export { default as Divider } from './Divider';
 export * from './Divider';
 

packages/mui-joy/src/styles/CssVarsProvider.tsx

@@ -4,6 +4,7 @@ import type { DefaultColorScheme, ExtendedColorScheme } from './types';
 
 const shouldSkipGeneratingVar = (keys: string[]) =>
   !!keys[0].match(/(typography|variants|breakpoints)/) ||
+  (keys[0] === 'palette' && !!keys[1]?.match(/^(mode)$/)) ||
   (keys[0] === 'focus' && keys[1] !== 'thickness');
 
 const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = createCssVarsProvider<

packages/mui-joy/src/styles/extendTheme.ts

@@ -142,6 +142,7 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme {
 
   const lightColorSystem = {
     palette: {
+      mode: 'light',
       primary: {
         ...colors.blue,
         ...createLightModeVariantVariables('primary'),
@@ -243,6 +244,7 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme {
   };
   const darkColorSystem = {
     palette: {
+      mode: 'dark',
       primary: {
         ...colors.blue,
         ...createDarkModeVariantVariables('primary'),

packages/mui-joy/src/styles/types/colorSystem.ts

@@ -135,6 +135,7 @@ export interface PaletteSuccess extends PaletteRange {}
 export interface PaletteWarning extends PaletteRange {}
 
 export interface Palette {
+  mode: 'light' | 'dark';
   primary: PalettePrimary;
   neutral: PaletteNeutral;
   danger: PaletteDanger;

packages/mui-joy/src/styles/types/theme.ts

@@ -43,7 +43,6 @@ type NormalizeVars<T> = ConcatDeep<Split<T>>;
 
 export interface RuntimeColorSystem extends Omit<ColorSystem, 'palette'> {
   palette: ColorSystem['palette'] & {
-    mode: 'light' | 'dark';
     colorScheme: DefaultColorScheme | ExtendedColorScheme;
   };
 }
@@ -59,7 +58,10 @@ export interface ThemeScales {
   letterSpacing: LetterSpacing;
 }
 
-export interface ThemeVars extends ThemeScales, ColorSystem {}
+interface ColorSystemVars extends Omit<ColorSystem, 'palette'> {
+  palette: Omit<ColorSystem['palette'], 'mode'>;
+}
+export interface ThemeVars extends ThemeScales, ColorSystemVars {}
 
 export interface ThemeCssVarOverrides {}
 

packages/mui-material/src/CssBaseline/CssBaseline.js

@@ -11,7 +11,8 @@ export const html = (theme, enableColorScheme) => ({
   boxSizing: 'border-box',
   // Fix font resize problem in iOS
   WebkitTextSizeAdjust: '100%',
-  ...(enableColorScheme && { colorScheme: theme.palette.mode }),
+  // When used under CssVarsProvider, colorScheme should not be applied dynamically because it will generate the stylesheet twice for server-rendered applications.
+  ...(enableColorScheme && !theme.vars && { colorScheme: theme.palette.mode }),
 });
 
 export const body = (theme) => ({
@@ -25,6 +26,14 @@ export const body = (theme) => ({
 });
 
 export const styles = (theme, enableColorScheme = false) => {
+  const colorSchemeStyles = {};
+  if (enableColorScheme && theme.colorSchemes) {
+    Object.entries(theme.colorSchemes).forEach(([key, scheme]) => {
+      colorSchemeStyles[theme.getColorSchemeSelector(key).replace(/\s*&/, '')] = {
+        colorScheme: scheme.palette?.mode,
+      };
+    });
+  }
   let defaultStyles = {
     html: html(theme, enableColorScheme),
     '*, *::before, *::after': {
@@ -42,6 +51,7 @@ export const styles = (theme, enableColorScheme = false) => {
         backgroundColor: (theme.vars || theme).palette.background.default,
       },
     },
+    ...colorSchemeStyles,
   };
 
   const themeOverrides = theme.components?.MuiCssBaseline?.styleOverrides;

packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.js

@@ -22,6 +22,14 @@ const ScopedCssBaselineRoot = styled('div', {
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
 })(({ theme, ownerState }) => {
+  const colorSchemeStyles = {};
+  if (ownerState.enableColorScheme && theme.colorSchemes) {
+    Object.entries(theme.colorSchemes).forEach(([key, scheme]) => {
+      colorSchemeStyles[`&${theme.getColorSchemeSelector(key).replace(/\s*&/, '')}`] = {
+        colorScheme: scheme.palette?.mode,
+      };
+    });
+  }
   return {
     ...html(theme, ownerState.enableColorScheme),
     ...body(theme),
@@ -31,6 +39,7 @@ const ScopedCssBaselineRoot = styled('div', {
     '& strong, & b': {
       fontWeight: theme.typography.fontWeightBold,
     },
+    ...colorSchemeStyles,
   };
 });
 

packages/mui-material/src/styles/experimental_extendTheme.d.ts

@@ -193,7 +193,7 @@ export interface PaletteTooltip {
 
 // The Palette should be sync with `../themeCssVarsAugmentation/index.d.ts`
 export interface ColorSystemOptions {
-  palette?: Omit<PaletteOptions, 'mode'> & {
+  palette?: PaletteOptions & {
     common?: Partial<PaletteCommonChannel>;
     primary?: Partial<PaletteColorChannel>;
     secondary?: Partial<PaletteColorChannel>;

packages/mui-system/src/cssVars/createCssVarsProvider.d.ts

@@ -39,11 +39,6 @@ export interface CssVarsProviderConfig<ColorScheme extends string> {
    * @default false
    */
   disableTransitionOnChange?: boolean;
-  /**
-   * Indicate to the browser which color scheme is used (light or dark) for rendering built-in UI
-   * @default true
-   */
-  enableColorScheme?: boolean;
   /**
    * A function to determine if the key, value should be attached as CSS Variable
    * `keys` is an array that represents the object path keys.