feat: add theming

src/app/signup/[[...signup]]/page.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { SignUp } from '@clerk/nextjs';
 
 export default function SignUpPage() {
@@ -6,7 +8,15 @@ export default function SignUpPage() {
       <SignUp
         appearance={{
           elements: {
-            card: 'shadow-md',
+            card: 'shadow-md dark:bg-secondary-gray [&_*:not(button):not(a):not(svg)]:dark:text-white',
+            socialButtonsIconButton__github:
+              'hover:bg-gradient-to-br from-blue-600 via-purple-600 to-red-600 dark:border-white dark:border-opacity-10',
+            socialButtonsIconButton__google:
+              'hover:bg-gradient-to-r from-blue-500 via-green-500 to-yellow-500 dark:border-white dark:border-opacity-10',
+            socialButtonsIconButton__microsoft:
+              'hover:bg-gradient-to-r from-red-600 via-green-600 to-blue-600 dark:border-white dark:border-opacity-10',
+            dividerLine: 'dark:bg-white dark:bg-opacity-10',
+            formFieldInput: 'dark:bg-primary-gray dark:text-white',
           },
         }}
       />