feat(nuxt-auth): add dark mode support

gitsindonesia · Mar 2, 2023 · 0f7ed6e · 0f7ed6e
1 parent 2368696
commit 0f7ed6e
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 16 deletions.
diff --git a/starter/nuxt-auth/app.vue b/starter/nuxt-auth/app.vue
@@ -1,6 +1,10 @@
 <script setup lang="ts">
 useHead({
   title: 'GITS Nuxt Auth',
+  htmlAttrs: {
+    // uncomment this line to simulate dark mode
+    // class: 'dark',
+  },
 });
 </script>
 

diff --git a/starter/nuxt-auth/components/auth/AuthCenteredLayout.vue b/starter/nuxt-auth/components/auth/AuthCenteredLayout.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-white grid place-items-center lg:h-screen">
+  <div class="bg-white dark:bg-neutral-900 grid place-items-center lg:h-screen">
     <slot />
   </div>
 </template>
diff --git a/starter/nuxt-auth/components/auth/AuthForgotPassword.vue b/starter/nuxt-auth/components/auth/AuthForgotPassword.vue
@@ -37,14 +37,19 @@ const onSubmit = handleSubmit(async (values) => {
       <slot name="logo">
         <VLogo
           v-if="appConfig.auth.logo || appConfig.auth.forgotPassword.logo"
-          img-class="mb-6"
+          img-class="mb-6 dark:hidden block"
+        />
+        <VLogo
+          v-if="appConfig.auth.logo || appConfig.auth.forgotPassword.logo"
+          img-class="mb-6 dark:block hidden"
+          white
         />
       </slot>
       <div class="space-y-2 mb-4">
-        <h1 class="text-2xl font-semibold text-gray-900">
+        <h1 class="text-2xl font-semibold text-gray-900 dark:text-neutral-200">
           {{ appConfig.auth.forgotPassword.title }}
         </h1>
-        <p class="text-sm text-gray-700">
+        <p class="text-sm text-gray-700 dark:text-neutral-400">
           {{ appConfig.auth.forgotPassword.description }}
         </p>
       </div>

diff --git a/starter/nuxt-auth/components/auth/AuthLayout.vue b/starter/nuxt-auth/components/auth/AuthLayout.vue
@@ -3,7 +3,7 @@
     <slot name="sidebar">
       <AuthSidebar />
     </slot>
-    <div class="bg-white grid place-items-center">
+    <div class="bg-white dark:bg-neutral-900 grid place-items-center">
       <slot />
     </div>
   </AuthShell>

diff --git a/starter/nuxt-auth/components/auth/AuthLogin.vue b/starter/nuxt-auth/components/auth/AuthLogin.vue
@@ -60,14 +60,19 @@ const socialProviders = computed(() => {
       <slot name="logo">
         <VLogo
           v-if="appConfig.auth.logo || appConfig.auth.login.logo"
-          img-class="mb-6"
+          img-class="mb-6 dark:hidden block"
+        />
+        <VLogo
+          v-if="appConfig.auth.logo || appConfig.auth.login.logo"
+          img-class="mb-6 dark:block hidden"
+          white
         />
       </slot>
       <div class="space-y-2 mb-4">
-        <h1 class="text-2xl font-semibold text-gray-900">
+        <h1 class="text-2xl font-semibold text-gray-900 dark:text-neutral-200">
           {{ appConfig.auth.login.title }}
         </h1>
-        <p class="text-sm text-gray-700">
+        <p class="text-sm text-gray-700 dark:text-neutral-400">
           {{ appConfig.auth.login.description }}
         </p>
       </div>
@@ -101,7 +106,7 @@ const socialProviders = computed(() => {
         {{ appConfig.auth.login.submitText }}
       </VBtn>
 
-      <p class="text-sm text-gray-700 text-center mt-5">
+      <p class="text-sm text-gray-700 dark:text-neutral-400 text-center mt-5">
         {{ appConfig.auth.login.registerText }}
         <VBtn to="/auth/register" color="primary" text flush>
           {{ appConfig.auth.login.registerLinkText }}
@@ -112,11 +117,11 @@ const socialProviders = computed(() => {
         v-if="socialProviders.length > 0"
         class="flex gap-4 items-center mt-5 mb-4"
       >
-        <div class="border-t flex-1"></div>
-        <span class="text-sm text-gray-600">
+        <div class="border-t dark:border-neutral-700 flex-1"></div>
+        <span class="text-sm text-gray-600 dark:text-neutral-400">
           {{ appConfig.auth.login.orText }}
         </span>
-        <div class="border-t flex-1"></div>
+        <div class="border-t dark:border-neutral-700 flex-1"></div>
       </div>
 
       <template v-for="provider in providers" :key="provider?.id">

diff --git a/starter/nuxt-auth/components/auth/AuthRegister.vue b/starter/nuxt-auth/components/auth/AuthRegister.vue
@@ -51,14 +51,19 @@ const inputComponent = (component: any) => {
       <slot name="logo">
         <VLogo
           v-if="appConfig.auth.logo || appConfig.auth.register.logo"
-          img-class="mb-6"
+          img-class="mb-6 dark:hidden block"
+        />
+        <VLogo
+          v-if="appConfig.auth.logo || appConfig.auth.register.logo"
+          img-class="mb-6 dark:block hidden"
+          white
         />
       </slot>
       <div class="space-y-2 mb-4">
-        <h1 class="text-2xl font-semibold text-gray-900">
+        <h1 class="text-2xl font-semibold text-gray-900 dark:text-neutral-200">
           {{ appConfig.auth.register.title }}
         </h1>
-        <p class="text-sm text-gray-700">
+        <p class="text-sm text-gray-700 dark:text-neutral-400">
           {{ appConfig.auth.register.description }}
         </p>
       </div>

diff --git a/starter/nuxt-auth/nuxt.config.ts b/starter/nuxt-auth/nuxt.config.ts
@@ -11,5 +11,9 @@ export default defineNuxtConfig({
     optimizeDeps: {
       include: ['yup'],
     },
-  }
+  },
+  gitsUi: {
+    // uncomment to enable dark mode
+    // darkMode: true,
+  },
 });
diff --git a/starter/nuxt-auth/tailwind.config.js b/starter/nuxt-auth/tailwind.config.js
@@ -32,6 +32,7 @@ const secondary = {
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: 'class',
   content: ['./node_modules/@gits-id/**/src/**/*.{vue,js,ts,jsx,tsx,css}'],
   theme: {
     extend: {