Fix <Toolbar> design

Author: djhi

examples/demo/src/themes/softTheme.ts

@@ -45,6 +45,13 @@ export const softDarkTheme = {
                 elevation: 1,
             },
         },
+        RaToolbar: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: '#616161',
+                },
+            },
+        },
     },
 };
 

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

@@ -108,7 +108,7 @@ 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,
 
     [`&.${ToolbarClasses.desktopToolbar}`]: {},
 

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[100],
+                    },
+                },
+            },
         },
     }
 );
@@ -112,6 +120,15 @@ export const defaultDarkTheme: ThemeOptions = deepmerge(
                 default: '#313131',
             },
         },
+        components: {
+            RaToolbar: {
+                styleOverrides: {
+                    root: {
+                        backgroundColor: grey[900],
+                    },
+                },
+            },
+        },
     }
 );