From 81a5f409f21f3c82b00ebbb67ad7e2695a419394 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Thu, 23 Jun 2022 11:20:23 +0700
Subject: [PATCH] add enableColorScheme to script

---
 .../mui-system/src/cssVars/createCssVarsProvider.js  |  1 +
 .../src/cssVars/getInitColorSchemeScript.tsx         | 12 ++++++++++++
 2 files changed, 13 insertions(+)

diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.js b/packages/mui-system/src/cssVars/createCssVarsProvider.js
index 8bdc1b88d46ea8..a6046484906089 100644
--- 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
index 7660a81d353582..100e04d2d2937a 100644
--- 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) {} })();`,
       }}
     />