From e008faf7292f7e1c74727ed9699d3dfc5f34aa4b Mon Sep 17 00:00:00 2001
From: KVOJJJin <jzongcode@gmail.com>
Date: Mon, 31 Mar 2025 10:28:19 +0800
Subject: [PATCH] Feat: dark mode for independent pages (#17045)

---
 web/app/activate/activateForm.tsx             |   4 +-
 web/app/activate/page.tsx                     |   5 +-
 web/app/activate/style.module.css             |   4 --
 web/app/activate/team-28x28.png               | Bin 7349 -> 0 bytes
 web/app/components/base/select/locale.tsx     |  57 +-----------------
 .../forgot-password/ChangePasswordForm.tsx    |  18 +++---
 .../forgot-password/ForgotPasswordForm.tsx    |   8 +--
 web/app/forgot-password/page.tsx              |   5 +-
 web/app/init/InitPasswordPopup.tsx            |   4 +-
 web/app/init/page.tsx                         |  18 ++++--
 web/app/install/installForm.tsx               |  30 +++++----
 web/app/install/page.tsx                      |   5 +-
 web/app/reset-password/layout.tsx             |   3 +-
 web/app/signin/layout.tsx                     |   3 +-
 web/app/signin/normalForm.tsx                 |  10 +--
 web/app/signin/oneMoreStep.tsx                |   2 +-
 16 files changed, 66 insertions(+), 110 deletions(-)
 delete mode 100644 web/app/activate/style.module.css
 delete mode 100644 web/app/activate/team-28x28.png

diff --git a/web/app/activate/activateForm.tsx b/web/app/activate/activateForm.tsx
index aef5b5a29..782b24be6 100644
--- a/web/app/activate/activateForm.tsx
+++ b/web/app/activate/activateForm.tsx
@@ -50,8 +50,8 @@ const ActivateForm = () => {
       {checkRes && !checkRes.is_valid && (
         <div className="flex flex-col md:w-[400px]">
           <div className="mx-auto w-full">
-            <div className="mb-3 flex h-20 w-20 items-center justify-center rounded-[20px] border border-gray-100 p-5 text-[40px] font-bold shadow-lg">🤷‍♂️</div>
-            <h2 className="text-[32px] font-bold text-gray-900">{t('login.invalid')}</h2>
+            <div className="mb-3 flex h-20 w-20 items-center justify-center rounded-[20px] border border-divider-regular bg-components-option-card-option-bg p-5 text-[40px] font-bold shadow-lg">🤷‍♂️</div>
+            <h2 className="text-[32px] font-bold text-text-primary">{t('login.invalid')}</h2>
           </div>
           <div className="mx-auto mt-6 w-full">
             <Button variant='primary' className='w-full !text-sm'>
diff --git a/web/app/activate/page.tsx b/web/app/activate/page.tsx
index de207286b..c002b2dc2 100644
--- a/web/app/activate/page.tsx
+++ b/web/app/activate/page.tsx
@@ -7,6 +7,7 @@ import cn from '@/utils/classnames'
 const Activate = () => {
   return (
     <div className={cn(
+      'bg-background-body',
       style.background,
       'flex min-h-screen w-full',
       'sm:p-4 lg:p-8',
@@ -15,13 +16,13 @@ const Activate = () => {
     )}>
       <div className={
         cn(
-          'flex w-full shrink-0 flex-col rounded-2xl bg-white shadow',
+          'flex w-full shrink-0 flex-col rounded-2xl bg-background-section-burn shadow',
           'space-between',
         )
       }>
         <Header />
         <ActivateForm />
-        <div className='px-8 py-6 text-sm font-normal text-gray-500'>
+        <div className='px-8 py-6 text-sm font-normal text-text-tertiary'>
           © {new Date().getFullYear()} LangGenius, Inc. All rights reserved.
         </div>
       </div>
diff --git a/web/app/activate/style.module.css b/web/app/activate/style.module.css
deleted file mode 100644
index 17798981f..000000000
--- a/web/app/activate/style.module.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.logo {
-  background: #fff center no-repeat url(./team-28x28.png);
-  background-size: 56px;
-}
\ No newline at end of file
diff --git a/web/app/activate/team-28x28.png b/web/app/activate/team-28x28.png
deleted file mode 100644
index b5175210e6818c036d5cffe7c26f56f13c650879..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 7349
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
bKXUeeeT1(7WQ*W$00000NkvXXu0mjfh-KWM

diff --git a/web/app/components/base/select/locale.tsx b/web/app/components/base/select/locale.tsx
index 09b8142d1..8981f09ce 100644
--- a/web/app/components/base/select/locale.tsx
+++ b/web/app/components/base/select/locale.tsx
@@ -21,11 +21,7 @@ export default function Select({
     <div className="w-56 text-right">
       <Menu as="div" className="relative inline-block text-left">
         <div>
-          <MenuButton className="h-[44px]justify-center inline-flex w-full items-center
-          rounded-lg border border-gray-200
-          px-[10px] py-[6px] text-[13px]
-          font-medium text-gray-900
-          hover:bg-gray-100">
+          <MenuButton className="h-[44px]justify-center inline-flex w-full items-center rounded-lg border border-components-button-secondary-border px-[10px] py-[6px] text-[13px] font-medium text-text-primary hover:bg-state-base-hover">
             <GlobeAltIcon className="mr-1 h-5 w-5" aria-hidden="true" />
             {item?.name}
           </MenuButton>
@@ -39,12 +35,12 @@ export default function Select({
           leaveFrom="transform opacity-100 scale-100"
           leaveTo="transform opacity-0 scale-95"
         >
-          <MenuItems className="absolute right-0 z-10 mt-2 w-[200px] origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+          <MenuItems className="absolute right-0 z-10 mt-2 w-[200px] origin-top-right divide-y divide-divider-regular rounded-md bg-components-panel-bg shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
             <div className="px-1 py-1 ">
               {items.map((item) => {
                 return <MenuItem key={item.value}>
                   <button
-                    className={'group flex w-full items-center rounded-lg px-3 py-2 text-sm text-gray-700 data-[active]:bg-gray-100'}
+                    className={'group flex w-full items-center rounded-lg px-3 py-2 text-sm text-text-secondary data-[active]:bg-state-base-hover'}
                     onClick={(evt) => {
                       evt.preventDefault()
                       onChange && onChange(item.value)
@@ -63,50 +59,3 @@ export default function Select({
     </div>
   )
 }
-
-export function InputSelect({
-  items,
-  value,
-  onChange,
-}: ISelectProps) {
-  const item = items.filter(item => item.value === value)[0]
-  return (
-    <div className="w-full">
-      <Menu as="div" className="w-full">
-        <div>
-          <MenuButton className="block h-[38px] w-full appearance-none rounded-md border border-gray-300 px-3 py-2 text-left shadow-sm placeholder:text-gray-400 sm:text-sm">
-            {item?.name}
-          </MenuButton>
-        </div>
-        <Transition
-          as={Fragment}
-          enter="transition ease-out duration-100"
-          enterFrom="transform opacity-0 scale-95"
-          enterTo="transform opacity-100 scale-100"
-          leave="transition ease-in duration-75"
-          leaveFrom="transform opacity-100 scale-100"
-          leaveTo="transform opacity-0 scale-95"
-        >
-          <MenuItems className="absolute right-0 z-10 mt-2 w-full origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-            <div className="px-1 py-1 ">
-              {items.map((item) => {
-                return <MenuItem key={item.value}>
-                  <button
-                    className={'group flex w-full items-center rounded-md px-2 py-2 text-sm data-[active]:bg-gray-100'}
-                    onClick={() => {
-                      onChange && onChange(item.value)
-                    }}
-                  >
-                    {item.name}
-                  </button>
-                </MenuItem>
-              })}
-
-            </div>
-
-          </MenuItems>
-        </Transition>
-      </Menu>
-    </div>
-  )
-}
diff --git a/web/app/forgot-password/ChangePasswordForm.tsx b/web/app/forgot-password/ChangePasswordForm.tsx
index 0939b053a..0ac34c1a9 100644
--- a/web/app/forgot-password/ChangePasswordForm.tsx
+++ b/web/app/forgot-password/ChangePasswordForm.tsx
@@ -86,8 +86,8 @@ const ChangePasswordForm = () => {
       {verifyTokenRes && !verifyTokenRes.is_valid && (
         <div className="flex flex-col md:w-[400px]">
           <div className="mx-auto w-full">
-            <div className="mb-3 flex h-20 w-20 items-center justify-center rounded-[20px] border border-gray-100 p-5 text-[40px] font-bold shadow-lg">🤷‍♂️</div>
-            <h2 className="text-[32px] font-bold text-gray-900">{t('login.invalid')}</h2>
+            <div className="mb-3 flex h-20 w-20 items-center justify-center rounded-[20px] border border-divider-regular bg-components-option-card-option-bg p-5 text-[40px] font-bold shadow-lg">🤷‍♂️</div>
+            <h2 className="text-[32px] font-bold text-text-primary">{t('login.invalid')}</h2>
           </div>
           <div className="mx-auto mt-6 w-full">
             <Button variant='primary' className='w-full !text-sm'>
@@ -99,19 +99,19 @@ const ChangePasswordForm = () => {
       {verifyTokenRes && verifyTokenRes.is_valid && !showSuccess && (
         <div className='flex flex-col md:w-[400px]'>
           <div className="mx-auto w-full">
-            <h2 className="text-[32px] font-bold text-gray-900">
+            <h2 className="text-[32px] font-bold text-text-primary">
               {t('login.changePassword')}
             </h2>
-            <p className='mt-1 text-sm text-gray-600'>
+            <p className='mt-1 text-sm text-text-secondary'>
               {t('login.changePasswordTip')}
             </p>
           </div>
 
           <div className="mx-auto mt-6 w-full">
-            <div className="bg-white">
+            <div className="relative">
               {/* Password */}
               <div className='mb-5'>
-                <label htmlFor="password" className="my-2 flex items-center justify-between text-sm font-medium text-gray-900">
+                <label htmlFor="password" className="my-2 flex items-center justify-between text-sm font-medium text-text-primary">
                   {t('common.account.newPassword')}
                 </label>
                 <Input
@@ -126,7 +126,7 @@ const ChangePasswordForm = () => {
               </div>
               {/* Confirm Password */}
               <div className='mb-5'>
-                <label htmlFor="confirmPassword" className="my-2 flex items-center justify-between text-sm font-medium text-gray-900">
+                <label htmlFor="confirmPassword" className="my-2 flex items-center justify-between text-sm font-medium text-text-primary">
                   {t('common.account.confirmPassword')}
                 </label>
                 <Input
@@ -154,10 +154,10 @@ const ChangePasswordForm = () => {
       {verifyTokenRes && verifyTokenRes.is_valid && showSuccess && (
         <div className="flex flex-col md:w-[400px]">
           <div className="mx-auto w-full">
-            <div className="mb-3 flex h-20 w-20 items-center justify-center rounded-[20px] border border-gray-100 p-5 text-[40px] font-bold shadow-lg">
+            <div className="mb-3 flex h-20 w-20 items-center justify-center rounded-[20px] border border-divider-regular bg-components-option-card-option-bg p-5 text-[40px] font-bold shadow-lg">
               <CheckCircleIcon className='h-10 w-10 text-[#039855]' />
             </div>
-            <h2 className="text-[32px] font-bold text-gray-900">
+            <h2 className="text-[32px] font-bold text-text-primary">
               {t('login.passwordChangedTip')}
             </h2>
           </div>
diff --git a/web/app/forgot-password/ForgotPasswordForm.tsx b/web/app/forgot-password/ForgotPasswordForm.tsx
index e9ff7291f..569043842 100644
--- a/web/app/forgot-password/ForgotPasswordForm.tsx
+++ b/web/app/forgot-password/ForgotPasswordForm.tsx
@@ -82,20 +82,20 @@ const ForgotPasswordForm = () => {
       ? <Loading />
       : <>
         <div className="sm:mx-auto sm:w-full sm:max-w-md">
-          <h2 className="text-[32px] font-bold text-gray-900">
+          <h2 className="text-[32px] font-bold text-text-primary">
             {isEmailSent ? t('login.resetLinkSent') : t('login.forgotPassword')}
           </h2>
-          <p className='mt-1 text-sm text-gray-600'>
+          <p className='mt-1 text-sm text-text-secondary'>
             {isEmailSent ? t('login.checkEmailForResetLink') : t('login.forgotPasswordDesc')}
           </p>
         </div>
         <div className="mt-8 grow sm:mx-auto sm:w-full sm:max-w-md">
-          <div className="bg-white ">
+          <div className="relative">
             <form>
               {!isEmailSent && (
                 <div className='mb-5'>
                   <label htmlFor="email"
-                    className="my-2 flex items-center justify-between text-sm font-medium text-gray-900">
+                    className="my-2 flex items-center justify-between text-sm font-medium text-text-primary">
                     {t('login.email')}
                   </label>
                   <div className="mt-1">
diff --git a/web/app/forgot-password/page.tsx b/web/app/forgot-password/page.tsx
index bb46011c0..ccbdcbdf0 100644
--- a/web/app/forgot-password/page.tsx
+++ b/web/app/forgot-password/page.tsx
@@ -13,6 +13,7 @@ const ForgotPassword = () => {
 
   return (
     <div className={classNames(
+      'bg-background-body',
       style.background,
       'flex w-full min-h-screen',
       'p-4 lg:p-8',
@@ -21,13 +22,13 @@ const ForgotPassword = () => {
     )}>
       <div className={
         classNames(
-          'flex w-full flex-col bg-white shadow rounded-2xl shrink-0',
+          'flex w-full flex-col bg-background-section-burn shadow rounded-2xl shrink-0',
           'md:w-[608px] space-between',
         )
       }>
         <Header />
         {token ? <ChangePasswordForm /> : <ForgotPasswordForm />}
-        <div className='px-8 py-6 text-sm font-normal text-gray-500'>
+        <div className='px-8 py-6 text-sm font-normal text-text-tertiary'>
           © {new Date().getFullYear()} LangGenius, Inc. All rights reserved.
         </div>
       </div>
diff --git a/web/app/init/InitPasswordPopup.tsx b/web/app/init/InitPasswordPopup.tsx
index 16c3e2440..db4078fda 100644
--- a/web/app/init/InitPasswordPopup.tsx
+++ b/web/app/init/InitPasswordPopup.tsx
@@ -54,7 +54,7 @@ const InitPasswordPopup = () => {
         {!validated && (
           <div className="mx-12 block min-w-28">
             <div className="mb-4">
-              <label htmlFor="password" className="block text-sm font-medium text-gray-700">
+              <label htmlFor="password" className="block text-sm font-medium text-text-secondary">
                 {t('login.adminInitPassword')}
 
               </label>
@@ -64,7 +64,7 @@ const InitPasswordPopup = () => {
                   type="password"
                   value={password}
                   onChange={e => setPassword(e.target.value)}
-                  className="block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 shadow-sm placeholder:text-gray-400 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
+                  className="block w-full appearance-none rounded-md border border-divider-regular px-3 py-2 shadow-sm placeholder:text-text-quaternary focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
                 />
               </div>
             </div>
diff --git a/web/app/init/page.tsx b/web/app/init/page.tsx
index aea25a41e..5b3e9f414 100644
--- a/web/app/init/page.tsx
+++ b/web/app/init/page.tsx
@@ -1,19 +1,27 @@
 import React from 'react'
 import style from '../signin/page.module.css'
 import InitPasswordPopup from './InitPasswordPopup'
-import classNames from '@/utils/classnames'
+import cn from '@/utils/classnames'
 
 const Install = () => {
   return (
-    <div className={classNames(
+    <div className={cn(
+      'bg-background-body',
       style.background,
-      'flex w-full min-h-screen',
+      'flex min-h-screen w-full',
       'p-4 lg:p-8',
       'gap-x-20',
       'justify-center lg:justify-start',
     )}>
-      <div className="m-auto block w-96">
-        <InitPasswordPopup />
+      <div className={
+        cn(
+          'flex w-full shrink-0 flex-col rounded-2xl bg-background-section-burn shadow',
+          'space-between',
+        )
+      }>
+        <div className="m-auto block w-96">
+          <InitPasswordPopup />
+        </div>
       </div>
     </div>
   )
diff --git a/web/app/install/installForm.tsx b/web/app/install/installForm.tsx
index 56787393f..08c6d69b0 100644
--- a/web/app/install/installForm.tsx
+++ b/web/app/install/installForm.tsx
@@ -97,23 +97,21 @@ const InstallForm = () => {
       ? <Loading />
       : <>
         <div className="sm:mx-auto sm:w-full sm:max-w-md">
-          <h2 className="text-[32px] font-bold text-gray-900">{t('login.setAdminAccount')}</h2>
-          <p className='
-          mt-1 text-sm text-gray-600
-        '>{t('login.setAdminAccountDesc')}</p>
+          <h2 className="text-[32px] font-bold text-text-primary">{t('login.setAdminAccount')}</h2>
+          <p className='mt-1 text-sm text-text-secondary'>{t('login.setAdminAccountDesc')}</p>
         </div>
         <div className="mt-8 grow sm:mx-auto sm:w-full sm:max-w-md">
-          <div className="bg-white ">
+          <div className="relative">
             <form onSubmit={handleSubmit(onSubmit)} onKeyDown={handleKeyDown}>
               <div className='mb-5'>
-                <label htmlFor="email" className="my-2 flex items-center justify-between text-sm font-medium text-gray-900">
+                <label htmlFor="email" className="my-2 flex items-center justify-between text-sm font-medium text-text-primary">
                   {t('login.email')}
                 </label>
-                <div className="mt-1">
+                <div className="mt-1 rounded-md shadow-sm">
                   <input
                     {...register('email')}
                     placeholder={t('login.emailPlaceholder') || ''}
-                    className={'block w-full appearance-none rounded-lg border border-gray-200 px-3 py-2 pl-[14px] caret-primary-600 placeholder:text-gray-400 hover:border-gray-300 hover:shadow-sm focus:border-primary-500 focus:outline-none focus:ring-primary-500 sm:text-sm'}
+                    className={'w-full appearance-none rounded-md border border-transparent bg-components-input-bg-normal py-[7px] pl-2 text-components-input-text-filled caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs'}
                   />
                   {errors.email && <span className='text-sm text-red-400'>{t(`${errors.email?.message}`)}</span>}
                 </div>
@@ -121,21 +119,21 @@ const InstallForm = () => {
               </div>
 
               <div className='mb-5'>
-                <label htmlFor="name" className="my-2 flex items-center justify-between text-sm font-medium text-gray-900">
+                <label htmlFor="name" className="my-2 flex items-center justify-between text-sm font-medium text-text-primary">
                   {t('login.name')}
                 </label>
                 <div className="relative mt-1 rounded-md shadow-sm">
                   <input
                     {...register('name')}
                     placeholder={t('login.namePlaceholder') || ''}
-                    className={'block w-full appearance-none rounded-lg border border-gray-200 px-3 py-2 pl-[14px] pr-10 caret-primary-600 placeholder:text-gray-400 hover:border-gray-300 hover:shadow-sm focus:border-primary-500 focus:outline-none focus:ring-primary-500 sm:text-sm'}
+                    className={'w-full appearance-none rounded-md border border-transparent bg-components-input-bg-normal py-[7px] pl-2 text-components-input-text-filled caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs'}
                   />
                 </div>
                 {errors.name && <span className='text-sm text-red-400'>{t(`${errors.name.message}`)}</span>}
               </div>
 
               <div className='mb-5'>
-                <label htmlFor="password" className="my-2 flex items-center justify-between text-sm font-medium text-gray-900">
+                <label htmlFor="password" className="my-2 flex items-center justify-between text-sm font-medium text-text-primary">
                   {t('login.password')}
                 </label>
                 <div className="relative mt-1 rounded-md shadow-sm">
@@ -143,21 +141,21 @@ const InstallForm = () => {
                     {...register('password')}
                     type={showPassword ? 'text' : 'password'}
                     placeholder={t('login.passwordPlaceholder') || ''}
-                    className={'block w-full appearance-none rounded-lg border border-gray-200 px-3 py-2 pl-[14px] pr-10 caret-primary-600 placeholder:text-gray-400 hover:border-gray-300 hover:shadow-sm focus:border-primary-500 focus:outline-none focus:ring-primary-500 sm:text-sm'}
+                    className={'w-full appearance-none rounded-md border border-transparent bg-components-input-bg-normal py-[7px] pl-2 text-components-input-text-filled caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs'}
                   />
 
                   <div className="absolute inset-y-0 right-0 flex items-center pr-3">
                     <button
                       type="button"
                       onClick={() => setShowPassword(!showPassword)}
-                      className="text-gray-400 hover:text-gray-500 focus:text-gray-500 focus:outline-none"
+                      className="text-text-quaternary hover:text-text-tertiary focus:text-text-tertiary focus:outline-none"
                     >
                       {showPassword ? '👀' : '😝'}
                     </button>
                   </div>
                 </div>
 
-                <div className={classNames('mt-1 text-xs text-gray-500', {
+                <div className={classNames('mt-1 text-xs text-text-tertiary', {
                   'text-red-400 !text-sm': errors.password,
                 })}>{t('login.error.passwordInvalid')}</div>
               </div>
@@ -168,11 +166,11 @@ const InstallForm = () => {
                 </Button>
               </div>
             </form>
-            <div className="mt-2 block w-full text-xs text-gray-600">
+            <div className="mt-2 block w-full text-xs text-text-tertiary">
               {t('login.license.tip')}
               &nbsp;
               <Link
-                className='text-primary-600'
+                className='text-text-accent'
                 target='_blank' rel='noopener noreferrer'
                 href={'https://docs.dify.ai/user-agreement/open-source'}
               >{t('login.license.link')}</Link>
diff --git a/web/app/install/page.tsx b/web/app/install/page.tsx
index 395fae34e..f41c63ff3 100644
--- a/web/app/install/page.tsx
+++ b/web/app/install/page.tsx
@@ -7,6 +7,7 @@ import classNames from '@/utils/classnames'
 const Install = () => {
   return (
     <div className={classNames(
+      'bg-background-body',
       style.background,
       'flex w-full min-h-screen',
       'p-4 lg:p-8',
@@ -15,13 +16,13 @@ const Install = () => {
     )}>
       <div className={
         classNames(
-          'flex w-full flex-col bg-white shadow rounded-2xl shrink-0',
+          'flex w-full flex-col bg-background-section-burn shadow rounded-2xl shrink-0',
           'md:w-[608px] space-between',
         )
       }>
         <Header />
         <InstallForm />
-        <div className='px-8 py-6 text-sm font-normal text-gray-500'>
+        <div className='px-8 py-6 text-sm font-normal text-text-tertiary'>
           © {new Date().getFullYear()} LangGenius, Inc. All rights reserved.
         </div>
       </div>
diff --git a/web/app/reset-password/layout.tsx b/web/app/reset-password/layout.tsx
index 712a7cfd7..58ac3a642 100644
--- a/web/app/reset-password/layout.tsx
+++ b/web/app/reset-password/layout.tsx
@@ -6,6 +6,7 @@ import cn from '@/utils/classnames'
 export default async function SignInLayout({ children }: any) {
   return <>
     <div className={cn(
+      'bg-background-body',
       style.background,
       'flex min-h-screen w-full',
       'sm:p-4 lg:p-8',
@@ -14,7 +15,7 @@ export default async function SignInLayout({ children }: any) {
     )}>
       <div className={
         cn(
-          'flex w-full shrink-0 flex-col rounded-2xl bg-white shadow',
+          'flex w-full shrink-0 flex-col rounded-2xl bg-background-section-burn shadow',
           'space-between',
         )
       }>
diff --git a/web/app/signin/layout.tsx b/web/app/signin/layout.tsx
index 4a197f8f3..fbdd4c66e 100644
--- a/web/app/signin/layout.tsx
+++ b/web/app/signin/layout.tsx
@@ -6,6 +6,7 @@ import cn from '@/utils/classnames'
 export default async function SignInLayout({ children }: any) {
   return <>
     <div className={cn(
+      'bg-background-body',
       style.background,
       'flex min-h-screen w-full',
       'sm:p-4 lg:p-8',
@@ -14,7 +15,7 @@ export default async function SignInLayout({ children }: any) {
     )}>
       <div className={
         cn(
-          'flex w-full shrink-0 flex-col rounded-2xl bg-white shadow',
+          'flex w-full shrink-0 flex-col rounded-2xl bg-background-section-burn shadow',
           'space-between',
         )
       }>
diff --git a/web/app/signin/normalForm.tsx b/web/app/signin/normalForm.tsx
index 0df76359a..c76e088e9 100644
--- a/web/app/signin/normalForm.tsx
+++ b/web/app/signin/normalForm.tsx
@@ -85,7 +85,7 @@ const NormalForm = () => {
   }
   if (systemFeatures.license?.status === LicenseStatus.LOST) {
     return <div className='mx-auto mt-8 w-full'>
-      <div className='bg-white'>
+      <div className='relative'>
         <div className="rounded-lg bg-gradient-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4">
           <div className='shadows-shadow-lg relative mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow'>
             <RiContractLine className='h-5 w-5' />
@@ -99,7 +99,7 @@ const NormalForm = () => {
   }
   if (systemFeatures.license?.status === LicenseStatus.EXPIRED) {
     return <div className='mx-auto mt-8 w-full'>
-      <div className='bg-white'>
+      <div className='relative'>
         <div className="rounded-lg bg-gradient-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4">
           <div className='shadows-shadow-lg relative mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow'>
             <RiContractLine className='h-5 w-5' />
@@ -113,7 +113,7 @@ const NormalForm = () => {
   }
   if (systemFeatures.license?.status === LicenseStatus.INACTIVE) {
     return <div className='mx-auto mt-8 w-full'>
-      <div className='bg-white'>
+      <div className='relative'>
         <div className="rounded-lg bg-gradient-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4">
           <div className='shadows-shadow-lg relative mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow'>
             <RiContractLine className='h-5 w-5' />
@@ -138,7 +138,7 @@ const NormalForm = () => {
             <h2 className="title-4xl-semi-bold text-text-primary">{t('login.pageTitle')}</h2>
             <p className='body-md-regular mt-2 text-text-tertiary'>{t('login.welcome')}</p>
           </div>}
-        <div className="bg-white">
+        <div className="relative">
           <div className="mt-6 flex flex-col gap-3">
             {systemFeatures.enable_social_oauth_login && <SocialAuth />}
             {systemFeatures.sso_enforced_for_signin && <div className='w-full'>
@@ -151,7 +151,7 @@ const NormalForm = () => {
               <div className='h-px w-full bg-gradient-to-r from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent'></div>
             </div>
             <div className="relative flex justify-center">
-              <span className="system-xs-medium-uppercase bg-white px-2 text-text-tertiary">{t('login.or')}</span>
+              <span className="system-xs-medium-uppercase px-2 text-text-tertiary">{t('login.or')}</span>
             </div>
           </div>}
           {
diff --git a/web/app/signin/oneMoreStep.tsx b/web/app/signin/oneMoreStep.tsx
index 8c2d19faf..7607598bf 100644
--- a/web/app/signin/oneMoreStep.tsx
+++ b/web/app/signin/oneMoreStep.tsx
@@ -81,7 +81,7 @@ const OneMoreStep = () => {
       </div>
 
       <div className="mx-auto mt-6 w-full">
-        <div className="bg-white">
+        <div className="relative">
           <div className="mb-5">
             <label className="system-md-semibold my-2 flex items-center justify-between text-text-secondary">
               {t('login.invitationCode')}