Skip to content

Commit 1c26c54

Browse files
fzaninottofzaninotto
committed
Rename default theme prop to defaultTheme
1 parent b919697 commit 1c26c54

8 files changed

Lines changed: 43 additions & 42 deletions

File tree

‎docs/Admin.md‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ const App = () => (
6464
loginPage={Login}
6565
theme={lightTheme}
6666
darkTheme={darkTheme}
67-
defaultToLightTheme
67+
defaultTheme="light"
6868
>
6969
<Resource name="customers" list={CustomerList} edit={CustomerEdit} />
7070
<Resource name="orders" list={OrderList} edit={OrderEdit} options={{ label: 'Orders' }} />
@@ -111,7 +111,7 @@ const App = () => (
111111
layout={Layout}
112112
theme={lightTheme}
113113
darkTheme={darkTheme}
114-
defaultToLightTheme
114+
defaultTheme="light"
115115
>
116116
<Resource {...customers} />
117117
<Resource {...orders} />
@@ -136,28 +136,28 @@ Three main props lets you configure the core features of the `<Admin>` component
136136

137137
Here are all the props accepted by the component:
138138

139-
| Prop | Required | Type | Default | Description |
140-
|------------------------|----------|----------------|----------------|----------------------------------------------------------|
141-
| `dataProvider` | Required | `DataProvider` | - | The data provider for fetching resources |
142-
| `children` | Required | `ReactNode` | - | The routes to render |
143-
| `authCallbackPage` | Optional | `Component` | `AuthCallback` | The content of the authentication callback page |
144-
| `authProvider` | Optional | `AuthProvider` | - | The authentication provider for security and permissions |
145-
| `basename` | Optional | `string` | - | The base path for all URLs |
146-
| `catchAll` | Optional | `Component` | `NotFound` | The fallback component for unknown routes |
147-
| `dashboard` | Optional | `Component` | - | The content of the dashboard page |
148-
| `darkTheme` | Optional | `object` | - | The dark theme configuration |
149-
| `defaultTo LightTheme` | Optional | `boolean` | `false` | Flag to default to the light theme |
150-
| `disableTelemetry` | Optional | `boolean` | `false` | Set to `true` to disable telemetry collection |
151-
| `i18nProvider` | Optional | `I18NProvider` | - | The internationalization provider for translations |
152-
| `layout` | Optional | `Component` | `Layout` | The content of the layout |
153-
| `loginPage` | Optional | `Component` | `LoginPage` | The content of the login page |
154-
| `notification` | Optional | `Component` | `Notification` | The notification component |
155-
| `queryClient` | Optional | `QueryClient` | - | The react-query client |
156-
| `ready` | Optional | `Component` | `Ready` | The content of the ready page |
157-
| `requireAuth` | Optional | `boolean` | `false` | Flag to require authentication for all routes |
158-
| `store` | Optional | `Store` | - | The Store for managing user preferences |
159-
| `theme` | Optional | `object` | - | The main (light) theme configuration |
160-
| `title` | Optional | `string` | - | The error page title |
139+
| Prop | Required | Type | Default | Description |
140+
|------------------- |----------|----------------|----------------|----------------------------------------------------------|
141+
| `dataProvider` | Required | `DataProvider` | - | The data provider for fetching resources |
142+
| `children` | Required | `ReactNode` | - | The routes to render |
143+
| `authCallbackPage` | Optional | `Component` | `AuthCallback` | The content of the authentication callback page |
144+
| `authProvider` | Optional | `AuthProvider` | - | The authentication provider for security and permissions |
145+
| `basename` | Optional | `string` | - | The base path for all URLs |
146+
| `catchAll` | Optional | `Component` | `NotFound` | The fallback component for unknown routes |
147+
| `dashboard` | Optional | `Component` | - | The content of the dashboard page |
148+
| `darkTheme` | Optional | `object` | - | The dark theme configuration |
149+
| `defaultTheme` | Optional | `boolean` | `false` | Flag to default to the light theme |
150+
| `disableTelemetry` | Optional | `boolean` | `false` | Set to `true` to disable telemetry collection |
151+
| `i18nProvider` | Optional | `I18NProvider` | - | The internationalization provider for translations |
152+
| `layout` | Optional | `Component` | `Layout` | The content of the layout |
153+
| `loginPage` | Optional | `Component` | `LoginPage` | The content of the login page |
154+
| `notification` | Optional | `Component` | `Notification` | The notification component |
155+
| `queryClient` | Optional | `QueryClient` | - | The react-query client |
156+
| `ready` | Optional | `Component` | `Ready` | The content of the ready page |
157+
| `requireAuth` | Optional | `boolean` | `false` | Flag to require authentication for all routes |
158+
| `store` | Optional | `Store` | - | The Store for managing user preferences |
159+
| `theme` | Optional | `object` | - | The main (light) theme configuration |
160+
| `title` | Optional | `string` | - | The error page title |
161161

162162

163163
## `dataProvider`
@@ -447,13 +447,13 @@ const App = () => (
447447
);
448448
```
449449

450-
**Tip**: To disable OS preference detection and always use the light theme, see the [`defaultToLightTheme`](#defaulttolighttheme) prop.
450+
**Tip**: To disable OS preference detection and always use one theme by default, see the [`defaultTheme`](#defaulttheme) prop.
451451

452-
## `defaultToLightTheme`
452+
## `defaultTheme`
453453

454454
If you provide both a `lightTheme` and a `darkTheme`, react-admin will choose the default theme to use for each user based on their OS preference. This means that users using dark mode will see the dark theme by default. Users can then switch to the other theme using [the `<ToggleThemeButton>` component](./ToggleThemeButton.md).
455455

456-
If you prefer to always default to the light theme regardless of the user's OS preference, you can set the `defaultToLightTheme` prop to `true`:
456+
If you prefer to always default to the light or the dark theme regardless of the user's OS preference, you can set the `defaultTheme` prop to either `light` or `dark`:
457457

458458
```jsx
459459
import { Admin } from 'react-admin';
@@ -463,7 +463,7 @@ const App = () => (
463463
dataProvider={dataProvider}
464464
theme={lightTheme}
465465
darkTheme={darkTheme}
466-
defaultToLightTheme
466+
defaultTheme="light"
467467
>
468468
...
469469
</Admin>

‎examples/demo/src/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const App = () => (
4848
disableTelemetry
4949
theme={lightTheme}
5050
darkTheme={darkTheme}
51-
defaultToLightTheme
51+
defaultTheme="light"
5252
>
5353
<CustomRoutes>
5454
<Route path="/segments" element={<Segments />} />

‎packages/ra-ui-materialui/src/AdminContext.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export const AdminContext = (props: AdminContextProps) => {
99
theme,
1010
lightTheme = defaultLightTheme,
1111
darkTheme,
12-
defaultToLightTheme,
12+
defaultTheme,
1313
children,
1414
...rest
1515
} = props;
@@ -19,7 +19,7 @@ export const AdminContext = (props: AdminContextProps) => {
1919
value={{
2020
lightTheme: theme || lightTheme,
2121
darkTheme,
22-
defaultToLightTheme,
22+
defaultTheme,
2323
}}
2424
>
2525
<ThemeProvider>{children}</ThemeProvider>
@@ -31,7 +31,7 @@ export const AdminContext = (props: AdminContextProps) => {
3131
export interface AdminContextProps extends CoreAdminContextProps {
3232
lightTheme?: RaThemeOptions;
3333
darkTheme?: RaThemeOptions;
34-
defaultToLightTheme?: boolean;
34+
defaultTheme?: 'light' | 'dark';
3535
}
3636

3737
AdminContext.displayName = 'AdminContext';

‎packages/ra-ui-materialui/src/button/ToggleThemeButton.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,12 @@ import { RaThemeOptions, useThemesContext, useTheme } from '../layout';
2323
*/
2424
export const ToggleThemeButton = (props: ToggleThemeButtonProps) => {
2525
const translate = useTranslate();
26-
const { darkTheme, defaultToLightTheme } = useThemesContext(props);
26+
const { darkTheme, defaultTheme } = useThemesContext(props);
2727
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)', {
2828
noSsr: true,
2929
});
3030
const [theme, setTheme] = useTheme(
31-
prefersDarkMode && !defaultToLightTheme && darkTheme ? 'dark' : 'light'
31+
defaultTheme || (prefersDarkMode && darkTheme ? 'dark' : 'light')
3232
);
3333

3434
// FIXME: remove in v5

‎packages/ra-ui-materialui/src/layout/Theme/ThemeProvider.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,13 @@ export const ThemeProvider = ({
3333
children,
3434
theme: themeOverride,
3535
}: ThemeProviderProps) => {
36-
const { lightTheme, darkTheme, defaultToLightTheme } = useThemesContext();
36+
const { lightTheme, darkTheme, defaultTheme } = useThemesContext();
3737

3838
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)', {
3939
noSsr: true,
4040
});
4141
const [mode] = useTheme(
42-
prefersDarkMode && !defaultToLightTheme && darkTheme ? 'dark' : 'light'
42+
defaultTheme || (prefersDarkMode && darkTheme ? 'dark' : 'light')
4343
);
4444

4545
const themeValue = useMemo(() => {

‎packages/ra-ui-materialui/src/layout/Theme/ThemesContext.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,5 @@ export const ThemesContext = createContext<ThemesContextValue>({});
66
export interface ThemesContextValue {
77
darkTheme?: RaThemeOptions;
88
lightTheme?: RaThemeOptions;
9-
defaultToLightTheme?: boolean;
9+
defaultTheme?: 'dark' | 'light';
1010
}

‎packages/ra-ui-materialui/src/layout/Theme/useThemesContext.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,18 @@ import { ThemesContext } from './ThemesContext';
44
import { RaThemeOptions } from './types';
55

66
export const useThemesContext = (params?: UseThemesContextParams) => {
7-
const { lightTheme, darkTheme, defaultToLightTheme } = params || {};
7+
const { lightTheme, darkTheme, defaultTheme } = params || {};
88
const context = useContext(ThemesContext);
99
return {
1010
lightTheme: lightTheme || context.lightTheme,
1111
darkTheme: darkTheme || context.darkTheme,
12-
defaultToLightTheme: defaultToLightTheme ?? context.defaultToLightTheme,
12+
defaultTheme: defaultTheme ?? context.defaultTheme,
1313
};
1414
};
1515

1616
export interface UseThemesContextParams {
1717
lightTheme?: RaThemeOptions;
1818
darkTheme?: RaThemeOptions;
19+
defaultTheme?: 'dark' | 'light';
1920
[key: string]: any;
2021
}

‎packages/react-admin/src/Admin.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ export const Admin = (props: AdminProps) => {
112112
theme,
113113
lightTheme,
114114
darkTheme,
115-
defaultToLightTheme,
115+
defaultTheme,
116116
title = 'React Admin',
117117
} = props;
118118

@@ -134,7 +134,7 @@ export const Admin = (props: AdminProps) => {
134134
theme={theme}
135135
lightTheme={lightTheme}
136136
darkTheme={darkTheme}
137-
defaultToLightTheme={defaultToLightTheme}
137+
defaultTheme={defaultTheme}
138138
>
139139
<AdminUI
140140
layout={layout}
@@ -167,6 +167,6 @@ export interface AdminProps extends CoreAdminProps {
167167
theme?: RaThemeOptions;
168168
lightTheme?: RaThemeOptions;
169169
darkTheme?: RaThemeOptions;
170-
defaultToLightTheme?: boolean;
170+
defaultTheme?: 'light' | 'dark';
171171
notification?: ComponentType;
172172
}

0 commit comments

Comments
 (0)