Migrate themes from Recoil to next-themes

components/ThemeToggle.tsx

@@ -1,14 +1,12 @@
-import { useRecoilState } from "recoil";
-import { themeState } from "@/state/theme";
+import { useTheme } from "next-themes";
 import { MoonIcon, SunIcon } from "@heroicons/react/24/outline";
 
 const ThemeToggle = () => {
-  const [theme, setTheme] = useRecoilState(themeState);
+  const { theme, setTheme, resolvedTheme } = useTheme();
 
   const toggleTheme = () => {
-    const newTheme = theme === "dark" ? "light" : "dark";
-    setTheme(newTheme);
-    localStorage.setItem("theme", newTheme);
+    const current = resolvedTheme ?? theme;
+    setTheme(current === "dark" ? "light" : "dark");
   };
 
   return (
@@ -17,7 +15,7 @@ const ThemeToggle = () => {
       className="p-2 rounded-full bg-zinc-200 dark:bg-zinc-700 transition hover:scale-105"
       title="Toggle theme"
     >
-      {theme === "dark" ? (
+      {(resolvedTheme ?? theme) === "dark" ? (
         <SunIcon className="w-5 h-5 text-yellow-400" />
       ) : (
         <MoonIcon className="w-5 h-5 text-zinc-800" />
@@ -26,4 +24,4 @@ const ThemeToggle = () => {
   );
 };
 
-export default ThemeToggle;
+export default ThemeToggle;

components/profile/activityoverview.tsx

@@ -9,6 +9,7 @@ import { useRouter } from "next/router";
 import axios from "axios";
 import toast from "react-hot-toast";
 import { Line } from "react-chartjs-2";
+import { useTheme } from "next-themes";
 import {
   Chart as ChartJS,
   CategoryScale,
@@ -28,8 +29,6 @@ import {
   IconClipboardList,
   IconClock,
 } from "@tabler/icons-react";
-import { useRecoilValue } from "recoil";
-import { themeState } from "@/state/theme";
 import moment from "moment";
 import type { ActivitySession, inactivityNotice } from "@prisma/client";
 
@@ -99,8 +98,8 @@ export function ActivityOverview({
   const [loading, setLoading] = useState(true);
   const liveSessionTimerRef = useRef<NodeJS.Timeout | null>(null);
 
-  const theme = useRecoilValue(themeState);
-  const isDark = theme === "dark";
+  const { resolvedTheme } = useTheme();
+  const isDark = resolvedTheme === "dark";
 
   const sortedTimeline = useMemo(() => {
     return [...timeline].sort((a, b) => {

components/sidebar.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useRef } from "react";
 import type { NextPage } from "next";
 import { loginState, workspacestate } from "@/state";
-import { themeState } from "@/state/theme";
+import { useTheme } from "next-themes";
 import { useRecoilState } from "recoil";
 import { Menu, Listbox } from "@headlessui/react";
 import { useRouter } from "next/router";
@@ -198,7 +198,7 @@ function MobileWorkspaceSwitcher({
 const Sidebar: NextPage<SidebarProps> = ({ isCollapsed, setIsCollapsed }) => {
   const [login, setLogin] = useRecoilState(loginState);
   const [workspace, setWorkspace] = useRecoilState(workspacestate);
-  const [theme, setTheme] = useRecoilState(themeState);
+  const { theme, setTheme, resolvedTheme } = useTheme();
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [docsEnabled, setDocsEnabled] = useState(false);
   const [alliesEnabled, setAlliesEnabled] = useState(false);
@@ -329,9 +329,7 @@ const Sidebar: NextPage<SidebarProps> = ({ isCollapsed, setIsCollapsed }) => {
   };
 
   const toggleTheme = () => {
-    const newTheme = theme === "dark" ? "light" : "dark";
-    setTheme(newTheme);
-    if (typeof window !== "undefined") localStorage.setItem("theme", newTheme);
+    setTheme(resolvedTheme === "dark" ? "light" : "dark");
   };
 
   useEffect(() => {
@@ -599,11 +597,11 @@ const Sidebar: NextPage<SidebarProps> = ({ isCollapsed, setIsCollapsed }) => {
                             "flex items-center justify-center w-7 h-7 rounded-lg shrink-0",
                             active ? "bg-zinc-200/70 dark:bg-zinc-700" : "bg-zinc-100 dark:bg-zinc-800"
                           )}>
-                            {theme === "dark"
+                            {resolvedTheme === "dark"
                               ? <IconSun className="w-3.5 h-3.5" stroke={2} />
                               : <IconMoon className="w-3.5 h-3.5" stroke={2} />}
                           </span>
-                          {theme === "dark" ? "Light mode" : "Dark mode"}
+                          {resolvedTheme === "dark" ? "Light mode" : "Dark mode"}
                         </button>
                       )}
                     </Menu.Item>
@@ -812,8 +810,8 @@ const Sidebar: NextPage<SidebarProps> = ({ isCollapsed, setIsCollapsed }) => {
                 style={{ WebkitTapHighlightColor: "transparent" }}
                 className="w-full flex items-center gap-3 px-4 py-3.5 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-800/60 transition-colors select-none outline-none"
               >
-                {theme === "dark" ? <IconSun className="w-5 h-5 shrink-0" stroke={1.5} /> : <IconMoon className="w-5 h-5 shrink-0" stroke={1.5} />}
-                <span className="font-medium">{theme === "dark" ? "Light mode" : "Dark mode"}</span>
+                {resolvedTheme === "dark" ? <IconSun className="w-5 h-5 shrink-0" stroke={1.5} /> : <IconMoon className="w-5 h-5 shrink-0" stroke={1.5} />}
+                <span className="font-medium">{resolvedTheme === "dark" ? "Light mode" : "Dark mode"}</span>
               </button>
               <div className="h-px bg-zinc-100 dark:bg-zinc-800 mx-4" />
               <button

components/topbar.tsx

@@ -4,6 +4,7 @@ import { loginState } from "@/state";
 import { useRecoilState } from "recoil";
 import { Menu } from "@headlessui/react";
 import Router, { useRouter } from "next/router";
+import { useTheme } from "next-themes";
 import {
   IconLogout,
   IconChevronDown,
@@ -19,7 +20,6 @@ import {
 } from "@tabler/icons-react";
 import axios from "axios";
 import { Fragment, useEffect, useRef, useState } from "react";
-import { themeState } from "@/state/theme";
 import toast from "react-hot-toast";
 import { DiscordOAuthAvailable } from "@/hooks/useDiscordOAuth";
 import { GoogleOAuthAvailable } from "@/hooks/useGoogleOAuth";
@@ -48,7 +48,7 @@ type Panel = "main" | "settings" | "sessions";
 
 const Topbar: NextPage = () => {
   const [login, setLogin] = useRecoilState(loginState);
-  const [theme, setTheme] = useRecoilState(themeState);
+  const {theme, setTheme, resolvedTheme} = useTheme();
   const { isAvailable: isDiscordOAuth } = DiscordOAuthAvailable();
   const { isAvailable: isGoogleOAuth } = GoogleOAuthAvailable();
   const [open, setOpen] = useState(false);
@@ -58,6 +58,10 @@ const Topbar: NextPage = () => {
   const router = useRouter();
   const errorToastShown = useRef(false);
 
+  const toggleTheme = () => {
+    setTheme(resolvedTheme === "dark" ? "light" : "dark");
+  };
+
   const openPanel = (p: Panel) => setPanel(p);
 
   const handleOpen = () => {
@@ -143,12 +147,6 @@ const Topbar: NextPage = () => {
     }
   }
 
-  const toggleTheme = () => {
-    const t = theme === "dark" ? "light" : "dark";
-    setTheme(t);
-    if (typeof window !== "undefined") localStorage.setItem("theme", t);
-  };
-
   useEffect(() => {
     if (!Router.isReady || errorToastShown.current) return;
     const { action, ...rest } = Router.query;
@@ -255,12 +253,12 @@ const Topbar: NextPage = () => {
                         onClick={toggleTheme}
                         className="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-700/60 transition-colors text-left"
                       >
-                        {theme === "dark" ? (
+                        {resolvedTheme === "dark" ? (
                           <IconSun className="w-4 h-4 text-zinc-400 shrink-0" />
                         ) : (
                           <IconMoon className="w-4 h-4 text-zinc-400 shrink-0" />
                         )}
-                        {theme === "dark" ? "Light mode" : "Dark mode"}
+                        {resolvedTheme === "dark" ? "Light mode" : "Dark mode"}
                       </button>
 
                       <button

package.json

@@ -57,6 +57,7 @@
     "moment": "^2.30.1",
     "moment-timezone": "^0.6.1",
     "next": "^16.2.6",
+    "next-themes": "^0.4.6",
     "noblox.js": "^7.3.1",
     "node-cache": "^5.1.2",
     "node-cron": "^4.2.1",

pages/_app.tsx

@@ -20,12 +20,13 @@ import {
   PointElement,
   LineElement,
 } from "chart.js";
-import { themeState } from "@/state/theme";
 import AuthProvider from "./AuthProvider";
 import { loginState } from "@/state";
 import { getRGBFromTailwindColor, DEFAULT_THEME_RGB } from "@/utils/themeColor";
 import LoadingScreen from "@/components/loading";
 import { Toaster } from "react-hot-toast";
+import { ThemeProvider, useTheme } from "next-themes";
+
 
 const POSTHOG_KEY = process.env.NEXT_PUBLIC_POSTHOG_KEY;
 const POSTHOG_HOST =
@@ -46,24 +47,14 @@ ChartJS.register(
   LineElement,
 );
 
-function ThemeHandler() {
-  const theme = useRecoilValue(themeState);
-
-  useEffect(() => {
-    if (!theme) return;
-    document.documentElement.classList.remove("light", "dark");
-    document.documentElement.classList.add(theme as string);
-  }, [theme]);
-
-  return null;
-}
-
 function ColorThemeHandler() {
   const [workspace] = useRecoilState(workspacestate);
-  const theme = useRecoilValue(themeState);
+  const { theme, setTheme, systemTheme } = useTheme();
+  const { resolvedTheme } = useTheme();
 
   useEffect(() => {
-    const isDark = theme === "dark";
+    //const isDark = theme === "dark";
+    const isDark = resolvedTheme === "dark";
     const darkTheme = (workspace as any)?.groupDarkTheme;
     const lightTheme = workspace?.groupTheme;
 
@@ -127,27 +118,31 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
 
   return (
     <RecoilRoot>
-      <Head>
-        <title>Orbit</title>
-        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
-      </Head>
-      <ConsoleBanner />
-
-      <AuthProvider loading={loading} setLoading={setLoading} />
-      <Initializer />
-      <ThemeHandler />
-      <ColorThemeHandler />
-
-      {showLoader && <LoadingScreen done={!loading} />}
-
-      {!showLoader && (
-        <Layout>
-          <div className="pb-8 sm:pb-0">
-            <Toaster position={isMobile ? "top-center" : "bottom-center"} />
-            <Component {...pageProps} />
-          </div>
-        </Layout>
-      )}
+      <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+        <Head>
+          <title>Orbit</title>
+          <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1, viewport-fit=cover"
+          />
+        </Head>
+        <ConsoleBanner />
+
+        <AuthProvider loading={loading} setLoading={setLoading} />
+        <Initializer />
+        <ColorThemeHandler />
+
+        {showLoader && <LoadingScreen done={!loading} />}
+
+        {!showLoader && (
+          <Layout>
+            <div className="pb-8 sm:pb-0">
+              <Toaster position={isMobile ? "top-center" : "bottom-center"} />
+              <Component {...pageProps} />
+            </div>
+          </Layout>
+        )}
+      </ThemeProvider>
     </RecoilRoot>
   );
 }

pages/api/@me.ts

@@ -1,7 +1,6 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 import type { NextApiRequest, NextApiResponse } from 'next'
 import prisma from '@/utils/database';
-// import { withAuth } from '@/lib/withSession'
 import { getUsername, getThumbnail, getDisplayName } from '@/utils/userinfoEngine'
 import * as noblox from 'noblox.js'
 import { AuthenticatedRequest, withAuth } from '@/lib/withAuth';

pages/api/workspace/[id]/activity/users.ts

@@ -200,7 +200,7 @@ export async function handler(req: AuthenticatedRequest, res: NextApiResponse<Da
       idleTimeEnabled && session.idleTime
         ? Number(session.idleTime) * 60000
         : 0;
-    const effectiveTime = sessionDuration - idleTimeMs;
+    const effectiveTime = Math.max(0, sessionDuration - idleTimeMs); // we clamp the value
 
     if (found) {
       found.ms.push(effectiveTime);