Merge pull request #10960 from marmelab/fix-toolbar-default-theme

Fix `<Toolbar>` design

Author: slax57

examples/demo/src/themes/chiptuneTheme.ts

@@ -1,3 +1,4 @@
+import { grey } from '@mui/material/colors';
 import { RaThemeOptions } from 'react-admin';
 
 /** Just for fun */
@@ -21,5 +22,12 @@ export const chiptuneTheme: RaThemeOptions = {
         MuiFormControl: { defaultProps: { fullWidth: true } },
         MuiTextField: { defaultProps: { fullWidth: true } },
         RaSimpleFormIterator: { defaultProps: { fullWidth: true } },
+        RaToolbar: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: grey[900],
+                },
+            },
+        },
     },
 };

examples/demo/src/themes/cssVariablesTheme.ts

@@ -10,12 +10,30 @@ const lightTheme: RaThemeOptions = {
             0.8
         ),
     },
+    components: {
+        RaToolbar: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: `color-mix(in oklab, var(--mui-palette-background-paper) 80%, light-dark(black, white))`,
+                },
+            },
+        },
+    },
 };
 const darkTheme: RaThemeOptions = {
     palette: {
         mode: 'dark',
         bulkActionsToolbarBackgroundColor: defaultTheme.palette.primary.dark,
     },
+    components: {
+        RaToolbar: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: `color-mix(in oklab, var(--mui-palette-background-paper) 80%, light-dark(black, white))`,
+                },
+            },
+        },
+    },
 };
 
 export const cssVariablesTheme = createTheme({

examples/demo/src/themes/softTheme.ts

@@ -1,3 +1,4 @@
+import { grey } from '@mui/material/colors';
 import { defaultTheme } from 'react-admin';
 
 /**
@@ -45,6 +46,13 @@ export const softDarkTheme = {
                 elevation: 1,
             },
         },
+        RaToolbar: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: grey[800],
+                },
+            },
+        },
     },
 };
 
@@ -121,5 +129,12 @@ export const softLightTheme = {
                 },
             },
         },
+        RaToolbar: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: grey[300],
+                },
+            },
+        },
     },
 };

examples/demo/src/themes/themes.tsx

@@ -73,5 +73,5 @@ export const themes: Theme[] = [
     { name: 'nano', light: nanoLightTheme, dark: nanoDarkTheme },
     { name: 'radiant', light: radiantLightTheme, dark: radiantDarkTheme },
     { name: 'house', light: houseLightTheme, dark: houseDarkTheme },
-    { name: 'chiptune', light: chiptuneTheme },
+    { name: 'chiptune', single: chiptuneTheme },
 ];

packages/ra-ui-materialui/src/form/Toolbar.tsx

@@ -108,7 +108,8 @@ const StyledToolbar = styled(MuiToolbar, {
     name: PREFIX,
     overridesResolver: (props, styles) => styles.root,
 })(({ theme }) => ({
-    backgroundColor: (theme.vars || theme).palette.divider,
+    backgroundColor: (theme.vars || theme).palette.background.paper,
+    backgroundImage: theme.vars != null ? 'var(--Paper-overlay);' : 'none',
 
     [`&.${ToolbarClasses.desktopToolbar}`]: {},
 

packages/ra-ui-materialui/src/theme/bwTheme.ts

@@ -414,6 +414,13 @@ const createBWTheme = (mode: 'light' | 'dark'): ThemeOptions => {
                     },
                 },
             },
+            RaToolbar: {
+                styleOverrides: {
+                    root: {
+                        backgroundColor: GREY,
+                    },
+                },
+            },
         },
         sidebar: {
             width: 195,

packages/ra-ui-materialui/src/theme/defaultTheme.ts

@@ -1,4 +1,5 @@
 import { ThemeOptions } from '@mui/material';
+import { grey } from '@mui/material/colors';
 import { deepmerge } from '@mui/utils';
 
 const defaultThemeInvariants: ThemeOptions = {
@@ -96,6 +97,13 @@ export const defaultLightTheme: ThemeOptions = deepmerge(
                     },
                 },
             },
+            RaToolbar: {
+                styleOverrides: {
+                    root: {
+                        backgroundColor: grey[300],
+                    },
+                },
+            },
         },
     }
 );
@@ -112,6 +120,15 @@ export const defaultDarkTheme: ThemeOptions = deepmerge(
                 default: '#313131',
             },
         },
+        components: {
+            RaToolbar: {
+                styleOverrides: {
+                    root: {
+                        backgroundColor: grey[800],
+                    },
+                },
+            },
+        },
     }
 );
 

packages/ra-ui-materialui/src/theme/houseTheme.ts

@@ -6,6 +6,7 @@ import {
     PaletteOptions,
     ThemeOptions,
 } from '@mui/material';
+import { grey } from '@mui/material/colors';
 
 /**
  * House: A young and joyful theme.
@@ -172,6 +173,16 @@ const componentsOverrides = (theme: Theme): ThemeOptions['components'] => ({
             },
         },
     },
+    RaToolbar: {
+        styleOverrides: {
+            root: {
+                backgroundColor:
+                    theme.palette.mode === 'dark'
+                        ? `color-mix(in oklab, ${theme.palette.background.paper} 80%, white)`
+                        : grey[300],
+            },
+        },
+    },
 });
 
 const alert = {

packages/ra-ui-materialui/src/theme/nanoTheme.ts

@@ -4,6 +4,7 @@ import {
     Theme,
     ThemeOptions,
 } from '@mui/material';
+import { grey } from '@mui/material/colors';
 
 /**
  * Nano: A dense theme with minimal chrome, ideal for complex apps.
@@ -326,6 +327,14 @@ const componentsOverrides = (theme: Theme): ThemeOptions['components'] => ({
             fullWidth: true,
         },
     },
+    RaToolbar: {
+        styleOverrides: {
+            root: {
+                backgroundColor:
+                    theme.palette.mode === 'dark' ? grey[900] : grey[100],
+            },
+        },
+    },
 });
 
 const alert = {

packages/ra-ui-materialui/src/theme/radiantTheme.ts

@@ -5,6 +5,7 @@ import {
     Theme,
     ThemeOptions,
 } from '@mui/material';
+import { grey } from '@mui/material/colors';
 
 /**
  * Radiant: A theme emphasizing clarity and ease of use.
@@ -151,6 +152,16 @@ const componentsOverrides = (theme: Theme): ThemeOptions['components'] => {
                 },
             },
         },
+        RaToolbar: {
+            styleOverrides: {
+                root: {
+                    backgroundColor:
+                        theme.palette.mode === 'dark'
+                            ? `color-mix(in oklab, ${theme.palette.background.paper} 80%, white)`
+                            : grey[300],
+                },
+            },
+        },
     };
 };