From b72edf63cf9d251ffbbfd5053c8415166862d25d Mon Sep 17 00:00:00 2001 From: Gildas <1122076+djhi@users.noreply.github.com> Date: Thu, 25 Sep 2025 10:26:39 +0200 Subject: [PATCH 1/5] Fix `` design --- examples/demo/src/themes/softTheme.ts | 7 +++++++ packages/ra-ui-materialui/src/form/Toolbar.tsx | 2 +- .../ra-ui-materialui/src/theme/defaultTheme.ts | 17 +++++++++++++++++ 3 files changed, 25 insertions(+), 1 deletion(-) diff --git a/examples/demo/src/themes/softTheme.ts b/examples/demo/src/themes/softTheme.ts index eaf018d2b70..c220b890863 100644 --- a/examples/demo/src/themes/softTheme.ts +++ b/examples/demo/src/themes/softTheme.ts @@ -45,6 +45,13 @@ export const softDarkTheme = { elevation: 1, }, }, + RaToolbar: { + styleOverrides: { + root: { + backgroundColor: '#616161', + }, + }, + }, }, }; diff --git a/packages/ra-ui-materialui/src/form/Toolbar.tsx b/packages/ra-ui-materialui/src/form/Toolbar.tsx index 73215113097..3aee5a3a831 100644 --- a/packages/ra-ui-materialui/src/form/Toolbar.tsx +++ b/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}`]: {}, diff --git a/packages/ra-ui-materialui/src/theme/defaultTheme.ts b/packages/ra-ui-materialui/src/theme/defaultTheme.ts index bcb88e1bfe9..8d989a6aa5c 100644 --- a/packages/ra-ui-materialui/src/theme/defaultTheme.ts +++ b/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], + }, + }, + }, + }, } ); From a430ca54794e2534566bade9a9738c319cf92a84 Mon Sep 17 00:00:00 2001 From: Gildas <1122076+djhi@users.noreply.github.com> Date: Thu, 25 Sep 2025 16:27:00 +0200 Subject: [PATCH 2/5] Fix BW theme --- packages/ra-ui-materialui/src/theme/bwTheme.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/ra-ui-materialui/src/theme/bwTheme.ts b/packages/ra-ui-materialui/src/theme/bwTheme.ts index 7c8534e9d47..28db4f0cc4e 100644 --- a/packages/ra-ui-materialui/src/theme/bwTheme.ts +++ b/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, From af8fca8250dbd6c03319f40611f10f91379e1647 Mon Sep 17 00:00:00 2001 From: Gildas <1122076+djhi@users.noreply.github.com> Date: Thu, 25 Sep 2025 17:03:59 +0200 Subject: [PATCH 3/5] Fix chiptune theme --- examples/demo/src/themes/chiptuneTheme.ts | 8 ++++++++ examples/demo/src/themes/themes.tsx | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/examples/demo/src/themes/chiptuneTheme.ts b/examples/demo/src/themes/chiptuneTheme.ts index 51a404e49be..2b031fdd3fd 100644 --- a/examples/demo/src/themes/chiptuneTheme.ts +++ b/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], + }, + }, + }, }, }; diff --git a/examples/demo/src/themes/themes.tsx b/examples/demo/src/themes/themes.tsx index 547fcded634..ed8710a6700 100644 --- a/examples/demo/src/themes/themes.tsx +++ b/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 }, ]; From 1671f130c8a33e6533ef1290c3c3c37f4ddd403f Mon Sep 17 00:00:00 2001 From: Gildas <1122076+djhi@users.noreply.github.com> Date: Thu, 25 Sep 2025 17:04:10 +0200 Subject: [PATCH 4/5] Fix other themes --- examples/demo/src/themes/softTheme.ts | 10 +++++++++- packages/ra-ui-materialui/src/form/Toolbar.tsx | 1 + packages/ra-ui-materialui/src/theme/defaultTheme.ts | 4 ++-- packages/ra-ui-materialui/src/theme/houseTheme.ts | 11 +++++++++++ packages/ra-ui-materialui/src/theme/nanoTheme.ts | 9 +++++++++ packages/ra-ui-materialui/src/theme/radiantTheme.ts | 11 +++++++++++ 6 files changed, 43 insertions(+), 3 deletions(-) diff --git a/examples/demo/src/themes/softTheme.ts b/examples/demo/src/themes/softTheme.ts index c220b890863..ee066656083 100644 --- a/examples/demo/src/themes/softTheme.ts +++ b/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], + }, + }, + }, }, }; diff --git a/packages/ra-ui-materialui/src/form/Toolbar.tsx b/packages/ra-ui-materialui/src/form/Toolbar.tsx index 3aee5a3a831..268036693ba 100644 --- a/packages/ra-ui-materialui/src/form/Toolbar.tsx +++ b/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}`]: {}, diff --git a/packages/ra-ui-materialui/src/theme/defaultTheme.ts b/packages/ra-ui-materialui/src/theme/defaultTheme.ts index 8d989a6aa5c..afe3c45cda5 100644 --- a/packages/ra-ui-materialui/src/theme/defaultTheme.ts +++ b/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], }, }, }, diff --git a/packages/ra-ui-materialui/src/theme/houseTheme.ts b/packages/ra-ui-materialui/src/theme/houseTheme.ts index 0d2bb3bb325..2d73ac5855f 100644 --- a/packages/ra-ui-materialui/src/theme/houseTheme.ts +++ b/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 = { diff --git a/packages/ra-ui-materialui/src/theme/nanoTheme.ts b/packages/ra-ui-materialui/src/theme/nanoTheme.ts index b91aca869ef..ecb188e8531 100644 --- a/packages/ra-ui-materialui/src/theme/nanoTheme.ts +++ b/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 = { diff --git a/packages/ra-ui-materialui/src/theme/radiantTheme.ts b/packages/ra-ui-materialui/src/theme/radiantTheme.ts index 84ef9c6a70d..8aafcbf7901 100644 --- a/packages/ra-ui-materialui/src/theme/radiantTheme.ts +++ b/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], + }, + }, + }, }; }; From 3ba2ad0958d1a65d31ee3208f861b42c67bfcd61 Mon Sep 17 00:00:00 2001 From: Gildas <1122076+djhi@users.noreply.github.com> Date: Thu, 25 Sep 2025 17:22:52 +0200 Subject: [PATCH 5/5] Fix CSS Variables theme --- examples/demo/src/themes/cssVariablesTheme.ts | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/examples/demo/src/themes/cssVariablesTheme.ts b/examples/demo/src/themes/cssVariablesTheme.ts index 5479e4d2f9e..96d50f07893 100644 --- a/examples/demo/src/themes/cssVariablesTheme.ts +++ b/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({