From 639d5bf8cc9946eba016f3086e7d8f2ccdcf0b1b Mon Sep 17 00:00:00 2001
From: Matt <mattauer@umich.edu>
Date: Tue, 30 Jan 2024 10:18:34 -0600
Subject: [PATCH 1/2] fix: themes not returning correctly

---
 .../src/systems/Core/components/JsonViewer/JsonViewer.tsx   | 6 +++---
 packages/ui/src/components/Theme/useTheme.tsx               | 6 ++----
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/app/src/systems/Core/components/JsonViewer/JsonViewer.tsx b/packages/app/src/systems/Core/components/JsonViewer/JsonViewer.tsx
index 9648d5389..d18a1e0b1 100644
--- a/packages/app/src/systems/Core/components/JsonViewer/JsonViewer.tsx
+++ b/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
diff --git a/packages/ui/src/components/Theme/useTheme.tsx b/packages/ui/src/components/Theme/useTheme.tsx
index 766e47f82..bc615b6b5 100644
--- a/packages/ui/src/components/Theme/useTheme.tsx
+++ b/packages/ui/src/components/Theme/useTheme.tsx
@@ -1,12 +1,10 @@
 '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';
@@ -14,5 +12,5 @@ export function useTheme() {
     localStorage.setItem(THEME_KEY, next);
   }
 
-  return { theme, toggleTheme };
+  return { theme: localStorage.getItem(THEME_KEY) || 'dark', toggleTheme };
 }

From 8e5f7fe70ee0b0c05d88390fcde32390e653c3d8 Mon Sep 17 00:00:00 2001
From: Matt <mattauer@umich.edu>
Date: Mon, 5 Feb 2024 16:52:40 -0600
Subject: [PATCH 2/2] refactor: use radix solution

---
 packages/ui/src/components/Theme/useTheme.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/Theme/useTheme.tsx b/packages/ui/src/components/Theme/useTheme.tsx
index bc615b6b5..45e80ff4e 100644
--- a/packages/ui/src/components/Theme/useTheme.tsx
+++ b/packages/ui/src/components/Theme/useTheme.tsx
@@ -1,16 +1,19 @@
 'use client';
 
-import { updateThemeAppearanceClass } from '@radix-ui/themes';
+import { updateThemeAppearanceClass, useThemeContext } from '@radix-ui/themes';
 
 const THEME_KEY = 'fuel-ui-theme';
 
 export function useTheme() {
+  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);
   }
 
-  return { theme: localStorage.getItem(THEME_KEY) || 'dark', toggleTheme };
+  return { theme, toggleTheme };
 }