next-themes

components/homepage/homeLoggedIn.tsx

@@ -7,7 +7,6 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import React, { useContext, useState } from 'react';
-import Theme from '../../constants/theme';
 import TimeRange from '../../constants/timeRange';
 import { AppContext } from '../../contexts/appContext';
 import { useTour } from '../../hooks/useTour';
@@ -43,15 +42,11 @@ export default function HomeLoggedIn({
   topLevelsThisMonth,
   user,
 }: HomeLoggedInProps) {
-  const { multiplayerSocket, theme, userConfig } = useContext(AppContext);
+  const { multiplayerSocket, userConfig } = useContext(AppContext);
   const router = useRouter();
   const [search, setSearch] = useState('');
   const { connectedPlayersCount, matches, socket } = multiplayerSocket;
-  const buttonClassNames = classNames('py-2.5 px-3.5 inline-flex justify-center items-center gap-2 rounded-md border font-medium align-middle focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-600 transition-all text-sm whitespace-nowrap',
-    theme === Theme.Light ?
-      'bg-green-100 hover:bg-gray-50 border-gray-300 text-gray-700' :
-      'bg-gray-800 hover:bg-slate-600 border-gray-700 text-gray-300'
-  );
+  const buttonClassNames = 'py-2.5 px-3.5 inline-flex justify-center items-center gap-2 rounded-md border font-medium align-middle focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-600 transition-all text-sm whitespace-nowrap bg-green-100 dark:bg-gray-800 hover:bg-gray-50 hover:dark:bg-slate-600 border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300';
 
   const tour = useTour(PagePath.HOME);
 

components/level/reviews/commentThread.tsx

@@ -3,7 +3,6 @@ import { Types } from 'mongoose';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import toast from 'react-hot-toast';
 import { KeyedMutator } from 'swr';
-import Theme from '../../../constants/theme';
 import { AppContext } from '../../../contexts/appContext';
 import { COMMENT_QUERY_LIMIT } from '../../../models/CommentEnums';
 import { EnrichedComment } from '../../../models/db/comment';
@@ -29,7 +28,7 @@ export default function CommentThread({ className, comment, mutateComments, onSe
   const [text, setText] = useState('');
   const [totalRows, setTotalRows] = useState(comment.totalReplies || 0);
   const [page, setPage] = useState(0);
-  const { theme, user } = useContext(AppContext);
+  const { user } = useContext(AppContext);
 
   useEffect(() => {
     const urlParams = new URLSearchParams(window.location.search);
@@ -210,12 +209,7 @@ export default function CommentThread({ className, comment, mutateComments, onSe
         :
         <div className='flex flex-col gap-2'>
           <textarea
-            className={classNames(
-              'block p-1 w-full rounded-lg border disabled:opacity-25',
-              theme === Theme.Light ?
-                'bg-gray-100 focus:ring-blue-500 focus:border-blue-500 border-gray-300' :
-                'bg-gray-700 border-gray-600 placeholder-gray-400 focus:ring-blue-500 focus:border-blue-500'
-            )}
+            className='block p-1 w-full rounded-lg border disabled:opacity-25 focus:ring-blue-500 focus:border-blue-500 bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600'
             disabled={isUpdating}
             onChange={(e) => setText(e.currentTarget.value)}
             placeholder='Reply...'

components/level/reviews/commentWall.tsx

@@ -1,8 +1,6 @@
-import classNames from 'classnames';
 import { Types } from 'mongoose';
 import React, { useContext, useEffect, useState } from 'react';
 import toast from 'react-hot-toast';
-import Theme from '../../../constants/theme';
 import { AppContext } from '../../../contexts/appContext';
 import useComments from '../../../hooks/useComments';
 import { COMMENT_QUERY_LIMIT } from '../../../models/CommentEnums';
@@ -20,8 +18,8 @@ export default function CommentWall({ userId }: CommentWallProps) {
   const [isUpdating, setIsUpdating] = useState(false);
   const [page, setPage] = useState(0);
   const [text, setText] = useState('');
-  const { theme, user } = useContext(AppContext);
   const [totalRows, setTotalRows] = useState(0);
+  const { user } = useContext(AppContext);
 
   useEffect(() => {
     if (commentQuery) {
@@ -101,12 +99,7 @@ export default function CommentWall({ userId }: CommentWallProps) {
       {user &&
         <div className='flex flex-col gap-2'>
           <textarea
-            className={classNames(
-              'block p-1 w-full rounded-lg border disabled:opacity-25',
-              theme === Theme.Light ?
-                'bg-gray-100 focus:ring-blue-500 focus:border-blue-500 border-gray-300' :
-                'bg-gray-700 border-gray-600 placeholder-gray-400 focus:ring-blue-500 focus:border-blue-500'
-            )}
+            className='block p-1 w-full rounded-lg border disabled:opacity-25 focus:ring-blue-500 focus:border-blue-500 bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600'
             disabled={isUpdating}
             onChange={(e) => setText(e.currentTarget.value)}
             placeholder='Add a comment...'

components/level/reviews/reviewForm.tsx

@@ -1,9 +1,7 @@
-import classNames from 'classnames';
 import React, { useContext, useState } from 'react';
 import toast from 'react-hot-toast';
 import { Rating } from 'react-simple-star-rating';
 import TextareaAutosize from 'react-textarea-autosize';
-import Theme from '../../../constants/theme';
 import { AppContext } from '../../../contexts/appContext';
 import { LevelContext } from '../../../contexts/levelContext';
 import { PageContext } from '../../../contexts/pageContext';
@@ -24,7 +22,7 @@ export default function ReviewForm({ inModal, review }: ReviewFormProps) {
   const [rating, setRating] = useState(review?.score || 0);
   const [reviewBody, setReviewBody] = useState(review?.text || '');
   const { setPreventKeyDownEvent } = useContext(PageContext);
-  const { theme, user: reqUser } = useContext(AppContext);
+  const { user: reqUser } = useContext(AppContext);
 
   function onUpdateReview() {
     setIsUpdating(true);
@@ -118,10 +116,7 @@ export default function ReviewForm({ inModal, review }: ReviewFormProps) {
         }
       </div>
       <TextareaAutosize
-        className={classNames(
-          'bg-inherit block py-1 -mt-2 w-full border-b border-neutral-500 disabled:text-neutral-500 transition resize-none placeholder:text-neutral-500 focus:outline-0 rounded-none',
-          theme === Theme.Light ? 'focus:border-black' : 'focus:border-white',
-        )}
+        className='bg-inherit block py-1 -mt-2 w-full border-b border-neutral-500 disabled:text-neutral-500 transition resize-none placeholder:text-neutral-500 focus:outline-0 rounded-none focus:border-black focus:dark:border-white'
         disabled={isUpdating}
         onBlur={() => {
           // only prevent keydown when entering review from the sidebar

components/modal/themeModal.tsx

@@ -1,5 +1,6 @@
 import RadioButton from '@root/components/page/radioButton';
 import TileType from '@root/constants/tileType';
+import { useTheme } from 'next-themes';
 import React, { useContext, useEffect } from 'react';
 import Theme, { getIconFromTheme } from '../../constants/theme';
 import { AppContext } from '../../contexts/appContext';
@@ -13,6 +14,7 @@ interface ThemeModalProps {
 
 export default function ThemeModal({ closeModal, isOpen }: ThemeModalProps) {
   const { mutateUser, setTheme, theme } = useContext(AppContext);
+  const { setTheme: setAppTheme } = useTheme();
 
   useEffect(() => {
     for (const className of document.body.classList.values()) {
@@ -24,6 +26,11 @@ export default function ThemeModal({ closeModal, isOpen }: ThemeModalProps) {
     }
   }, [isOpen, setTheme]);
 
+  // maintain accurate app theme for tailwind dark mode classes
+  useEffect(() => {
+    setAppTheme(theme === Theme.Light ? 'light' : 'dark');
+  }, [setAppTheme, theme]);
+
   function onChange(e: React.ChangeEvent<HTMLInputElement>) {
     const newTheme = e.currentTarget.value;
 

components/settings/settingsPro.tsx

@@ -5,7 +5,6 @@ import moment from 'moment';
 import Image from 'next/image';
 import Link from 'next/link';
 import React, { useContext, useEffect, useState } from 'react';
-import Theme from '../../constants/theme';
 import { AppContext } from '../../contexts/appContext';
 import useSWRHelper from '../../hooks/useSWRHelper';
 import { SubscriptionData } from '../../pages/api/subscription';
@@ -40,7 +39,7 @@ interface SettingsProProps {
 }
 
 export default function SettingsPro({ stripeCustomerPortalLink, stripePaymentLink, stripePaymentYearlyLink }: SettingsProProps) {
-  const { mutateUser, theme, user, userLoading } = useContext(AppContext);
+  const { mutateUser, user, userLoading } = useContext(AppContext);
   const [plan, setPlan] = useState('year');
   const [shouldContinouslyFetch, setShouldContinouslyFetch] = useState(false);
   const { data: subscriptionData } = useSWRHelper<SubscriptionData>('/api/subscription');
@@ -69,12 +68,6 @@ export default function SettingsPro({ stripeCustomerPortalLink, stripePaymentLin
     );
   }
 
-  const buttonClassNames = classNames('py-2.5 px-3.5 mt-2 inline-flex justify-center items-center gap-2 rounded-md border font-medium align-middle focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-600 transition-all text-sm whitespace-nowrap',
-    theme === Theme.Light ?
-      'bg-green-100 hover:bg-gray-50 border-gray-300 text-gray-700' :
-      'bg-gray-800 hover:bg-slate-600 border-gray-700 text-gray-300'
-  );
-
   return (
     <div className='flex flex-col justify-center items-center gap-4'>
       <div className='flex gap-4'>
@@ -101,7 +94,7 @@ export default function SettingsPro({ stripeCustomerPortalLink, stripePaymentLin
                   </span>
                   :
                   <a
-                    className={buttonClassNames}
+                    className='py-2.5 px-3.5 mt-2 inline-flex justify-center items-center gap-2 rounded-md border font-medium align-middle focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-600 transition-all text-sm whitespace-nowrap bg-green-100 dark:bg-gray-800 hover:bg-gray-50 hover:dark:bg-slate-600 border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300'
                     href={stripeCustomerPortalLink || ''}
                     rel='noreferrer'
                     target='_blank'

package.json

@@ -29,6 +29,7 @@
     "newrelic": "^11.1.0",
     "next": "^13.3.4",
     "next-seo": "^6.1.0",
+    "next-themes": "^0.2.1",
     "nextjs-google-analytics": "^2.3.3",
     "nodemailer": "^6.9.5",
     "nprogress": "^0.2.0",

pages/_app.tsx

@@ -7,6 +7,7 @@ import { Rubik, Teko } from 'next/font/google';
 import Head from 'next/head';
 import Router, { useRouter } from 'next/router';
 import { DefaultSeo } from 'next-seo';
+import { ThemeProvider } from 'next-themes';
 import nProgress from 'nprogress';
 import React, { useEffect, useState } from 'react';
 import CookieConsent from 'react-cookie-consent';
@@ -305,13 +306,11 @@ export default function MyApp({ Component, pageProps }: AppProps) {
   const isEU = Intl.DateTimeFormat().resolvedOptions().timeZone.startsWith('Europe');
 
   return (
-    <>
-
+    <ThemeProvider attribute='class'>
       <Head>
         <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
         <meta name='apple-itunes-app' content='app-id=1668925562, app-argument=pathology.gg' />
       </Head>
-
       <DefaultSeo
         defaultTitle='Pathology - Shortest Path Puzzle Game'
         description='The goal of the puzzle game Pathology is simple. Get to the exit in the least number of moves.'
@@ -366,6 +365,6 @@ export default function MyApp({ Component, pageProps }: AppProps) {
           </div>
         </AppContext.Provider>
       </GrowthBookProvider>
-    </>
+    </ThemeProvider>
   );
 }

tailwind.config.js

@@ -3,6 +3,10 @@ module.exports = {
     './components/**/*.{js,jsx,ts,tsx}',
     './pages/**/*.{js,jsx,ts,tsx}',
   ],
+  darkMode: 'class',
+  plugins: [
+    require('@headlessui/tailwindcss')
+  ],
   theme: {
     extend: {
       flexBasis: {
@@ -15,7 +19,4 @@ module.exports = {
       },
     },
   },
-  plugins: [
-    require('@headlessui/tailwindcss')
-  ],
 };