Fix useTheme may return undefined

packages/ra-ui-materialui/src/theme/useTheme.spec.tsx

@@ -4,6 +4,9 @@ import expect from 'expect';
 import { render, screen } from '@testing-library/react';
 import { renderHook } from '@testing-library/react-hooks';
 import { useTheme } from './useTheme';
+import { AdminContext } from '../AdminContext';
+import { ThemeTestWrapper } from '../layout/ThemeTestWrapper';
+import { defaultDarkTheme } from './defaultTheme';
 
 const authProvider = {
     login: jest.fn().mockResolvedValueOnce(''),
@@ -23,13 +26,52 @@ const Foo = () => {
 };
 
 describe('useTheme', () => {
-    it('should return undefined by default', () => {
+    it('should return the light theme by default', () => {
         render(
             <CoreAdminContext authProvider={authProvider}>
                 <Foo />
             </CoreAdminContext>
         );
-        expect(screen.queryByLabelText('has-theme')).toBeNull();
+        expect(screen.queryByText('light')).not.toBeNull();
+    });
+
+    it('should return the light theme when no dark theme is provided even though user prefers dark mode', () => {
+        render(
+            <ThemeTestWrapper mode="dark">
+                <CoreAdminContext authProvider={authProvider}>
+                    <Foo />
+                </CoreAdminContext>
+            </ThemeTestWrapper>
+        );
+        expect(screen.queryByText('light')).not.toBeNull();
+    });
+
+    it('should return the user preferred theme by default', async () => {
+        const ssrMatchMedia = query => ({
+            matches: query === '(prefers-color-scheme: dark)' ? true : false,
+        });
+
+        render(
+            <ThemeTestWrapper mode="dark">
+                <AdminContext
+                    authProvider={authProvider}
+                    darkTheme={{
+                        ...defaultDarkTheme,
+                        components: {
+                            MuiUseMediaQuery: {
+                                defaultProps: {
+                                    ssrMatchMedia,
+                                    matchMedia: ssrMatchMedia,
+                                },
+                            },
+                        },
+                    }}
+                >
+                    <Foo />
+                </AdminContext>
+            </ThemeTestWrapper>
+        );
+        await screen.findByText('dark');
     });
 
     it('should return current theme when set', () => {
@@ -42,6 +84,7 @@ describe('useTheme', () => {
             </CoreAdminContext>
         );
         expect(screen.getByLabelText('has-theme')).not.toBeNull();
+        expect(screen.queryByText('dark')).not.toBeNull();
     });
 
     it('should return theme from settings when available', () => {

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

@@ -1,5 +1,7 @@
 import { useStore } from 'ra-core';
 import { RaThemeOptions, ThemeType } from './types';
+import { useMediaQuery } from '@mui/material';
+import { useThemesContext } from './useThemesContext';
 
 export type ThemeSetter = (theme: ThemeType | RaThemeOptions) => void;
 
@@ -23,7 +25,14 @@ export type ThemeSetter = (theme: ThemeType | RaThemeOptions) => void;
 export const useTheme = (
     type?: ThemeType | RaThemeOptions
 ): [ThemeType | RaThemeOptions, ThemeSetter] => {
+    const { darkTheme } = useThemesContext();
+    const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)', {
+        noSsr: true,
+    });
     // FIXME: remove legacy mode in v5, and remove the RaThemeOptions type
-    const [theme, setter] = useStore<ThemeType | RaThemeOptions>('theme', type);
+    const [theme, setter] = useStore<ThemeType | RaThemeOptions>(
+        'theme',
+        type ?? (prefersDarkMode && darkTheme ? 'dark' : 'light')
+    );
     return [theme, setter];
 };