[system] Replace enableSystem with defaultMode (mui#33960)

daniel-rabe · Nov 29, 2022 · 87432c4 · 87432c4
1 parent f9411ed
commit 87432c4
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 12 deletions.
diff --git a/docs/data/material/experimental-api/css-variables/css-variables.md b/docs/data/material/experimental-api/css-variables/css-variables.md
@@ -243,6 +243,6 @@ const StyledComponent = styled('button')(({ theme }) => ({
 
 **options**
 
-- `enableSystem?: boolean`: - If `true` and the selected mode is not `light` or `dark`, the system mode is used
+- `defaultMode?: 'light' | 'dark' | 'system'`: - Application's default mode before React renders the tree (`light` by default)
 - `modeStorageKey?: string`: - localStorage key used to store application `mode`
 - `attribute?: string` - DOM attribute for applying color scheme
diff --git a/packages/mui-system/src/cssVars/getInitColorSchemeScript.test.js b/packages/mui-system/src/cssVars/getInitColorSchemeScript.test.js
@@ -88,26 +88,36 @@ describe('getInitColorSchemeScript', () => {
     expect(document.documentElement.getAttribute(DEFAULT_ATTRIBUTE)).to.equal('bright');
   });
 
-  describe('[option: `enableSystem`]', () => {
-    it('should set dark color scheme to body, given `enableSystem` is true and prefers-color-scheme is `dark`', () => {
+  it('defaultMode: `dark`', () => {
+    const { container } = render(
+      getInitColorSchemeScript({
+        defaultMode: 'dark',
+      }),
+    );
+    eval(container.firstChild.textContent);
+    expect(document.documentElement.getAttribute(DEFAULT_ATTRIBUTE)).to.equal('dark');
+  });
+
+  describe('defaultMode: `system`', () => {
+    it('should set dark color scheme to body, given prefers-color-scheme is `dark`', () => {
       window.matchMedia = createMatchMedia(true);
 
       const { container } = render(
         getInitColorSchemeScript({
-          enableSystem: true,
+          defaultMode: 'system',
           defaultDarkColorScheme: 'trueDark',
         }),
       );
       eval(container.firstChild.textContent);
       expect(document.documentElement.getAttribute(DEFAULT_ATTRIBUTE)).to.equal('trueDark');
     });
 
-    it('should set light color scheme to body, given `enableSystem` is true and prefers-color-scheme is NOT `dark`', () => {
+    it('should set light color scheme to body, given prefers-color-scheme is NOT `dark`', () => {
       window.matchMedia = createMatchMedia(false);
 
       const { container } = render(
         getInitColorSchemeScript({
-          enableSystem: true,
+          defaultMode: 'system',
           defaultLightColorScheme: 'yellow',
         }),
       );

diff --git a/packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx b/packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx
@@ -11,16 +11,18 @@ export interface GetInitColorSchemeScriptOptions {
    */
   enableColorScheme?: boolean;
   /**
-   * If `true`, the initial color scheme is set to the user's prefers-color-scheme mode
-   * @default false
+   * The mode to be used for the first visit
+   * @default 'light'
    */
-  enableSystem?: boolean;
+  defaultMode?: 'light' | 'dark' | 'system';
   /**
    * The default color scheme to be used on the light mode
+   * @default 'light'
    */
   defaultLightColorScheme?: string;
   /**
    * The default color scheme to be used on the dark mode
+   * * @default 'dark'
    */
   defaultDarkColorScheme?: string;
   /**
@@ -48,7 +50,7 @@ export interface GetInitColorSchemeScriptOptions {
 export default function getInitColorSchemeScript(options?: GetInitColorSchemeScriptOptions) {
   const {
     enableColorScheme = true,
-    enableSystem = false,
+    defaultMode = 'light',
     defaultLightColorScheme = 'light',
     defaultDarkColorScheme = 'dark',
     modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
@@ -61,10 +63,10 @@ export default function getInitColorSchemeScript(options?: GetInitColorSchemeScr
       // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{
         __html: `(function() { try {
-        var mode = localStorage.getItem('${modeStorageKey}');
+        var mode = localStorage.getItem('${modeStorageKey}') || '${defaultMode}';
         var cssColorScheme = mode;
         var colorScheme = '';
-        if (mode === 'system' || (!mode && !!${enableSystem})) {
+        if (mode === 'system') {
           // handle system mode
           var mql = window.matchMedia('(prefers-color-scheme: dark)');
           if (mql.matches) {