Add more themes #9316
Add more themes #9316
Conversation
|
Loading the 3 new themes adds about 15kB to the demo, which is acceptable and doesn't justify lazy-loading. 
|
| @@ -38,7 +38,7 @@ const englishMessages: TranslationMessages = { | |||
| move_up: 'Move up', | |||
| move_down: 'Move down', | |||
| open: 'Open', | |||
| toggle_theme: 'Toggle Theme', | |||
| toggle_theme: 'Toggle light/dark mode', | |||
There was a problem hiding this comment.
Did you check the french translations?
There was a problem hiding this comment.
Yes, the French translation is already "Thème clair/sombre", which is explicit.
I changed the English translation because it kind of conflicted with the "change theme" tooltip of the ThemeSwapper button in the demo. Now it is more specific.
| @@ -16,7 +16,12 @@ export const LoadingIndicator = (props: LoadingIndicatorProps) => { | |||
| const theme = useTheme(); | |||
| return ( | |||
| <Root className={className} sx={sx}> | |||
| {loading ? ( | |||
| <RefreshIconButton | |||
There was a problem hiding this comment.
LoadingIndicator needs to replace the circular arrow icon by a circular loader, and it needs to do it precisely for the loading effect to be nice. The current way of doing it didn't work with a different spacing preference in the theme, and couldn't be adjusted in the theme using component styleOverrides.
The new way of showing the circular loader is more robust, can be overridden, and adapts well to smaller font sizes (see the Nano theme).
| defaultProps: { | ||
| variant: 'outlined' as const, | ||
| }, | ||
| }, |
There was a problem hiding this comment.
Add margin between glued input
| }, | |
| }, | |
| MuiFormControl: { | |
| defaultProps: { | |
| margin: 'normal' as const, | |
| }, | |
| }, |
| @@ -48,6 +48,7 @@ export const LocalesMenuButton = (props: LocalesMenuButtonProps) => { | |||
| <Root component="span"> | |||
| <Button | |||
| color="inherit" | |||
| variant="text" | |||
There was a problem hiding this comment.
This is to avoid an outline when the theme sets the button variant to outlined
Problem
React-admin bundles only one light and one dark theme. Most users need to adapt the app theme to their brand, and the default themes aren't always a good starting point.
Solution
Build 3 more themes showing variations in fonts, spacing, border-radius, colors, etc.
Todo
themefolderdemo-themes.mp4