fix: themes not returning correctly

Author: matt-user

packages/app/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

packages/ui/src/components/Theme/useTheme.tsx

@@ -1,18 +1,16 @@
 'use client';
 
-import { updateThemeAppearanceClass, useThemeContext } from '@radix-ui/themes';
+import { updateThemeAppearanceClass } from '@radix-ui/themes';
 
 const THEME_KEY = 'fuel-ui-theme';
 
 export function useTheme() {
-  const { appearance: theme } = useThemeContext();
-
   function toggleTheme() {
     const current = localStorage.getItem(THEME_KEY);
     const next = current === 'light' ? 'dark' : 'light';
     updateThemeAppearanceClass(next);
     localStorage.setItem(THEME_KEY, next);
   }
 
-  return { theme, toggleTheme };
+  return { theme: localStorage.getItem(THEME_KEY) || 'dark', toggleTheme };
 }