dev-KPI · firehawk89 · Jan 18, 2024 · Jan 7, 2024 · Jan 7, 2024 · Jan 7, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "next": "14.0.3",
+    "next-themes": "^0.2.1",
     "react": "^18",
     "react-dom": "^18"
   },

diff --git a/src/app/auth/page.tsx b/src/app/auth/page.tsx
@@ -1,19 +1,21 @@
 import FormAuth from '@/components/Pages/Auth/FormAuth'
 import ImageCard from '@/components/Pages/Auth/ImageCard'
+import ButtonThemeToggle from '@/components/UI/ButtonThemeToggle'
 import IconGolub from '@/components/UI/Icons/IconGolub'
 import Layout from '@/components/UI/Layout'
 
 export default function Auth() {
   return (
     <section className="h-screen w-screen bg-gradient-blue-white">
-      <Layout className="flex items-center justify-center">
-        <div className="card p-7 sm:p-10 flex gap-7 md:gap-[3.75rem] bg-white">
-          <ImageCard className="hidden sm:block -my-[4.375rem] flex-shrink-0">
+      <Layout className="flex items-center justify-center dark:bg-none dark:bg-base-gray-8">
+        <div className="card p-7 sm:p-10 flex gap-7 md:gap-[3.75rem] bg-base-white dark:bg-base-black">
+          <ImageCard className="-my-[4.375rem] flex-shrink-0 hidden sm:flex items-center justify-center">
             <IconGolub />
           </ImageCard>
           <div>
             <h1 className="title-lg">Authentication</h1>
             <FormAuth />
+            <ButtonThemeToggle />
           </div>
         </div>
       </Layout>

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 body {
-  @apply font-text text-[1.0625rem] leading-tight tracking-[0.0063em] text-base-black;
+  @apply font-text text-[1.0625rem] leading-tight tracking-[0.0063em] text-base-black dark:text-base-white;
 }
 
 .title-lg {

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,5 +1,7 @@
 import type { Metadata } from 'next'
 
+import Providers from '@/store/Providers'
+
 import { text, title } from './fonts'
 import './globals.css'
 
@@ -14,8 +16,10 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <html lang="en">
-      <body className={`${title.variable} ${text.variable}`}>{children}</body>
+    <html lang="en" suppressHydrationWarning>
+      <body className={`${title.variable} ${text.variable}`}>
+        <Providers>{children}</Providers>
+      </body>
     </html>
   )
 }
diff --git a/src/components/UI/Button.tsx b/src/components/UI/Button.tsx
@@ -5,6 +5,7 @@ type ButtonProps = {
   children: ReactNode
   className?: string
   disabled?: boolean
+  onClick?: () => void
   type?: 'button' | 'reset' | 'submit'
 }
 
@@ -13,7 +14,13 @@ const THEMES = {
   light: 'disabled:bg-none disabled:text-base-gray-4 disabled:bg-base-gray-3',
 }
 
-const Button: FC<ButtonProps> = ({ children, className, disabled, type }) => {
+const Button: FC<ButtonProps> = ({
+  children,
+  className,
+  disabled,
+  onClick,
+  type,
+}) => {
   return (
     <button
       className={classnames(
@@ -22,6 +29,7 @@ const Button: FC<ButtonProps> = ({ children, className, disabled, type }) => {
         className
       )}
       disabled={disabled}
+      onClick={onClick}
       type={type || 'button'}
     >
       {children}

diff --git a/src/components/UI/ButtonThemeToggle.tsx b/src/components/UI/ButtonThemeToggle.tsx
@@ -0,0 +1,24 @@
+'use client'
+
+import Theme, { THEME } from '@/types/enums/Theme'
+import { useTheme } from 'next-themes'
+
+import Button from './Button'
+
+const ButtonThemeToggle = () => {
+  const { resolvedTheme, setTheme } = useTheme()
+
+  const toggleTheme = () => {
+    setTheme(
+      (resolvedTheme as Theme) === THEME.light ? THEME.dark : THEME.light
+    )
+  }
+
+  return (
+    <Button className="mt-4 w-full" onClick={toggleTheme}>
+      Toggle Theme
+    </Button>
+  )
+}
+
+export default ButtonThemeToggle
diff --git a/src/components/UI/Form/FormInput.tsx b/src/components/UI/Form/FormInput.tsx
@@ -14,13 +14,13 @@ const FormInput: FC<FormInputProps> = ({
     <div className="relative">
       <input
         className={classnames(
-          'peer pt-5 pb-2.5 px-4 w-full rounded-2xl border border-gray-3 placeholder:opacity-0',
+          'relative z-[5] peer pt-5 pb-2.5 px-4 w-full outline-none rounded-2xl border border-base-gray-3 focus:border-base-gray-5 dark:border-base-gray-7  bg-transparent placeholder:opacity-0 transition-colors',
           className
         )}
         placeholder={placeholder}
         {...props}
       />
-      <span className="input-placeholder absolute top-1/2 peer-focus:top-[0.375rem] left-4 -translate-y-1/2 peer-focus:translate-y-0 peer-focus:text-[0.6875rem] peer-focus:leading-[0.8125rem] text-base-gray-5 transition-all">
+      <span className="input-placeholder absolute z-0 top-1/2 peer-focus:top-[0.375rem] left-4 -translate-y-1/2 peer-focus:translate-y-0 peer-focus:text-[0.6875rem] peer-focus:leading-[0.8125rem] text-base-gray-5 transition-all">
         {placeholder}
       </span>
     </div>

diff --git a/src/store/Providers.tsx b/src/store/Providers.tsx
@@ -0,0 +1,14 @@
+'use client'
+
+import { ThemeProvider } from 'next-themes'
+import { FC, ReactNode } from 'react'
+
+type ProvidersProps = {
+  children: ReactNode
+}
+
+const Providers: FC<ProvidersProps> = ({ children }) => {
+  return <ThemeProvider attribute="class">{children}</ThemeProvider>
+}
+
+export default Providers
diff --git a/src/types/enums/Theme.ts b/src/types/enums/Theme.ts
@@ -0,0 +1,8 @@
+export const THEME = {
+  dark: 'dark',
+  light: 'light',
+} as const
+
+type Theme = keyof typeof THEME
+
+export default Theme
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -6,6 +6,7 @@ const config: Config = {
     './src/components/**/*.{js,ts,jsx,tsx,mdx}',
     './src/app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
+  darkMode: 'class',
   plugins: [],
   theme: {
     extend: {