From ae5135dda173dedc651e2035d320c14aade823c8 Mon Sep 17 00:00:00 2001 From: Pavel Fokin Date: Mon, 30 Jun 2025 15:28:36 +0200 Subject: [PATCH] Use 'next-themes' for theme swithcing --- components/Faucet.js | 2 +- components/Home/PriceChart.js | 2 +- components/Layout/Ads.js | 2 +- components/Layout/Header/Switch.js | 15 +++++---- components/Layout/LogoSmall.js | 10 ++++-- components/Layout/ThemeContext.js | 22 ------------- components/Receipt.js | 13 ++++---- components/SimpleChart.js | 4 +-- package.json | 1 + pages/_app.js | 4 +-- pages/_document.js | 50 +----------------------------- pages/admin/index.js | 13 ++++---- pages/amendment/[amendmentName].js | 2 +- pages/validators.js | 2 +- styles/variables.scss | 11 ++++--- yarn.lock | 5 +++ 16 files changed, 51 insertions(+), 107 deletions(-) delete mode 100644 components/Layout/ThemeContext.js diff --git a/components/Faucet.js b/components/Faucet.js index 1c12dd841..fd148e7ec 100644 --- a/components/Faucet.js +++ b/components/Faucet.js @@ -15,7 +15,7 @@ import { removeQueryParams, addQueryParams } from '../utils' -import { useTheme } from './Layout/ThemeContext' +import { useTheme } from 'next-themes' import { useRouter } from 'next/router' import AddressInput from './UI/AddressInput' diff --git a/components/Home/PriceChart.js b/components/Home/PriceChart.js index c13173cfb..73efeafb8 100644 --- a/components/Home/PriceChart.js +++ b/components/Home/PriceChart.js @@ -4,7 +4,7 @@ import { useState, useEffect } from 'react' import { useTranslation } from 'next-i18next' import dynamic from 'next/dynamic' -import { useTheme } from '../Layout/ThemeContext' +import { useTheme } from 'next-themes' import { nativeCurrency } from '../../utils' const Chart = dynamic(() => import('react-apexcharts'), { ssr: false }) diff --git a/components/Layout/Ads.js b/components/Layout/Ads.js index a013cf636..a5ceace64 100644 --- a/components/Layout/Ads.js +++ b/components/Layout/Ads.js @@ -1,5 +1,5 @@ import { useWidth, xahauNetwork } from '../../utils' -import { useTheme } from '../Layout/ThemeContext' +import { useTheme } from 'next-themes' import { useEffect, useState } from 'react' import { brandsBlock } from '../../styles/components/ads.module.scss' diff --git a/components/Layout/Header/Switch.js b/components/Layout/Header/Switch.js index 8c68c6024..3b0c500a6 100644 --- a/components/Layout/Header/Switch.js +++ b/components/Layout/Header/Switch.js @@ -1,19 +1,18 @@ import { useState, useEffect } from 'react' -import { useTheme } from '../ThemeContext' +import { useTheme } from 'next-themes' import Image from 'next/image' export default function Switch() { - const [rendered, setRendered] = useState(false) - const { theme, toggleTheme } = useTheme() + const [mounted, setMounted] = useState(false) + const { theme, setTheme } = useTheme() - useEffect(() => { - setRendered(true) - }, []) + // When mounted on client, now we can show the UI + useEffect(() => setMounted(true), []) - if (!rendered) return null + if (!mounted) return null const switchOnClick = () => { - toggleTheme() + setTheme(theme === 'dark' ? 'light' : 'dark') } return ( diff --git a/components/Layout/LogoSmall.js b/components/Layout/LogoSmall.js index 7e6328493..7dd03d9d0 100644 --- a/components/Layout/LogoSmall.js +++ b/components/Layout/LogoSmall.js @@ -1,9 +1,15 @@ import Logo from '../../public/images/logo-small.svg' import { server, xahauNetwork } from '../../utils' -import { useTheme } from './ThemeContext' +import { useTheme } from 'next-themes' +import { useState, useEffect } from 'react' export default function LogoSmall({ width, height, color, dependOnTheme }) { const { theme } = useTheme() + const [mounted, setMounted] = useState(false) + + useEffect(() => { + setMounted(true) + }, []) if (server.includes('bithomp')) { return ( @@ -44,7 +50,7 @@ export default function LogoSmall({ width, height, color, dependOnTheme }) { } let fill = color || xahauNetwork ? '#ffcc53' : '#4ba8b6' - if (dependOnTheme && theme === 'light' && xahauNetwork) { + if (dependOnTheme && mounted && theme === 'light' && xahauNetwork) { fill = '#0E233F' } return diff --git a/components/Layout/ThemeContext.js b/components/Layout/ThemeContext.js deleted file mode 100644 index 88dbca018..000000000 --- a/components/Layout/ThemeContext.js +++ /dev/null @@ -1,22 +0,0 @@ -import { useState, useEffect, useContext, createContext } from "react" - -const ThemeContext = createContext("light") - -export function ThemeProvider({ children }) { - const [theme, setTheme] = useState(global.window?.__theme || "light") - const toggleTheme = () => { - global.window.__setPreferredTheme(theme === "light" ? "dark" : "light") - } - - useEffect(() => { - global.window.__onThemeChange = setTheme; - }, []) - - return ( - - {children} - - ) -} - -export const useTheme = () => useContext(ThemeContext) \ No newline at end of file diff --git a/components/Receipt.js b/components/Receipt.js index f15face1c..be2b6eb23 100644 --- a/components/Receipt.js +++ b/components/Receipt.js @@ -1,9 +1,8 @@ import { useTranslation } from 'next-i18next' +import { useTheme } from 'next-themes' import { fullDateAndTime } from '../utils/format' -import { useTheme } from './Layout/ThemeContext' - import XahauExplorerLogo from '../public/images/xahauexplorer/longDark.svg' import XrplExplorerLogo from '../public/images/xrplexplorer/longDark.svg' @@ -11,7 +10,7 @@ import { nativeCurrency, xahauNetwork } from '../utils' export default function Receipt({ item, details }) { const { t } = useTranslation() - const { theme } = useTheme() + const { theme, setTheme } = useTheme() if (!details) { return @@ -19,9 +18,11 @@ export default function Receipt({ item, details }) { const onPrint = () => { if (theme === 'dark') { - global.window.__setPreferredTheme('light') - window.print() - global.window.__setPreferredTheme('dark') + setTheme('light') + setTimeout(() => { + window.print() + setTheme('dark') + }, 100) } else { window.print() } diff --git a/components/SimpleChart.js b/components/SimpleChart.js index 6ca7ff092..f0a35560e 100644 --- a/components/SimpleChart.js +++ b/components/SimpleChart.js @@ -1,7 +1,7 @@ import { useTranslation } from 'next-i18next' import dynamic from 'next/dynamic' +import { useTheme } from 'next-themes' -import { useTheme } from './Layout/ThemeContext' import { niceNumber } from '../utils/format' const Chart = dynamic(() => import('react-apexcharts'), { ssr: false }) @@ -22,7 +22,7 @@ const locales = { } } -export default function PriceChart({ data, combined, currency }) { +export default function SimpleChart({ data, combined, currency }) { const { i18n } = useTranslation() const { theme } = useTheme() diff --git a/package.json b/package.json index fa77f5d83..e70016012 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "next-i18next": "^13.2.1", "next-qrcode": "^2.5.1", "next-seo": "^5.15.0", + "next-themes": "^0.4.6", "nprogress": "^0.2.0", "postcss": "^8.5.3", "react": "^18.3.1", diff --git a/pages/_app.js b/pages/_app.js index 60d06be16..cf98a5f68 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -24,7 +24,7 @@ import '../styles/globals.css' import '../styles/ui.scss' import '../styles/components/nprogress.css' -import { ThemeProvider } from '../components/Layout/ThemeContext' +import { ThemeProvider } from 'next-themes' import { fetchCurrentFiatRate } from '../utils/common' const Header = dynamic(() => import('../components/Layout/Header'), { ssr: true }) @@ -164,7 +164,7 @@ const MyApp = ({ Component, pageProps }) => { - +
- -