[core] use color-scheme property to deal with dark mode (#29454)

Co-authored-by: Marija Najdova <mnajdova@gmail.com>
mui · Nov 4, 2021 · 5b886d5 · 5b886d5
1 parent c1936ad
commit 5b886d5
Show file tree

Hide file tree

Showing 11 changed files with 82 additions and 26 deletions.
diff --git a/docs/pages/api-docs/css-baseline.json b/docs/pages/api-docs/css-baseline.json
@@ -1,5 +1,8 @@
 {
-  "props": { "children": { "type": { "name": "node" } } },
+  "props": {
+    "children": { "type": { "name": "node" } },
+    "enableColorScheme": { "type": { "name": "bool" } }
+  },
   "name": "CssBaseline",
   "styles": { "classes": [], "globalClasses": {}, "name": null },
   "spread": true,

diff --git a/docs/pages/api-docs/scoped-css-baseline.json b/docs/pages/api-docs/scoped-css-baseline.json
@@ -2,7 +2,8 @@
   "props": {
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" } },
-    "component": { "type": { "name": "elementType" } }
+    "component": { "type": { "name": "elementType" } },
+    "enableColorScheme": { "type": { "name": "bool" } }
   },
   "name": "ScopedCssBaseline",
   "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiScopedCssBaseline" },

diff --git a/docs/src/modules/components/ThemeContext.js b/docs/src/modules/components/ThemeContext.js
@@ -8,7 +8,6 @@ import {
 import { deepmerge } from '@mui/utils';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { enUS, zhCN, faIR, ruRU, ptBR, esES, frFR, deDE, jaJP } from '@mui/material/locale';
-import darkScrollbar from '@mui/material/darkScrollbar';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
 import { getCookie } from 'docs/src/modules/utils/helpers';
 import useLazyCSS from 'docs/src/modules/utils/useLazyCSS';
@@ -232,8 +231,8 @@ export function ThemeProvider(props) {
       {
         components: {
           MuiCssBaseline: {
-            styleOverrides: {
-              body: paletteMode === 'dark' ? darkScrollbar() : null,
+            defaultProps: {
+              enableColorScheme: true,
             },
           },
         },

diff --git a/docs/src/pages/components/css-baseline/css-baseline.md b/docs/src/pages/components/css-baseline/css-baseline.md
@@ -58,6 +58,8 @@ The `<html>` and `<body>` elements are updated to provide better page-wide defau
 - The margin in all browsers is removed.
 - The default Material Design background color is applied.
   It's using [`theme.palette.background.default`](/customization/default-theme/?expand-path=$.palette.background) for standard devices and a white background for print devices.
+- If `enableColorScheme` is provided to `CssBaseline`, native components color will be set by applying [`color-scheme`](https://web.dev/color-scheme/) on `<html>`.
+  The value used is provided by the theme property `theme.palette.mode`.
 
 ### Layout
 
@@ -67,11 +69,12 @@ The `<html>` and `<body>` elements are updated to provide better page-wide defau
 
 ### Scrollbars
 
+> This API is deprecated, consider using [color-scheme](#color-scheme) instead.
+
 The colors of the scrollbars can be customized to improve the contrast (especially on Windows). Add this code to your theme (for dark mode).
 
 ```jsx
 import darkScrollbar from '@mui/material/darkScrollbar';
-
 const theme = createTheme({
   components: {
     MuiCssBaseline: {
@@ -83,9 +86,23 @@ const theme = createTheme({
 });
 ```
 
-This website uses `darkScrollbar` when dark mode is enabled.
 Be aware, however, that using this utility (and customizing `-webkit-scrollbar`) forces MacOS to always show the scrollbar.
 
+### Color scheme
+
+This API is introduced in @mui/material (v5.0.7) for switching between `"light"` and `"dark"` modes of native components such as scrollbar, using the `color-scheme` css property.
+To enable it, you can set `enableColorScheme=true` as follow:
+
+```jsx
+<CssBaseline enableColorScheme />
+
+// or
+
+<ScopedCssBaseline enableColorScheme >
+  {/* The rest of your application using color-scheme*/}
+</ScopedCssBaseline>
+```
+
 ### Typography
 
 - No base font-size is declared on the `<html>`, but 16px is assumed (the browser default).

diff --git a/docs/translations/api-docs/css-baseline/css-baseline.json b/docs/translations/api-docs/css-baseline/css-baseline.json
@@ -1,5 +1,8 @@
 {
   "componentDescription": "Kickstart an elegant, consistent, and simple baseline to build upon.",
-  "propDescriptions": { "children": "You can wrap a node." },
+  "propDescriptions": {
+    "children": "You can wrap a node.",
+    "enableColorScheme": "Enable <code>color-scheme</code> css property to use <code>theme.palette.mode</code>. For more details, check out <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme\">https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme</a> For browser support, check out <a href=\"https://caniuse.com/?search=color-scheme\">https://caniuse.com/?search=color-scheme</a>"
+  },
   "classDescriptions": {}
 }
diff --git a/docs/translations/api-docs/scoped-css-baseline/scoped-css-baseline.json b/docs/translations/api-docs/scoped-css-baseline/scoped-css-baseline.json
@@ -3,7 +3,8 @@
   "propDescriptions": {
     "children": "The content of the component.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component."
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "enableColorScheme": "Enable <code>color-scheme</code> css property to use <code>theme.palette.mode</code>. For more details, check out <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme\">https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme</a> For browser support, check out <a href=\"https://caniuse.com/?search=color-scheme\">https://caniuse.com/?search=color-scheme</a>"
   },
   "classDescriptions": { "root": { "description": "Styles applied to the root element." } }
 }
diff --git a/packages/mui-material/src/CssBaseline/CssBaseline.d.ts b/packages/mui-material/src/CssBaseline/CssBaseline.d.ts
@@ -6,6 +6,13 @@ export interface CssBaselineProps extends StyledComponentProps<never> {
    * 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;
 }
 
 /**

diff --git a/packages/mui-material/src/CssBaseline/CssBaseline.js b/packages/mui-material/src/CssBaseline/CssBaseline.js
@@ -3,15 +3,16 @@ import PropTypes from 'prop-types';
 import useThemeProps from '../styles/useThemeProps';
 import GlobalStyles from '../GlobalStyles';
 
-export const html = {
+export const html = (theme, enableColorScheme) => ({
   WebkitFontSmoothing: 'antialiased', // Antialiasing.
   MozOsxFontSmoothing: 'grayscale', // Antialiasing.
   // 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%',
-};
+  ...(enableColorScheme && { colorScheme: theme.palette.mode }),
+});
 
 export const body = (theme) => ({
   color: theme.palette.text.primary,
@@ -23,9 +24,9 @@ export const body = (theme) => ({
   },
 });
 
-export const styles = (theme) => {
+export const styles = (theme, enableColorScheme = false) => {
   let defaultStyles = {
-    html,
+    html: html(theme, enableColorScheme),
     '*, *::before, *::after': {
       boxSizing: 'inherit',
     },
@@ -56,10 +57,10 @@ export const styles = (theme) => {
  */
 function CssBaseline(inProps) {
   const props = useThemeProps({ props: inProps, name: 'MuiCssBaseline' });
-  const { children } = props;
+  const { children, enableColorScheme = false } = props;
   return (
     <React.Fragment>
-      <GlobalStyles styles={styles} />
+      <GlobalStyles styles={(theme) => styles(theme, enableColorScheme)} />
       {children}
     </React.Fragment>
   );
@@ -74,6 +75,13 @@ CssBaseline.propTypes /* remove-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,
 };
 
 export default CssBaseline;
diff --git a/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.d.ts b/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.d.ts
@@ -12,6 +12,12 @@ export interface ScopedCssBaselineTypeMap<P = {}, D extends React.ElementType =
      * Override or extend the styles applied to the component.
      */
     classes?: Partial<ScopedCssBaselineClasses>;
+    /**
+     * 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
+     */
+    enableColorScheme?: boolean;
   };
   defaultComponent: D;
 }

diff --git a/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.js b/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.js
@@ -21,20 +21,22 @@ const ScopedCssBaselineRoot = styled('div', {
   name: 'MuiScopedCssBaseline',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})(({ theme }) => ({
-  ...html,
-  ...body(theme),
-  '& *, & *::before, & *::after': {
-    boxSizing: 'inherit',
-  },
-  '& strong, & b': {
-    fontWeight: theme.typography.fontWeightBold,
-  },
-}));
+})(({ theme, ownerState }) => {
+  return {
+    ...html(theme, ownerState.enableColorScheme),
+    ...body(theme),
+    '& *, & *::before, & *::after': {
+      boxSizing: 'inherit',
+    },
+    '& strong, & b': {
+      fontWeight: theme.typography.fontWeightBold,
+    },
+  };
+});
 
 const ScopedCssBaseline = React.forwardRef(function ScopedCssBaseline(inProps, ref) {
   const props = useThemeProps({ props: inProps, name: 'MuiScopedCssBaseline' });
-  const { className, component = 'div', ...other } = props;
+  const { className, component = 'div', enableColorScheme, ...other } = props;
 
   const ownerState = {
     ...props,
@@ -76,6 +78,12 @@ ScopedCssBaseline.propTypes /* remove-proptypes */ = {
    * Either a string to use a HTML element or a component.
    */
   component: PropTypes.elementType,
+  /**
+   * 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
+   */
+  enableColorScheme: PropTypes.bool,
 };
 
 export default ScopedCssBaseline;
diff --git a/packages/mui-material/src/index.d.ts b/packages/mui-material/src/index.d.ts
@@ -172,6 +172,9 @@ export * from './Container';
 export { default as CssBaseline } from './CssBaseline';
 export * from './CssBaseline';
 
+/**
+ * @deprecated use color-scheme in CssBaseline or ScopedCssBaseline to modify scrollbar color
+ */
 export { default as darkScrollbar } from './darkScrollbar';
 export * from './darkScrollbar';