[system] Add enableColorScheme option to getInitColorSchemeScript (#3…

…3261)
mui · Jun 23, 2022 · 9a318c9 · 9a318c9
1 parent aac7888
commit 9a318c9
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.js b/packages/mui-system/src/cssVars/createCssVarsProvider.js
@@ -305,6 +305,7 @@ export default function createCssVarsProvider(options) {
       attribute: defaultAttribute,
       colorSchemeStorageKey: defaultColorSchemeStorageKey,
       modeStorageKey: defaultModeStorageKey,
+      enableColorScheme: designSystemEnableColorScheme,
       ...params,
     });
 

diff --git a/packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx b/packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx
@@ -5,6 +5,11 @@ export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
 export const DEFAULT_ATTRIBUTE = 'data-color-scheme';
 
 export interface GetInitColorSchemeScriptOptions {
+  /**
+   * Indicate to the browser which color scheme is used (light or dark) for rendering built-in UI
+   * @default true
+   */
+  enableColorScheme?: boolean;
   /**
    * If `true`, the initial color scheme is set to the user's prefers-color-scheme mode
    * @default false
@@ -42,6 +47,7 @@ export interface GetInitColorSchemeScriptOptions {
 
 export default function getInitColorSchemeScript(options?: GetInitColorSchemeScriptOptions) {
   const {
+    enableColorScheme = true,
     enableSystem = false,
     defaultLightColorScheme = 'light',
     defaultDarkColorScheme = 'dark',
@@ -56,13 +62,16 @@ export default function getInitColorSchemeScript(options?: GetInitColorSchemeScr
       dangerouslySetInnerHTML={{
         __html: `(function() { try {
         var mode = localStorage.getItem('${modeStorageKey}');
+        var cssColorScheme = mode;
         var colorScheme = '';
         if (mode === 'system' || (!mode && !!${enableSystem})) {
           // handle system mode
           var mql = window.matchMedia('(prefers-color-scheme: dark)');
           if (mql.matches) {
+            cssColorScheme = 'dark';
             colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
           } else {
+            cssColorScheme = 'light';
             colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
           }
         }
@@ -75,6 +84,9 @@ export default function getInitColorSchemeScript(options?: GetInitColorSchemeScr
         if (colorScheme) {
           ${colorSchemeNode}.setAttribute('${attribute}', colorScheme);
         }
+        if (${enableColorScheme} && !!cssColorScheme) {
+          ${colorSchemeNode}.style.setProperty('color-scheme', cssColorScheme);
+        }
       } catch (e) {} })();`,
       }}
     />