diff --git a/packages/app-explorer/src/systems/Core/components/JsonViewer/JsonViewer.tsx b/packages/app-explorer/src/systems/Core/components/JsonViewer/JsonViewer.tsx
index 9648d5389..d18a1e0b1 100644
--- a/packages/app-explorer/src/systems/Core/components/JsonViewer/JsonViewer.tsx
+++ b/packages/app-explorer/src/systems/Core/components/JsonViewer/JsonViewer.tsx
@@ -1,5 +1,5 @@
 import type { BaseProps } from '@fuels/ui';
-import { cx, useRadixTheme } from '@fuels/ui';
+import { cx, useTheme } from '@fuels/ui';
 import {
   JsonView,
   collapseAllNested,
@@ -14,14 +14,14 @@ export type JsonViewerProps = BaseProps<{
 
 export function JsonViewer({ data, className, ...props }: JsonViewerProps) {
   const classes = styles();
-  const ctx = useRadixTheme();
+  const { theme } = useTheme();
   return (
     <JsonView
       data={data}
       shouldExpandNode={collapseAllNested}
       style={
         {
-          ...(ctx.appearance === 'dark' ? darkStyles : defaultStyles),
+          ...(theme === 'dark' ? darkStyles : defaultStyles),
           container: cx(classes.json(), className),
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
         } as any
diff --git a/packages/ui/src/components/Theme/useTheme.tsx b/packages/ui/src/components/Theme/useTheme.tsx
index 766e47f82..45e80ff4e 100644
--- a/packages/ui/src/components/Theme/useTheme.tsx
+++ b/packages/ui/src/components/Theme/useTheme.tsx
@@ -5,12 +5,13 @@ import { updateThemeAppearanceClass, useThemeContext } from '@radix-ui/themes';
 const THEME_KEY = 'fuel-ui-theme';
 
 export function useTheme() {
-  const { appearance: theme } = useThemeContext();
+  const { appearance: theme, onAppearanceChange } = useThemeContext();
 
   function toggleTheme() {
     const current = localStorage.getItem(THEME_KEY);
     const next = current === 'light' ? 'dark' : 'light';
     updateThemeAppearanceClass(next);
+    onAppearanceChange(next);
     localStorage.setItem(THEME_KEY, next);
   }