From 639d5bf8cc9946eba016f3086e7d8f2ccdcf0b1b Mon Sep 17 00:00:00 2001 From: Matt 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 ( 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 }; }