feat: add theming

2023-09-09 21:39:08 -05:00
parent 272355d9a0
commit 4b6fec0841
11 changed files with 141 additions and 30 deletions
@@ -1,9 +1,25 @@
-import { SignIn } from '@clerk/nextjs/app-beta';
+'use client';
+
+import { SignIn } from '@clerk/nextjs';

 export default function LoginPage() {
  return (
    <main className='flex flex-col items-center'>
-      <SignIn appearance={{ elements: { card: 'shadow-md' } }} />
+      <SignIn
+        appearance={{
+          elements: {
+            card: 'shadow-md dark:bg-secondary-gray [&_*:not(button):not(a)]: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',
+          },
+        }}
+      />
    </main>
  );
 }