use latest next-themes

components/account/AccountValue.tsx

@@ -8,7 +8,6 @@ import { Transition } from '@headlessui/react'
 import SheenLoader from '../shared/SheenLoader'
 import Change from '../shared/Change'
 import FormatNumericValue from '@components/shared/FormatNumericValue'
-import { useTheme } from 'next-themes'
 import useLocalStorageState from 'hooks/useLocalStorageState'
 import { ANIMATION_SETTINGS_KEY } from 'utils/constants'
 import { INITIAL_ANIMATION_SETTINGS } from '@components/settings/AnimationSettings'
@@ -21,6 +20,7 @@ import { useViewport } from 'hooks/useViewport'
 import { breakpoints } from 'utils/theme'
 import { ViewToShow } from './AccountPage'
 import useAccountPerformanceData from 'hooks/useAccountPerformanceData'
+import useThemeWrapper from 'hooks/useThemeWrapper'
 
 const AccountValue = ({
   accountValue,
@@ -34,7 +34,7 @@ const AccountValue = ({
   handleViewChange: (view: ViewToShow) => void
 }) => {
   const { t } = useTranslation('common')
-  const { theme } = useTheme()
+  const { theme } = useThemeWrapper()
   const { group } = useMangoGroup()
   const { mangoAccount, mangoAccountAddress } = useMangoAccount()
   const [showExpandChart, setShowExpandChart] = useState<boolean>(false)

components/account/AssetsLiabilities.tsx

@@ -2,7 +2,6 @@ import { toUiDecimalsForQuote } from '@blockworks-foundation/mango-v4'
 import useMangoAccount from 'hooks/useMangoAccount'
 import useMangoGroup from 'hooks/useMangoGroup'
 import { useTranslation } from 'next-i18next'
-import { useTheme } from 'next-themes'
 import { useMemo } from 'react'
 import { Cell, Pie, PieChart } from 'recharts'
 import { COLORS } from 'styles/colors'
@@ -11,12 +10,13 @@ import FlipNumbers from 'react-flip-numbers'
 import useLocalStorageState from 'hooks/useLocalStorageState'
 import { ANIMATION_SETTINGS_KEY } from 'utils/constants'
 import { INITIAL_ANIMATION_SETTINGS } from '@components/settings/AnimationSettings'
+import useThemeWrapper from 'hooks/useThemeWrapper'
 
 const AssetsLiabilities = ({ isMobile }: { isMobile: boolean }) => {
   const { t } = useTranslation('account')
   const { group } = useMangoGroup()
   const { mangoAccount } = useMangoAccount()
-  const { theme } = useTheme()
+  const { theme } = useThemeWrapper()
   const [animationSettings] = useLocalStorageState(
     ANIMATION_SETTINGS_KEY,
     INITIAL_ANIMATION_SETTINGS,

components/account/FundingChart.tsx

@@ -21,7 +21,6 @@ import {
   ReferenceLine,
   ResponsiveContainer,
 } from 'recharts'
-import { useTheme } from 'next-themes'
 import { COLORS } from 'styles/colors'
 import { formatDateAxis } from '@components/shared/DetailedAreaOrBarChart'
 import { formatYAxis } from 'utils/formatting'
@@ -32,6 +31,7 @@ import { ArrowLeftIcon, NoSymbolIcon } from '@heroicons/react/20/solid'
 import { FadeInFadeOut } from '@components/shared/Transitions'
 import ContentBox from '@components/shared/ContentBox'
 import SheenLoader from '@components/shared/SheenLoader'
+import useThemeWrapper from 'hooks/useThemeWrapper'
 
 const fetchHourlyFunding = async (mangoAccountPk: string) => {
   try {
@@ -65,7 +65,7 @@ const FundingChart = ({ hideChart }: { hideChart: () => void }) => {
   const { t } = useTranslation('common')
   const { mangoAccountAddress } = useMangoAccount()
   const [daysToShow, setDaysToShow] = useState('30')
-  const { theme } = useTheme()
+  const { theme } = useThemeWrapper()
   const {
     data: fundingData,
     isLoading: loadingFunding,

components/account/HealthContributionsChart.tsx

@@ -1,5 +1,4 @@
 import { useTranslation } from 'next-i18next'
-import { useTheme } from 'next-themes'
 import {
   Cell,
   Pie,
@@ -14,6 +13,7 @@ import { formatCurrencyValue } from 'utils/numbers'
 import { useViewport } from 'hooks/useViewport'
 import { breakpoints } from 'utils/theme'
 import { HealthContribution } from 'types'
+import useThemeWrapper from 'hooks/useThemeWrapper'
 
 const HealthContributionsChart = ({
   data,
@@ -25,7 +25,7 @@ const HealthContributionsChart = ({
   setActiveIndex: (i: number | undefined) => void
 }) => {
   const { t } = useTranslation(['common', 'account'])
-  const { theme } = useTheme()
+  const { theme } = useThemeWrapper()
   const { width } = useViewport()
   const isMobile = width ? width < breakpoints.sm : false
 

components/account/VolumeChart.tsx

@@ -13,7 +13,6 @@ import {
   ReferenceLine,
   ResponsiveContainer,
 } from 'recharts'
-import { useTheme } from 'next-themes'
 import { COLORS } from 'styles/colors'
 import { formatDateAxis } from '@components/shared/DetailedAreaOrBarChart'
 import { formatYAxis } from 'utils/formatting'
@@ -27,6 +26,7 @@ import SheenLoader from '@components/shared/SheenLoader'
 import useAccountHourlyVolumeStats from 'hooks/useAccountHourlyVolumeStats'
 import useMangoAccount from 'hooks/useMangoAccount'
 import { DAILY_MILLISECONDS } from 'utils/constants'
+import useThemeWrapper from 'hooks/useThemeWrapper'
 
 const VolumeChart = ({ hideChart }: { hideChart: () => void }) => {
   const { t } = useTranslation(['account', 'common', 'stats'])
@@ -34,7 +34,7 @@ const VolumeChart = ({ hideChart }: { hideChart: () => void }) => {
   const { hourlyVolumeData: chartData, loadingHourlyVolume: loading } =
     useAccountHourlyVolumeStats()
   const [daysToShow, setDaysToShow] = useState('30')
-  const { theme } = useTheme()
+  const { theme } = useThemeWrapper()
 
   const CustomTooltip = ({
     active,

components/icons/OrderbookIcon.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from 'next-themes'
+import useThemeWrapper from 'hooks/useThemeWrapper'
 import { COLORS } from 'styles/colors'
 
 const OrderbookIcon = ({
@@ -8,7 +8,7 @@ const OrderbookIcon = ({
   side: 'buy' | 'sell'
   className?: string
 }) => {
-  const { theme } = useTheme()
+  const { theme } = useThemeWrapper()
   const buyColor = side === 'buy' ? COLORS.UP[theme] : COLORS.FGD4[theme]
   const sellColor = side === 'sell' ? COLORS.DOWN[theme] : COLORS.FGD4[theme]
   return (

components/shared/DetailedAreaOrBarChart.tsx

@@ -18,7 +18,6 @@ import FlipNumbers from 'react-flip-numbers'
 import ContentBox from './ContentBox'
 import SheenLoader from './SheenLoader'
 import { COLORS } from '../../styles/colors'
-import { useTheme } from 'next-themes'
 import { IconButton } from './Button'
 import { ArrowLeftIcon, NoSymbolIcon } from '@heroicons/react/20/solid'
 import { FadeInFadeOut } from './Transitions'
@@ -33,6 +32,7 @@ import { useTranslation } from 'next-i18next'
 import FormatNumericValue from './FormatNumericValue'
 import { ContentType } from 'recharts/types/component/Tooltip'
 import Tooltip from './Tooltip'
+import useThemeWrapper from 'hooks/useThemeWrapper'
 
 dayjs.extend(relativeTime)
 
@@ -97,7 +97,7 @@ const DetailedAreaOrBarChart: FunctionComponent<
 }) => {
   const { t } = useTranslation('common')
   const [mouseData, setMouseData] = useState<any>(null)
-  const { theme } = useTheme()
+  const { theme } = useThemeWrapper()
   const [animationSettings] = useLocalStorageState(
     ANIMATION_SETTINGS_KEY,
     INITIAL_ANIMATION_SETTINGS,

components/stats/PerpMarketsOverviewTable.tsx

@@ -1,6 +1,5 @@
 import { I80F48, PerpMarket } from '@blockworks-foundation/mango-v4'
 import { useTranslation } from 'next-i18next'
-import { useTheme } from 'next-themes'
 import { useViewport } from '../../hooks/useViewport'
 import mangoStore from '@store/mangoStore'
 import { COLORS } from '../../styles/colors'
@@ -25,6 +24,7 @@ import { Disclosure, Transition } from '@headlessui/react'
 import { LinkButton } from '@components/shared/Button'
 import SoonBadge from '@components/shared/SoonBadge'
 import { DAILY_SECONDS } from 'utils/constants'
+import useThemeWrapper from 'hooks/useThemeWrapper'
 
 export const getOneDayPerpStats = (
   stats: PerpStatsItem[] | null,
@@ -57,7 +57,7 @@ const PerpMarketsOverviewTable = () => {
   const perpMarkets = mangoStore((s) => s.perpMarkets)
   const loadingPerpStats = mangoStore((s) => s.perpStats.loading)
   const perpStats = mangoStore((s) => s.perpStats.data)
-  const { theme } = useTheme()
+  const { theme } = useThemeWrapper()
   const { width } = useViewport()
   const showTableView = width ? width > breakpoints.md : false
   const rate = usePerpFundingRate()
@@ -304,7 +304,7 @@ const MobilePerpMarketItem = ({ market }: { market: PerpMarket }) => {
   const { t } = useTranslation('common')
   const loadingPerpStats = mangoStore((s) => s.perpStats.loading)
   const perpStats = mangoStore((s) => s.perpStats.data)
-  const { theme } = useTheme()
+  const { theme } = useThemeWrapper()
   const router = useRouter()
   const rate = usePerpFundingRate()
 

components/stats/SpotMarketsTable.tsx

@@ -1,6 +1,5 @@
 import { Serum3Market } from '@blockworks-foundation/mango-v4'
 import { useTranslation } from 'next-i18next'
-import { useTheme } from 'next-themes'
 import { useMemo } from 'react'
 import { useViewport } from '../../hooks/useViewport'
 import mangoStore from '@store/mangoStore'
@@ -21,12 +20,13 @@ import { TickerData } from 'types'
 import { Disclosure, Transition } from '@headlessui/react'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import MarketChange from '@components/shared/MarketChange'
+import useThemeWrapper from 'hooks/useThemeWrapper'
 
 const SpotMarketsTable = () => {
   const { t } = useTranslation('common')
   const { group } = useMangoGroup()
   const serumMarkets = mangoStore((s) => s.serumMarkets)
-  const { theme } = useTheme()
+  const { theme } = useThemeWrapper()
   const { width } = useViewport()
   const showTableView = width ? width > breakpoints.md : false
   const { data: birdeyePrices, isLoading: loadingPrices } =
@@ -213,7 +213,7 @@ const MobileSpotMarketItem = ({
   const { data: birdeyePrices, isLoading: loadingPrices } =
     useBirdeyeMarketPrices()
   const { group } = useMangoGroup()
-  const { theme } = useTheme()
+  const { theme } = useThemeWrapper()
   const baseBank = group?.getFirstBankByTokenIndex(market.baseTokenIndex)
   const quoteBank = group?.getFirstBankByTokenIndex(market.quoteTokenIndex)
   const serumMarket = group?.getSerum3ExternalMarket(market.serumMarketExternal)

components/swap/SwapTokenChart.tsx

@@ -23,7 +23,6 @@ import ContentBox from '../shared/ContentBox'
 import { formatCurrencyValue, formatNumericValue } from '../../utils/numbers'
 import SheenLoader from '../shared/SheenLoader'
 import { COLORS } from '../../styles/colors'
-import { useTheme } from 'next-themes'
 import Change from '../shared/Change'
 import ChartRangeButtons from '../shared/ChartRangeButtons'
 import { useViewport } from 'hooks/useViewport'
@@ -48,6 +47,7 @@ import { interpolateNumber } from 'd3-interpolate'
 import { IconButton } from '@components/shared/Button'
 import Tooltip from '@components/shared/Tooltip'
 import { SwapHistoryItem } from 'types'
+import useThemeWrapper from 'hooks/useThemeWrapper'
 
 dayjs.extend(relativeTime)
 
@@ -183,7 +183,7 @@ const SwapTokenChart = () => {
   const [mouseData, setMouseData] = useState<ChartDataItem>()
   const [daysToShow, setDaysToShow] = useState('1')
   const [flipPrices, setFlipPrices] = useState(false)
-  const { theme } = useTheme()
+  const { theme } = useThemeWrapper()
   const [animationSettings] = useLocalStorageState(
     ANIMATION_SETTINGS_KEY,
     INITIAL_ANIMATION_SETTINGS,

components/token/PriceChart.tsx

@@ -1,7 +1,7 @@
 import { formatDateAxis } from '@components/shared/DetailedAreaOrBarChart'
 import dayjs from 'dayjs'
 import { BirdeyePriceResponse } from 'hooks/useBirdeyeMarketPrices'
-import { useTheme } from 'next-themes'
+import useThemeWrapper from 'hooks/useThemeWrapper'
 import { useMemo } from 'react'
 import { Area, AreaChart, ResponsiveContainer, XAxis, YAxis } from 'recharts'
 import { COLORS } from 'styles/colors'
@@ -14,7 +14,7 @@ const PriceChart = ({
   prices: BirdeyePriceResponse[]
   daysToShow: number
 }) => {
-  const { theme } = useTheme()
+  const { theme } = useThemeWrapper()
 
   const change = useMemo(() => {
     return prices[prices.length - 1].value - prices[0].value

components/trade/DepthChart.tsx

@@ -2,7 +2,6 @@ import Slider from '@components/forms/Slider'
 import useMarkPrice from 'hooks/useMarkPrice'
 import useSelectedMarket from 'hooks/useSelectedMarket'
 import { useViewport } from 'hooks/useViewport'
-import { useTheme } from 'next-themes'
 import { useCallback, useMemo, useState } from 'react'
 import {
   XAxis,
@@ -21,6 +20,7 @@ import { CartesianViewBox } from 'recharts/types/util/types'
 import { cumOrderbookSide } from 'types'
 import mangoStore from '@store/mangoStore'
 import { breakpoints } from 'utils/theme'
+import useThemeWrapper from 'hooks/useThemeWrapper'
 
 type LabelPosition =
   | 'left'
@@ -68,7 +68,7 @@ type DepthOrderbookSide = {
 }
 
 const DepthChart = () => {
-  const { theme } = useTheme()
+  const { theme } = useThemeWrapper()
   const { serumOrPerpMarket } = useSelectedMarket()
   const [mouseData, setMouseData] = useState<cumOrderbookSide | null>(null)
   const markPrice = useMarkPrice()

components/trade/TradingViewChart.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useRef, useMemo, useState, useCallback } from 'react'
-import { useTheme } from 'next-themes'
 import {
   widget,
   ChartingLibraryWidgetOptions,
@@ -36,6 +35,7 @@ import useTradeHistory from 'hooks/useTradeHistory'
 import dayjs from 'dayjs'
 import ModifyTvOrderModal from '@components/modals/ModifyTvOrderModal'
 import { findSerum3MarketPkInOpenOrders } from './OpenOrders'
+import useThemeWrapper from 'hooks/useThemeWrapper'
 
 export interface ChartContainerProps {
   container: ChartingLibraryWidgetOptions['container']
@@ -65,7 +65,7 @@ function hexToRgb(hex: string) {
 
 const TradingViewChart = () => {
   const { t } = useTranslation(['tv-chart', 'trade'])
-  const { theme } = useTheme()
+  const { theme } = useThemeWrapper()
   const { width } = useViewport()
   const [chartReady, setChartReady] = useState(false)
   const [headerReady, setHeaderReady] = useState(false)

hooks/useKlineChart.ts

@@ -1,8 +1,8 @@
-import { useTheme } from 'next-themes'
 import { COLORS } from 'styles/colors'
+import useThemeWrapper from './useThemeWrapper'
 
 export function useKlineChart() {
-  const { theme } = useTheme()
+  const { theme } = useThemeWrapper()
   const styles = {
     grid: {
       show: false,

hooks/useThemeWrapper.tsx

@@ -0,0 +1,10 @@
+import { useTheme } from 'next-themes'
+
+export default function useThemeWrapper() {
+  const theme = useTheme()
+
+  return {
+    ...theme,
+    theme: theme.theme || theme.themes[0],
+  }
+}

package.json

@@ -60,7 +60,7 @@
     "lodash": "4.17.21",
     "next": "13.4.4",
     "next-i18next": "14.0.0",
-    "next-themes": "0.1.1",
+    "next-themes": "0.2.0",
     "process": "0.11.10",
     "react": "18.2.0",
     "react-dom": "18.2.0",

yarn.lock

@@ -6490,10 +6490,10 @@ next-i18next@14.0.0:
     hoist-non-react-statics "^3.3.2"
     i18next-fs-backend "^2.1.5"
 
-next-themes@0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.1.1.tgz#122113a458bf1d1be5ffed66778ab924c106f82a"
-  integrity sha512-Iqxt6rhS/KfK/iHJ0tfFjTcdLEAI0AgwFuAFrMwLOPK5e+MI3I+fzyvBoS+VaOS+NldUiazurhgwYhrfV0VXsQ==
+next-themes@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.2.0.tgz#fdc507f61e95b3ae513dee8d4783bcec8c02e3a3"
+  integrity sha512-myhpDL4vadBD9YDSHiewqvzorGzB03N84e+3LxCwHRlM/hiBOaW+UsKsQojQAzC7fdcJA0l2ppveXcYaVV+hxQ==
 
 next@13.4.4:
   version "13.4.4"