diff --git a/components/sheet-editor.tsx b/components/sheet-editor.tsx
index 7c290c1..b056a35 100644
--- a/components/sheet-editor.tsx
+++ b/components/sheet-editor.tsx
@@ -25,7 +25,7 @@ const PureSpreadsheetEditor = ({
   status,
   isCurrentVersion,
 }: SheetEditorProps) => {
-  const { theme } = useTheme();
+  const { resolvedTheme } = useTheme();
 
   const parseData = useMemo(() => {
     if (!content) return Array(MIN_ROWS).fill(Array(MIN_COLS).fill(''));
@@ -111,7 +111,7 @@ const PureSpreadsheetEditor = ({
 
   return (
     <DataGrid
-      className={theme === 'dark' ? 'rdg-dark' : 'rdg-light'}
+      className={resolvedTheme === 'dark' ? 'rdg-dark' : 'rdg-light'}
       columns={columns}
       rows={localRows}
       enableVirtualization
diff --git a/components/sidebar-user-nav.tsx b/components/sidebar-user-nav.tsx
index 2015802..fc55298 100644
--- a/components/sidebar-user-nav.tsx
+++ b/components/sidebar-user-nav.tsx
@@ -26,7 +26,7 @@ import { guestRegex } from '@/lib/constants';
 export function SidebarUserNav({ user }: { user: User }) {
   const router = useRouter();
   const { data, status } = useSession();
-  const { setTheme, theme } = useTheme();
+  const { setTheme, resolvedTheme } = useTheme();
 
   const isGuest = guestRegex.test(data?.user?.email ?? '');
 
@@ -74,9 +74,9 @@ export function SidebarUserNav({ user }: { user: User }) {
             <DropdownMenuItem
               data-testid="user-nav-item-theme"
               className="cursor-pointer"
-              onSelect={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+              onSelect={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
             >
-              {`Toggle ${theme === 'light' ? 'dark' : 'light'} mode`}
+              {`Toggle ${resolvedTheme === 'light' ? 'dark' : 'light'} mode`}
             </DropdownMenuItem>
             <DropdownMenuSeparator />
             <DropdownMenuItem asChild data-testid="user-nav-item-auth">