ThemeProvider as Root

iTwin · Feb 4, 2025 · 30752e8 · 30752e8
1 parent fa0a6bb
commit 30752e8
Showing 1 changed file with 15 additions and 15 deletions.
diff --git a/apps/react-workshop/.ladle/components.tsx b/apps/react-workshop/.ladle/components.tsx
@@ -53,20 +53,20 @@ export const Provider: GlobalProvider = ({ children }) => {
 
   return (
     <React.StrictMode>
-      <ITwinUiV5Root colorScheme={theme} density='dense'>
-        <ThemeProvider
-          theme={theme}
-          themeOptions={{
-            applyBackground: false,
-            highContrast,
-          }}
-          future={{
-            themeBridge: futureThemeBridge,
-          }}
-        >
-          {children}
-        </ThemeProvider>
-      </ITwinUiV5Root>
+      <ThemeProvider
+        as={ITwinUiV5Root}
+        colorScheme={theme}
+        density='dense'
+        theme={theme}
+        themeOptions={{
+          applyBackground: false,
+          highContrast,
+        }}
+        future={{ themeBridge: futureThemeBridge }}
+        synchronizeColorScheme
+      >
+        {children}
+      </ThemeProvider>
     </React.StrictMode>
   );
 };
@@ -86,6 +86,6 @@ export const argTypes = {
   },
   'future.themeBridge': {
     control: { type: 'boolean' },
-    defaultValue: false,
+    defaultValue: true,
   },
 };