[theme] Rename type to mode (#22687)

mui · Sep 22, 2020 · fad48de · fad48de
1 parent d104cde
commit fad48de
Show file tree

Hide file tree

Showing 54 changed files with 172 additions and 131 deletions.
diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
@@ -110,8 +110,8 @@ const styles = (theme) => ({
     },
   },
   appBar: {
-    color: theme.palette.type === 'light' ? null : '#fff',
-    backgroundColor: theme.palette.type === 'light' ? null : theme.palette.background.level2,
+    color: theme.palette.mode === 'light' ? null : '#fff',
+    backgroundColor: theme.palette.mode === 'light' ? null : theme.palette.background.level2,
     transition: theme.transitions.create('width'),
   },
   language: {
@@ -171,9 +171,9 @@ function AppFrame(props) {
 
   const changeTheme = useChangeTheme();
   const handleTogglePaletteType = () => {
-    const paletteType = theme.palette.type === 'light' ? 'dark' : 'light';
+    const paletteMode = theme.palette.mode === 'light' ? 'dark' : 'light';
 
-    changeTheme({ paletteType });
+    changeTheme({ paletteMode });
   };
   const handleToggleDirection = () => {
     changeTheme({ direction: theme.direction === 'ltr' ? 'rtl' : 'ltr' });
@@ -310,7 +310,7 @@ function AppFrame(props) {
               data-ga-event-category="header"
               data-ga-event-action="dark"
             >
-              {theme.palette.type === 'light' ? <Brightness4Icon /> : <Brightness7Icon />}
+              {theme.palette.mode === 'light' ? <Brightness4Icon /> : <Brightness7Icon />}
             </IconButton>
           </Tooltip>
           <Tooltip title={t('toggleRTL')} key={theme.direction} enterDelay={300}>

diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js
@@ -45,7 +45,7 @@ const useStyles = makeStyles(
           fontWeight: theme.typography.fontWeightRegular,
         },
         '& .algolia-docsearch-suggestion--highlight': {
-          color: theme.palette.type === 'light' ? '#174d8c' : '#acccf1',
+          color: theme.palette.mode === 'light' ? '#174d8c' : '#acccf1',
         },
         '& .algolia-docsearch-suggestion': {
           textDecoration: 'none',

diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js
@@ -41,11 +41,11 @@ const useStyles = makeStyles((theme) => ({
     boxSizing: 'border-box',
     '&:hover': {
       borderLeftColor:
-        theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[900],
+        theme.palette.mode === 'light' ? theme.palette.grey[200] : theme.palette.grey[900],
     },
     '&$active,&:active': {
       borderLeftColor:
-        theme.palette.type === 'light' ? theme.palette.grey[300] : theme.palette.grey[800],
+        theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800],
     },
   },
   secondaryItem: {

diff --git a/docs/src/modules/components/DiamondSponsors.js b/docs/src/modules/components/DiamondSponsors.js
@@ -57,7 +57,7 @@ export default function DiamondSponsors(props) {
         <img
           width="125"
           height="35"
-          src={`/static/in-house/octopus-${theme.palette.type}.png`}
+          src={`/static/in-house/octopus-${theme.palette.mode}.png`}
           alt="octopus"
           title="Repeatable, reliable deployments"
           loading="lazy"

diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
@@ -35,7 +35,7 @@ const styles = (theme) => ({
       padding: '0 3px',
       color: theme.palette.text.primary,
       backgroundColor:
-        theme.palette.type === 'light' ? 'rgba(255, 229, 100, 0.2)' : 'rgba(255, 229, 100, 0.2)',
+        theme.palette.mode === 'light' ? 'rgba(255, 229, 100, 0.2)' : 'rgba(255, 229, 100, 0.2)',
       fontSize: '.85em',
       borderRadius: 2,
     },
@@ -130,11 +130,11 @@ const styles = (theme) => ({
         fontFamily: 'Consolas, "Liberation Mono", Menlo, monospace',
       },
       '& .required': {
-        color: theme.palette.type === 'light' ? '#006500' : '#a5ffa5',
+        color: theme.palette.mode === 'light' ? '#006500' : '#a5ffa5',
       },
       '& .prop-type': {
         fontFamily: 'Consolas, "Liberation Mono", Menlo, monospace',
-        color: theme.palette.type === 'light' ? '#932981' : '#ffb6ec',
+        color: theme.palette.mode === 'light' ? '#932981' : '#ffb6ec',
       },
       '& .prop-default': {
         fontFamily: 'Consolas, "Liberation Mono", Menlo, monospace',

diff --git a/docs/src/modules/components/ThemeContext.js b/docs/src/modules/components/ThemeContext.js
@@ -169,7 +169,7 @@ export function ThemeProvider(props) {
       case 'CHANGE':
         return {
           ...state,
-          paletteType: action.payload.paletteType || state.paletteType,
+          paletteMode: action.payload.paletteMode || state.paletteMode,
           direction: action.payload.direction || state.direction,
           paletteColors: action.payload.paletteColors || state.paletteColors,
         };
@@ -180,27 +180,27 @@ export function ThemeProvider(props) {
 
   const userLanguage = useSelector((state) => state.options.userLanguage);
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const preferredType = prefersDarkMode ? 'dark' : 'light';
-  const { dense, direction, paletteColors, paletteType = preferredType, spacing } = themeOptions;
+  const preferredMode = prefersDarkMode ? 'dark' : 'light';
+  const { dense, direction, paletteColors, paletteMode = preferredMode, spacing } = themeOptions;
 
   useLazyCSS('/static/styles/prism-okaidia.css', '#prismjs');
 
   React.useEffect(() => {
     if (process.browser) {
       const nextPaletteColors = JSON.parse(getCookie('paletteColors') || 'null');
-      const nextPaletteType = getCookie('paletteType');
+      const nextPaletteType = getCookie('paletteMode');
 
       dispatch({
         type: 'CHANGE',
-        payload: { paletteColors: nextPaletteColors, paletteType: nextPaletteType },
+        payload: { paletteColors: nextPaletteColors, paletteMode: nextPaletteType },
       });
     }
   }, []);
 
-  // persist paletteType
+  // persist paletteMode
   React.useEffect(() => {
-    document.cookie = `paletteType=${paletteType};path=/;max-age=31536000`;
-  }, [paletteType]);
+    document.cookie = `paletteMode=${paletteMode};path=/;max-age=31536000`;
+  }, [paletteMode]);
 
   useEnhancedEffect(() => {
     document.body.dir = direction;
@@ -211,18 +211,18 @@ export function ThemeProvider(props) {
       {
         direction,
         nprogress: {
-          color: paletteType === 'light' ? '#000' : '#fff',
+          color: paletteMode === 'light' ? '#000' : '#fff',
         },
         palette: {
           primary: {
-            main: paletteType === 'light' ? blue[700] : blue[200],
+            main: paletteMode === 'light' ? blue[700] : blue[200],
           },
           secondary: {
-            main: paletteType === 'light' ? darken(pink.A400, 0.1) : pink[200],
+            main: paletteMode === 'light' ? darken(pink.A400, 0.1) : pink[200],
           },
-          type: paletteType,
+          mode: paletteMode,
           background: {
-            default: paletteType === 'light' ? '#fff' : '#121212',
+            default: paletteMode === 'light' ? '#fff' : '#121212',
           },
           ...paletteColors,
         },
@@ -233,13 +233,13 @@ export function ThemeProvider(props) {
     );
 
     nextTheme.palette.background.level2 =
-      paletteType === 'light' ? nextTheme.palette.grey[100] : '#333';
+      paletteMode === 'light' ? nextTheme.palette.grey[100] : '#333';
 
     nextTheme.palette.background.level1 =
-      paletteType === 'light' ? '#fff' : nextTheme.palette.grey[900];
+      paletteMode === 'light' ? '#fff' : nextTheme.palette.grey[900];
 
     return nextTheme;
-  }, [dense, direction, paletteColors, paletteType, spacing, userLanguage]);
+  }, [dense, direction, paletteColors, paletteMode, spacing, userLanguage]);
 
   React.useEffect(() => {
     // Expose the theme as a global variable so people can play with it.

diff --git a/docs/src/pages/components/autocomplete/CustomizedHook.js b/docs/src/pages/components/autocomplete/CustomizedHook.js
@@ -16,8 +16,8 @@ const Label = styled('label')`
 const InputWrapper = styled('div')`
   ${({ theme }) => `
   width: 300px;
-  border: 1px solid ${theme.palette.type === 'dark' ? '#434343' : '#d9d9d9'};
-  background-color: ${theme.palette.type === 'dark' ? '#141414' : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? '#434343' : '#d9d9d9'};
+  background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#fff'};
   border-radius: 4px;
   padding: 1px;
   display: flex;
@@ -33,8 +33,8 @@ const InputWrapper = styled('div')`
   }
 
   & input {
-    background-color: ${theme.palette.type === 'dark' ? '#141414' : '#fff'};
-    color: ${theme.palette.type === 'dark' ? '#fff' : '#000'};
+    background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#fff'};
+    color: ${theme.palette.mode === 'dark' ? '#fff' : '#000'};
     font-size: 14px;
     height: 30px;
     box-sizing: border-box;
@@ -62,9 +62,9 @@ const Tag = styled(({ label, onDelete, ...props }) => (
   margin: 2px;
   line-height: 22px;
   background-color: ${
-    theme.palette.type === 'dark' ? 'rgba(255,255,255,0.08)' : '#fafafa'
+    theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.08)' : '#fafafa'
   };
-  border: 1px solid ${theme.palette.type === 'dark' ? '#303030' : '#e8e8e8'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? '#303030' : '#e8e8e8'};
   border-radius: 2px;
   box-sizing: content-box;
   padding: 0 4px 0 10px;
@@ -97,7 +97,7 @@ const Listbox = styled('ul')`
   padding: 0;
   position: absolute;
   list-style: none;
-  background-color: ${theme.palette.type === 'dark' ? '#141414' : '#fff'};
+  background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#fff'};
   overflow: auto;
   max-height: 250px;
   border-radius: 4px;
@@ -118,7 +118,7 @@ const Listbox = styled('ul')`
   }
 
   & li[aria-selected='true'] {
-    background-color: ${theme.palette.type === 'dark' ? '#2b2b2b' : '#fafafa'};
+    background-color: ${theme.palette.mode === 'dark' ? '#2b2b2b' : '#fafafa'};
     font-weight: 600;
 
     & svg {
@@ -127,7 +127,7 @@ const Listbox = styled('ul')`
   }
 
   & li[data-focus='true'] {
-    background-color: ${theme.palette.type === 'dark' ? '#003b57' : '#e6f7ff'};
+    background-color: ${theme.palette.mode === 'dark' ? '#003b57' : '#e6f7ff'};
     cursor: pointer;
 
     & svg {

diff --git a/docs/src/pages/components/autocomplete/CustomizedHook.tsx b/docs/src/pages/components/autocomplete/CustomizedHook.tsx
@@ -16,8 +16,8 @@ const Label = styled('label')`
 const InputWrapper = styled('div')`
   ${({ theme }) => `
   width: 300px;
-  border: 1px solid ${theme.palette.type === 'dark' ? '#434343' : '#d9d9d9'};
-  background-color: ${theme.palette.type === 'dark' ? '#141414' : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? '#434343' : '#d9d9d9'};
+  background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#fff'};
   border-radius: 4px;
   padding: 1px;
   display: flex;
@@ -33,8 +33,8 @@ const InputWrapper = styled('div')`
   }
 
   & input {
-    background-color: ${theme.palette.type === 'dark' ? '#141414' : '#fff'};
-    color: ${theme.palette.type === 'dark' ? '#fff' : '#000'};
+    background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#fff'};
+    color: ${theme.palette.mode === 'dark' ? '#fff' : '#000'};
     font-size: 14px;
     height: 30px;
     box-sizing: border-box;
@@ -62,9 +62,9 @@ const Tag = styled(({ label, onDelete, ...props }) => (
   margin: 2px;
   line-height: 22px;
   background-color: ${
-    theme.palette.type === 'dark' ? 'rgba(255,255,255,0.08)' : '#fafafa'
+    theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.08)' : '#fafafa'
   };
-  border: 1px solid ${theme.palette.type === 'dark' ? '#303030' : '#e8e8e8'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? '#303030' : '#e8e8e8'};
   border-radius: 2px;
   box-sizing: content-box;
   padding: 0 4px 0 10px;
@@ -97,7 +97,7 @@ const Listbox = styled('ul')`
   padding: 0;
   position: absolute;
   list-style: none;
-  background-color: ${theme.palette.type === 'dark' ? '#141414' : '#fff'};
+  background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#fff'};
   overflow: auto;
   max-height: 250px;
   border-radius: 4px;
@@ -118,7 +118,7 @@ const Listbox = styled('ul')`
   }
 
   & li[aria-selected='true'] {
-    background-color: ${theme.palette.type === 'dark' ? '#2b2b2b' : '#fafafa'};
+    background-color: ${theme.palette.mode === 'dark' ? '#2b2b2b' : '#fafafa'};
     font-weight: 600;
 
     & svg {
@@ -127,7 +127,7 @@ const Listbox = styled('ul')`
   }
 
   & li[data-focus='true'] {
-    background-color: ${theme.palette.type === 'dark' ? '#003b57' : '#e6f7ff'};
+    background-color: ${theme.palette.mode === 'dark' ? '#003b57' : '#e6f7ff'};
     cursor: pointer;
 
     & svg {

diff --git a/docs/src/pages/components/progress/CustomizedProgressBars.js b/docs/src/pages/components/progress/CustomizedProgressBars.js
@@ -10,7 +10,7 @@ const BorderLinearProgress = withStyles((theme) => ({
   },
   colorPrimary: {
     backgroundColor:
-      theme.palette.grey[theme.palette.type === 'light' ? 200 : 700],
+      theme.palette.grey[theme.palette.mode === 'light' ? 200 : 700],
   },
   bar: {
     borderRadius: 5,
@@ -24,7 +24,7 @@ const useStylesFacebook = makeStyles((theme) => ({
     position: 'relative',
   },
   bottom: {
-    color: theme.palette.grey[theme.palette.type === 'light' ? 200 : 700],
+    color: theme.palette.grey[theme.palette.mode === 'light' ? 200 : 700],
   },
   top: {
     color: '#1a90ff',

diff --git a/docs/src/pages/components/progress/CustomizedProgressBars.tsx b/docs/src/pages/components/progress/CustomizedProgressBars.tsx
@@ -18,7 +18,7 @@ const BorderLinearProgress = withStyles((theme: Theme) =>
     },
     colorPrimary: {
       backgroundColor:
-        theme.palette.grey[theme.palette.type === 'light' ? 200 : 700],
+        theme.palette.grey[theme.palette.mode === 'light' ? 200 : 700],
     },
     bar: {
       borderRadius: 5,
@@ -34,7 +34,7 @@ const useStylesFacebook = makeStyles((theme: Theme) =>
       position: 'relative',
     },
     bottom: {
-      color: theme.palette.grey[theme.palette.type === 'light' ? 200 : 700],
+      color: theme.palette.grey[theme.palette.mode === 'light' ? 200 : 700],
     },
     top: {
       color: '#1a90ff',

diff --git a/docs/src/pages/components/tables/EnhancedTable.js b/docs/src/pages/components/tables/EnhancedTable.js
@@ -191,7 +191,7 @@ const useToolbarStyles = makeStyles((theme) => ({
     paddingRight: theme.spacing(1),
   },
   highlight:
-    theme.palette.type === 'light'
+    theme.palette.mode === 'light'
       ? {
           color: theme.palette.secondary.main,
           backgroundColor: lighten(theme.palette.secondary.light, 0.85),

diff --git a/docs/src/pages/components/tables/EnhancedTable.tsx b/docs/src/pages/components/tables/EnhancedTable.tsx
@@ -233,7 +233,7 @@ const useToolbarStyles = makeStyles((theme: Theme) =>
       paddingRight: theme.spacing(1),
     },
     highlight:
-      theme.palette.type === 'light'
+      theme.palette.mode === 'light'
         ? {
             color: theme.palette.secondary.main,
             backgroundColor: lighten(theme.palette.secondary.light, 0.85),

diff --git a/docs/src/pages/customization/default-theme/DefaultTheme.js b/docs/src/pages/customization/default-theme/DefaultTheme.js
@@ -299,7 +299,7 @@ function DefaultTheme(props) {
 
   const data = React.useMemo(() => {
     return createMuiTheme({
-      palette: { type: darkTheme ? 'dark' : 'light' },
+      palette: { mode: darkTheme ? 'dark' : 'light' },
     });
   }, [darkTheme]);
 

diff --git a/docs/src/pages/customization/palette/DarkTheme.js b/docs/src/pages/customization/palette/DarkTheme.js
@@ -102,7 +102,7 @@ const lightTheme = createMuiTheme();
 const darkTheme = createMuiTheme({
   palette: {
     // Switching the dark mode on is a single property value change.
-    type: 'dark',
+    mode: 'dark',
   },
 });
 

diff --git a/docs/src/pages/getting-started/templates/dashboard/Dashboard.js b/docs/src/pages/getting-started/templates/dashboard/Dashboard.js
@@ -99,7 +99,7 @@ const useStyles = makeStyles((theme) => ({
   appBarSpacer: theme.mixins.toolbar,
   content: {
     backgroundColor:
-      theme.palette.type === 'light'
+      theme.palette.mode === 'light'
         ? theme.palette.grey[100]
         : theme.palette.grey[900],
     flexGrow: 1,

diff --git a/docs/src/pages/getting-started/templates/dashboard/Dashboard.tsx b/docs/src/pages/getting-started/templates/dashboard/Dashboard.tsx
@@ -99,7 +99,7 @@ const useStyles = makeStyles((theme) => ({
   appBarSpacer: theme.mixins.toolbar,
   content: {
     backgroundColor:
-      theme.palette.type === 'light'
+      theme.palette.mode === 'light'
         ? theme.palette.grey[100]
         : theme.palette.grey[900],
     flexGrow: 1,

diff --git a/docs/src/pages/getting-started/templates/pricing/Pricing.js b/docs/src/pages/getting-started/templates/pricing/Pricing.js
@@ -53,7 +53,7 @@ const useStyles = makeStyles((theme) => ({
   },
   cardHeader: {
     backgroundColor:
-      theme.palette.type === 'light'
+      theme.palette.mode === 'light'
         ? theme.palette.grey[200]
         : theme.palette.grey[700],
   },