-
-
Notifications
You must be signed in to change notification settings - Fork 131
New issue
Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? # to your account
Fix default theme and store #575
Conversation
## Problem The default HydraAdmin differs from react-admin in 2 ways: 1. The default store is memoryStore instead of localStorageStore. As a consequence, filters and sort preferences aren't persisted between sessions (and aren't auditable in devtools) 2. The inputs aren't legible in dark theme because they lack a background color ## Solution Use similar defaults as react-admin
@@ -34,6 +34,9 @@ export const darkTheme: RaThemeOptions = { | |||
}, | |||
}, | |||
}, | |||
MuiFilledInput: { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The custom darkTheme
here extends react-admin's defaultTheme
, which is in fact the defaultLightTheme
and contains light-theme specific changes for inputs that should not apply to dark theme.
@@ -98,7 +105,6 @@ const AdminGuesser = ({ | |||
queryClient={queryClient} | |||
theme={theme} | |||
darkTheme={darkTheme} | |||
lightTheme={lightTheme} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lightTheme
isn't documented in react-admin - theme
is the prop to use.
@@ -42,7 +48,8 @@ const AdminGuesser = ({ | |||
layout = Layout, | |||
loginPage = LoginPage, | |||
loading: loadingPage, | |||
theme = lightTheme, | |||
theme = defaultLightTheme, | |||
darkTheme = defaultDarkTheme, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a bug here - the dark theme couldn't be overridden
@@ -33,7 +39,7 @@ const AdminGuesser = ({ | |||
basename, | |||
// eslint-disable-next-line @typescript-eslint/no-explicit-any | |||
error = DefaultError as any, | |||
store, | |||
store = defaultStore, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
React-admin defines the default store in react-adminù 's
Admincomponent. Since
AdminGuesserrelies on the lower-level
AdminContext`, we have to repeat the same initialization.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Code looks good to me 👍
CHANGELOG.md
Outdated
@@ -1,5 +1,8 @@ | |||
# Changelog | |||
|
|||
* Fix Inputs background in darkTheme |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There is no need to update the CHANGELOG as it will be automatically updated upon the release
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed
Problem
The default HydraAdmin differs from react-admin in 2 ways:
Also, it is not possible to customize the darkTheme.
Solution
Use similar defaults as react-admin