I fixed some issues with how we were setting up styles. should be consistent now

src/lib/hooks/context/use-theme.tsx

@@ -1,40 +1,51 @@
 'use client';
-import * as React from 'react';
+import {
+  useEffect,
+  useState,
+  type ComponentProps,
+} from 'react';
 import { ThemeProvider as NextThemesProvider } from 'next-themes';
 import { Moon, Sun } from 'lucide-react';
 import { useTheme } from 'next-themes';
 import { Button } from '@/components/ui';
+import { cn } from '@/lib/utils';
 
 const ThemeProvider = ({
   children,
   ...props
-}: React.ComponentProps<typeof NextThemesProvider>) => {
-  const [mounted, setMounted] = React.useState(false);
+}: ComponentProps<typeof NextThemesProvider>) => {
 
-  React.useEffect(() => {
-    setMounted(true);
-  }, []);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => { setMounted(true) }, []);
 
   if (!mounted) return null;
-
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 };
 
-type ThemeToggleProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+type ThemeToggleProps = {
   size?: number;
+  buttonClassName?: ComponentProps<typeof Button>['className'];
+  buttonProps?: Omit<ComponentProps<typeof Button>, 'className' | 'onClick'>;
 };
 
-const ThemeToggle = ({ size = 1, ...props }: ThemeToggleProps) => {
-  const { setTheme, resolvedTheme } = useTheme();
-  const [mounted, setMounted] = React.useState(false);
+const ThemeToggle = ({
+  size = 1,
+  buttonClassName,
+  buttonProps = {
+    variant: 'outline',
+    size: 'icon',
+  },
+}: ThemeToggleProps) => {
 
-  React.useEffect(() => {
-    setMounted(true);
-  }, []);
+  const { setTheme, resolvedTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => { setMounted(true) }, []);
 
   if (!mounted) {
     return (
-      <Button variant='outline' size='icon' {...props}>
+      <Button className={buttonClassName} {...buttonProps}>
         <span style={{ height: `${size}rem`, width: `${size}rem` }} />
       </Button>
     );
@@ -47,11 +58,9 @@ const ThemeToggle = ({ size = 1, ...props }: ThemeToggleProps) => {
 
   return (
     <Button
-      variant='outline'
-      size='icon'
-      className='cursor-pointer'
+      className={cn('cursor-pointer', buttonClassName)}
       onClick={toggleTheme}
-      {...props}
+      {...buttonProps}
     >
       <Sun
         style={{ height: `${size}rem`, width: `${size}rem` }}
@@ -61,7 +70,6 @@ const ThemeToggle = ({ size = 1, ...props }: ThemeToggleProps) => {
         style={{ height: `${size}rem`, width: `${size}rem` }}
         className='absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100'
       />
-      <span className='sr-only'>Toggle theme</span>
     </Button>
   );
 };