make theme='inherit' the default

.changeset/hip-moose-flow.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': major
+---
+
+ThemeProvider now defaults the `theme` value to `"inherit"` and falls back to `"light"` there is no parent theme found. Also the inherit behavior has been made more resilient for cases where react context fails.

packages/itwinui-react/src/core/ThemeProvider/ThemeProvider.test.tsx

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import * as UseMediaQuery from '../utils/hooks/useMediaQuery.js';
 
 import { ThemeProvider } from './ThemeProvider.js';
@@ -18,13 +18,11 @@ beforeEach(() => {
 
 afterEach(() => useMediaSpy.mockRestore());
 
-it.each(['default', 'light', 'dark'] as const)(
+it.each(['light', 'dark'] as const)(
   'should render correctly with %s theme',
   (theme) => {
     const { container } = render(
-      <ThemeProvider theme={theme === 'default' ? undefined : theme}>
-        Test
-      </ThemeProvider>,
+      <ThemeProvider theme={theme}>Test</ThemeProvider>,
     );
     const element = container.querySelector('div');
     expect(element).toBeTruthy();
@@ -142,6 +140,7 @@ it('should apply iui-root-background to the topmost ThemeProvider', () => {
 it('should default applyBackground to false when inheriting theme', () => {
   const { container, rerender } = render(
     <ThemeProvider theme='inherit'>Hello</ThemeProvider>,
+    { wrapper: ({ children }) => <div data-iui-theme='light'>{children}</div> },
   );
   const element = container.querySelector('.iui-root');
   expect(element).not.toHaveClass('iui-root-background');
@@ -154,3 +153,29 @@ it('should default applyBackground to false when inheriting theme', () => {
   );
   expect(element).toHaveClass('iui-root-background');
 });
+
+it('should inherit theme by default', () => {
+  const { container } = render(
+    <ThemeProvider theme='dark'>
+      <ThemeProvider id='nested'>Test</ThemeProvider>
+    </ThemeProvider>,
+  );
+
+  const nested = container.querySelector('#nested');
+  expect(nested).toHaveAttribute('data-iui-theme', 'dark');
+});
+
+it('should inherit theme from data attribute if no context found', () => {
+  const { container } = render(
+    <ThemeProvider id='nested'>Test</ThemeProvider>,
+    { wrapper: ({ children }) => <div data-iui-theme='dark'>{children}</div> },
+  );
+
+  const nested = container.querySelector('#nested');
+  expect(nested).toHaveAttribute('data-iui-theme', 'dark');
+});
+
+it('should default to light theme if no parent theme found', () => {
+  render(<ThemeProvider>Test</ThemeProvider>);
+  expect(screen.getByText('Test')).toHaveAttribute('data-iui-theme', 'light');
+});

packages/itwinui-react/src/core/ThemeProvider/ThemeProvider.tsx

@@ -4,7 +4,12 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useMediaQuery, useMergedRefs, Box } from '../utils/index.js';
+import {
+  useMediaQuery,
+  useMergedRefs,
+  Box,
+  useIsomorphicLayoutEffect,
+} from '../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import { ThemeContext } from './ThemeContext.js';
 import { ToastProvider, Toaster } from '../Toast/Toaster.js';
@@ -59,9 +64,11 @@ type ThemeProviderOwnProps = Pick<RootProps, 'theme'> & {
 };
 
 /**
- * This component provides global styles and applies theme to the entire tree
- * that it is wrapping around. The `theme` prop is optional and defaults to the
- * light theme.
+ * This component provides global state and applies theme to the entire tree
+ * that it is wrapping around.
+ *
+ * The `theme` prop defaults to "inherit", which looks upwards for closest ThemeProvider
+ * and falls back to "light" theme if one is not found.
  *
  * If you want to theme the entire app, you should use this component at the root. You can also
  * use this component to apply a different theme to only a part of the tree.
@@ -84,18 +91,20 @@ type ThemeProviderOwnProps = Pick<RootProps, 'theme'> & {
  *  <App />
  * </ThemeProvider>
  */
-export const ThemeProvider = React.forwardRef((props, ref) => {
-  const { theme: themeProp, children, themeOptions, ...rest } = props;
+export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
+  const {
+    theme: themeProp = 'inherit',
+    children,
+    themeOptions,
+    ...rest
+  } = props;
 
   const portalContainerRef = React.useRef<HTMLDivElement>(null);
-  const parentContext = React.useContext(ThemeContext);
 
-  const theme =
-    themeProp === 'inherit' ? parentContext?.theme ?? 'light' : themeProp;
+  const [parentTheme, rootRef] = useParentTheme();
+  const theme = themeProp === 'inherit' ? parentTheme || 'light' : themeProp;
 
-  const shouldApplyBackground =
-    themeOptions?.applyBackground ??
-    (themeProp === 'inherit' ? false : !parentContext);
+  const shouldApplyBackground = themeOptions?.applyBackground ?? !parentTheme;
 
   const contextValue = React.useMemo(
     () => ({ theme, themeOptions, portalContainerRef }),
@@ -108,7 +117,7 @@ export const ThemeProvider = React.forwardRef((props, ref) => {
         theme={theme}
         shouldApplyBackground={shouldApplyBackground}
         themeOptions={themeOptions}
-        ref={ref}
+        ref={useMergedRefs(forwardedRef, rootRef)}
         {...rest}
       >
         <ToastProvider>
@@ -124,6 +133,8 @@ export const ThemeProvider = React.forwardRef((props, ref) => {
 
 export default ThemeProvider;
 
+// ----------------------------------------------------------------------------
+
 const Root = React.forwardRef((props, forwardedRef) => {
   const {
     theme,
@@ -134,8 +145,6 @@ const Root = React.forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
 
-  const ref = React.useRef<HTMLElement>(null);
-  const mergedRefs = useMergedRefs(ref, forwardedRef);
   const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
   const prefersHighContrast = useMediaQuery('(prefers-contrast: more)');
   const shouldApplyDark = theme === 'dark' || (theme === 'os' && prefersDark);
@@ -150,10 +159,36 @@ const Root = React.forwardRef((props, forwardedRef) => {
       )}
       data-iui-theme={shouldApplyDark ? 'dark' : 'light'}
       data-iui-contrast={shouldApplyHC ? 'high' : 'default'}
-      ref={mergedRefs}
+      ref={forwardedRef}
       {...rest}
     >
       {children}
     </Box>
   );
 }) as PolymorphicForwardRefComponent<'div', RootProps>;
+
+// ----------------------------------------------------------------------------
+
+/**
+ * Returns theme from either parent context or by reading the closest
+ * data-iui-theme attribute if context is not found.
+ */
+const useParentTheme = () => {
+  const parentContext = React.useContext(ThemeContext);
+  const rootRef = React.useRef<HTMLElement>(null);
+  const [parentThemeState, setParentTheme] = React.useState(
+    parentContext?.theme,
+  );
+
+  useIsomorphicLayoutEffect(() => {
+    setParentTheme(
+      (old) =>
+        old ||
+        (rootRef.current?.parentElement
+          ?.closest('[data-iui-theme]')
+          ?.getAttribute('data-iui-theme') as ThemeType),
+    );
+  }, []);
+
+  return [parentContext?.theme || parentThemeState, rootRef] as const;
+};