chore: add styles for the login view

Author: yaroslav8765

adminforth/modules/styles.ts

@@ -278,6 +278,15 @@ export const styles = () => ({
     lightListViewButtonFocusRing: "#F3F4F6",
     lightListViewButtonBorder: "#D1D5DB",
 
+
+    /* Login View */
+    lightLoginViewBackground: "#FFFFFF",
+    lightLoginViewTextColor: "#111827",
+    lightLoginViewSubTextColor: "#9CA3AF",
+    lightLoginViewPromptBackground: "#F9FAFB",
+    lightLoginViewPromptText: "#1F2937",
+
+
 
 
     // colors for dark theme
@@ -547,6 +556,13 @@ export const styles = () => ({
     darkListViewButtonFocusRing: "#374151",
     darkListViewButtonBorder: "#4B5563",
 
+    /* Login view */
+    darkLoginViewBackground: "#374151",
+    darkLoginViewTextColor: "#FFFFFF",
+    darkLoginViewSubTextColor: "#D1D5DB",
+    darkLoginViewPromptBackground: "#1F2937",
+    darkLoginViewPromptText: "#9CA3AF",
+
 
   },
   boxShadow: {

adminforth/spa/src/views/LoginView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 relative w-screen h-screen"
+  <div class="relative flex items-center justify-center min-h-screen bg-lightHtml dark:bg-darkHtml w-screen h-screen"
     :style="coreStore.config?.loginBackgroundImage && backgroundPosition === 'over' ? {
       'background-image': 'url(' + loadFile(coreStore.config?.loginBackgroundImage) + ')',
       'background-size': 'cover',
@@ -27,7 +27,7 @@
       overflow-x-hidden z-50 min-w-[350px]  justify-center items-center md:inset-0 h-[calc(100%-1rem)] max-h-full">
         <div class="relative p-4 w-full max-h-full max-w-[400px]">
             <!-- Modal content -->
-            <div class="af-login-modal-content relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black" >
+            <div class="af-login-modal-content relative bg-lightLoginViewBackground rounded-lg shadow dark:bg-darkLoginViewBackground dark:shadow-black" >
                 <!-- Modal header -->
                 <div class="af-login-modal-header flex items-center justify-between flex-col p-4 md:p-5 border-b rounded-t dark:border-gray-600">
 
@@ -39,15 +39,15 @@
                         :meta="c.meta"
                       />
                     </template>
-                    <h3 v-else class="text-xl font-semibold text-gray-900 dark:text-white">
+                    <h3 v-else class="text-xl font-semibold text-lightLoginViewText dark:text-darkLoginViewTextColor">
                       {{ $t('Sign in to') }} {{ coreStore.config?.brandName }}
                     </h3>
                 </div>
                 <!-- Modal body -->
                 <div class="af-login-modal-body p-4 md:p-5">
                     <form class="space-y-4" @submit.prevent>
                         <div>
-                            <label for="username" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ $t('Your') }} {{ coreStore.config?.usernameFieldName?.toLowerCase() }}</label>
+                            <label for="username" class="block mb-2 text-sm font-medium text-lightLoginViewText dark:text-darkLoginViewTextColor">{{ $t('Your') }} {{ coreStore.config?.usernameFieldName?.toLowerCase() }}</label>
                             <Input 
                               v-model="username"
                               autocomplete="username"  
@@ -61,7 +61,7 @@
                               placeholder="[email protected]" required />
                         </div>
                         <div class="">
-                            <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ $t('Your password') }}</label>
+                            <label for="password" class="block mb-2 text-sm font-medium text-lightLoginViewText dark:text-darkLoginViewTextColor">{{ $t('Your password') }}</label>
                             <Input 
                               v-model="password"
                               ref="passwordInput"
@@ -70,7 +70,7 @@
                               @keydown.enter="login"
                               :type="!showPw ? 'password': 'text'" name="password" id="password" placeholder="••••••••" class="w-full" required>
                               <template #rightIcon>
-                                <button type="button" @click="showPw = !showPw" class="text-gray-400 dark:text-gray-300">
+                                <button type="button" @click="showPw = !showPw" class="text-lightLoginViewSubTextColor dark:text-darkLoginViewSubTextColor">
                                   <IconEyeSolid class="w-5 h-5" v-if="!showPw" />
                                   <IconEyeSlashSolid class="w-5 h-5" v-else />
                                 </button>
@@ -105,7 +105,7 @@
                         </div>
 
                         <div v-if="coreStore.config?.loginPromptHTML"
-                          class="flex items-center p-4 mb-4 text-sm text-gray-800 rounded-lg bg-gray-50 dark:bg-gray-800 dark:text-gray-400" role="alert"
+                          class="flex items-center p-4 mb-4 text-sm text-lightLoginViewPromptText rounded-lg bg-lightLoginViewPromptBackground dark:bg-darkLoginViewPromptBackground dark:text-darkLoginViewPromptText" role="alert"
                         >
                           <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                             <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>

dev-demo/index.ts

@@ -397,6 +397,13 @@ export const admin = new AdminForth({
           ListViewButtonFocusRing: "alias:lightlistViewButtonBackground",
           ListViewButtonBorder: "alias:lightListViewButtonBackground darken",
 
+          LoginViewBackground: "alias:lightPrimary lighten",
+          LoginViewTextColor: "alias:lightLoginViewBackground inverse",
+          LoginViewSubTextColor: "alias:lightLoginViewTextColor opacity:0.8",
+          LoginViewPromptBackground: "alias:lightLoginViewTextColor opacity:0.1",
+          LoginViewPromptText: "alias:ligthLoginViewTextColor",
+
+
 
         },
         dark: {
@@ -625,6 +632,12 @@ export const admin = new AdminForth({
           ListViewButtonFocusRing: "alias:darklistViewButtonBackground",
           ListViewButtonBorder: "alias:darkListViewButtonBackground darken",
 
+          LoginViewBackground: "alias:darkPrimary lighten",
+          LoginViewTextColor: "alias:darkLoginViewBackground inverse",
+          LoginViewSubTextColor: "alias:darkLoginViewTextColor opacity:0.8",
+          LoginViewPromptBackground: "alias:darkLoginViewTextColor opacity:0.1",
+          LoginViewPromptText: "alias:darkLoginViewTextColor",
+
         }
       }
     },