refactor: remove ThemeButton component and update theme handling to support only dark mode

Author: kevinjosethomas

src/components/Board/GameplayInterface.tsx

@@ -12,7 +12,7 @@ import Head from 'next/head'
 import { useUnload } from 'src/hooks/useUnload'
 import type { DrawShape } from 'chessground/draw'
 import { useCallback, useContext, useMemo, useState } from 'react'
-import { AuthContext, ThemeContext, WindowSizeContext } from 'src/contexts'
+import { AuthContext, WindowSizeContext } from 'src/contexts'
 import { PlayControllerContext } from 'src/contexts/PlayControllerContext/PlayControllerContext'
 
 interface Props {
@@ -44,7 +44,7 @@ export const GameplayInterface: React.FC<React.PropsWithChildren<Props>> = (
     setOrientation,
     goToPreviousNode,
   } = useContext(PlayControllerContext)
-  const { theme } = useContext(ThemeContext)
+
   const { user } = useContext(AuthContext)
   const { isMobile } = useContext(WindowSizeContext)
 
@@ -115,9 +115,7 @@ export const GameplayInterface: React.FC<React.PropsWithChildren<Props>> = (
   const Info = (
     <>
       <div className="flex w-full items-center justify-between text-secondary">
-        <p>
-          {theme == 'dark' ? '●' : '○'} {whitePlayer ?? 'Unknown'}
-        </p>
+        <p>● {whitePlayer ?? 'Unknown'}</p>
         <p>
           {game.termination?.winner === 'white' ? (
             <span className="text-engine-3">1</span>
@@ -129,9 +127,7 @@ export const GameplayInterface: React.FC<React.PropsWithChildren<Props>> = (
         </p>
       </div>
       <div className="flex w-full items-center justify-between text-secondary">
-        <p>
-          {theme == 'light' ? '●' : '○'} {blackPlayer ?? 'Unknown'}
-        </p>
+        <p>○ {blackPlayer ?? 'Unknown'}</p>
         <p>
           {game.termination?.winner === 'black' ? (
             <span className="text-engine-3">1</span>

src/components/Core/Header.tsx

@@ -6,7 +6,6 @@ import { useRouter } from 'next/router'
 import { useCallback, useContext, useEffect, useState } from 'react'
 
 import { PlayType } from 'src/types'
-import { ThemeButton } from 'src/components'
 import { AuthContext, ModalContext, WindowSizeContext } from 'src/contexts'
 import { MenuIcon, UserIcon, DiscordIcon } from 'src/components/Icons/icons'
 
@@ -187,7 +186,6 @@ export const Header: React.FC = () => {
         </div>
       </div>
       <div className="hidden flex-row items-center gap-3 md:flex">
-        <ThemeButton />
         <a
           target="_blank"
           rel="noreferrer"
@@ -295,7 +293,6 @@ export const Header: React.FC = () => {
             </a>
           </div>
           <div className="flex w-full flex-row items-center gap-3 px-4">
-            <ThemeButton />
             <a
               target="_blank"
               rel="noreferrer"

src/components/Core/ThemeButton.tsx

@@ -1,9 +1,8 @@
-export * from './Header'
-export * from './Footer'
+export * from './AuthenticatedWrapper'
 export * from './Compose'
+export * from './ErrorBoundary'
+export * from './Footer'
+export * from './Header'
 export * from './Loading'
 export * from './Markdown'
-export * from './ThemeButton'
-export * from './ErrorBoundary'
-export * from './AuthenticatedWrapper'
 export * from './PlayerInfo'

src/components/Core/index.ts

@@ -8,8 +8,8 @@ interface IThemeContext {
 }
 
 export const ThemeContext = React.createContext<IThemeContext>({
-  theme: 'light',
+  theme: 'dark',
   toggleTheme: () => {
-    throw new Error('poorly provided ThemeContext, missing toggle Theme')
+    // No-op since we only support dark mode
   },
 })

src/contexts/ThemeContext/ThemeContext.ts

@@ -1,12 +1,14 @@
-export * from './useLocalStorage'
-export * from './useTheme'
-export * from './useWindowSize'
-export * from './useTreeController'
-export * from './useTrainingController'
-export * from './useTuringController'
-export * from './useStockfishEngine'
-export * from './useMaiaEngine'
 export * from './useAnalysisController'
+export * from './useBaseTreeController'
 export * from './useChessSound'
-export * from './usePlayController'
+export * from './useLocalStorage'
+export * from './useMaiaEngine'
 export * from './useOpeningDrillController'
+export * from './usePlayController'
+export * from './useStats'
+export * from './useStockfishEngine'
+export * from './useTrainingController'
+export * from './useTreeController'
+export * from './useTuringController'
+export * from './useUnload'
+export * from './useWindowSize'

src/hooks/index.ts

@@ -3,7 +3,6 @@ import { NextPage } from 'next/types'
 import { useCallback, useContext, useEffect } from 'react'
 
 import {
-  ThemeContext,
   ModalContext,
   WindowSizeContext,
   TuringControllerContext,
@@ -54,7 +53,7 @@ interface Props {
 
 const Turing: React.FC<Props> = (props: Props) => {
   const { game, stats } = props
-  const { theme } = useContext(ThemeContext)
+
   const { isMobile } = useContext(WindowSizeContext)
 
   const controller = useContext(TuringControllerContext)
@@ -71,7 +70,7 @@ const Turing: React.FC<Props> = (props: Props) => {
   const Info = (
     <>
       <div className="flex w-full items-center justify-between text-secondary">
-        <p>{theme == 'dark' ? '●' : '○'} Unknown</p>
+        <p>● Unknown</p>
         <p>
           {game.termination.winner === 'white' ? (
             <span className="text-engine-3">1</span>
@@ -83,7 +82,7 @@ const Turing: React.FC<Props> = (props: Props) => {
         </p>
       </div>
       <div className="flex w-full items-center justify-between text-secondary">
-        <p>{theme == 'light' ? '●' : '○'} Unknown</p>
+        <p>○ Unknown</p>
         <p>
           {game.termination.winner === 'black' ? (
             <span className="text-engine-3">1</span>

src/hooks/useTheme/index.ts

@@ -1,13 +1,16 @@
 import { ReactNode } from 'react'
 import { ThemeContext } from 'src/contexts'
-import { useTheme } from 'src/hooks'
 
 export const ThemeContextProvider: React.FC<{ children: ReactNode }> = ({
   children,
 }: {
   children: ReactNode
 }) => {
-  const [theme, toggleTheme] = useTheme()
+  const theme = 'dark'
+  const toggleTheme = () => {
+    // No-op since we only support dark mode
+  }
+
   return (
     <ThemeContext.Provider value={{ theme, toggleTheme }}>
       <div className={`theme-${theme}`}>{children}</div>