Fix other themes

Author: djhi

examples/demo/src/themes/softTheme.ts

@@ -1,3 +1,4 @@
+import { grey } from '@mui/material/colors';
 import { defaultTheme } from 'react-admin';
 
 /**
@@ -48,7 +49,7 @@ export const softDarkTheme = {
         RaToolbar: {
             styleOverrides: {
                 root: {
-                    backgroundColor: '#616161',
+                    backgroundColor: grey[800],
                 },
             },
         },
@@ -128,5 +129,12 @@ export const softLightTheme = {
                 },
             },
         },
+        RaToolbar: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: grey[300],
+                },
+            },
+        },
     },
 };

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

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

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

@@ -100,7 +100,7 @@ export const defaultLightTheme: ThemeOptions = deepmerge(
             RaToolbar: {
                 styleOverrides: {
                     root: {
-                        backgroundColor: grey[100],
+                        backgroundColor: grey[300],
                     },
                 },
             },
@@ -124,7 +124,7 @@ export const defaultDarkTheme: ThemeOptions = deepmerge(
             RaToolbar: {
                 styleOverrides: {
                     root: {
-                        backgroundColor: grey[900],
+                        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],
+                },
+            },
+        },
     };
 };