Feat: account page dark mode (#11977)

web/app/account/account-page/index.tsx

@@ -18,10 +18,10 @@ import { IS_CE_EDITION } from '@/config'
 import Input from '@/app/components/base/input'
 
 const titleClassName = `
-  text-sm font-medium text-gray-900
+  system-sm-semibold text-text-secondary
 `
 const descriptionClassName = `
-  mt-1 text-xs font-normal text-gray-500
+  mt-1 body-xs-regular text-text-tertiary
 `
 
 const validPassword = /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/
@@ -122,15 +122,15 @@ export default function AccountPage() {
         <div className='mr-3'>
           <AppIcon size='tiny' />
         </div>
-        <div className='mt-[3px] text-xs font-medium text-gray-700 leading-[18px]'>{item.name}</div>
+        <div className='mt-[3px] system-sm-medium text-text-secondary'>{item.name}</div>
       </div>
     )
   }
 
   return (
     <>
       <div className='pt-2 pb-3'>
-        <h4 className='title-2xl-semi-bold text-primary'>{t('common.account.myAccount')}</h4>
+        <h4 className='title-2xl-semi-bold text-text-primary'>{t('common.account.myAccount')}</h4>
       </div>
       <div className='mb-8 p-6 rounded-xl flex items-center bg-gradient-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1'>
         <Avatar name={userProfile.name} size={64} />
@@ -142,18 +142,18 @@ export default function AccountPage() {
       <div className='mb-8'>
         <div className={titleClassName}>{t('common.account.name')}</div>
         <div className='flex items-center justify-between gap-2 w-full mt-2'>
-          <div className='flex-1 bg-gray-100 rounded-md p-2 system-sm-regular text-components-input-text-filled '>
+          <div className='flex-1 bg-components-input-bg-normal rounded-lg p-2 system-sm-regular text-components-input-text-filled '>
             <span className='pl-1'>{userProfile.name}</span>
           </div>
-          <div className=' bg-gray-100 rounded-md py-2 px-3 cursor-pointer system-sm-medium text-components-input-text-filled' onClick={handleEditName}>
+          <div className='bg-components-button-tertiary-bg rounded-lg py-2 px-3 cursor-pointer system-sm-medium text-components-button-tertiary-text' onClick={handleEditName}>
             {t('common.operation.edit')}
           </div>
         </div>
       </div>
       <div className='mb-8'>
         <div className={titleClassName}>{t('common.account.email')}</div>
         <div className='flex items-center justify-between gap-2 w-full mt-2'>
-          <div className='flex-1 bg-gray-100 rounded-md p-2 system-sm-regular text-components-input-text-filled '>
+          <div className='flex-1 bg-components-input-bg-normal rounded-lg p-2 system-sm-regular text-components-input-text-filled '>
             <span className='pl-1'>{userProfile.email}</span>
           </div>
         </div>
@@ -162,14 +162,14 @@ export default function AccountPage() {
         systemFeatures.enable_email_password_login && (
           <div className='mb-8 flex justify-between gap-2'>
             <div>
-              <div className='mb-1 text-sm font-medium text-gray-900'>{t('common.account.password')}</div>
-              <div className='mb-2 text-xs text-gray-500'>{t('common.account.passwordTip')}</div>
+              <div className='mb-1 system-sm-semibold text-text-secondary'>{t('common.account.password')}</div>
+              <div className='mb-2 body-xs-regular text-text-tertiary'>{t('common.account.passwordTip')}</div>
             </div>
             <Button onClick={() => setEditPasswordModalVisible(true)}>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</Button>
           </div>
         )
       }
-      <div className='mb-6 border-[0.5px] border-gray-100' />
+      <div className='mb-6 border-[1px] border-divider-subtle' />
       <div className='mb-8'>
         <div className={titleClassName}>{t('common.account.langGeniusAccount')}</div>
         <div className={descriptionClassName}>{t('common.account.langGeniusAccountTip')}</div>
@@ -181,7 +181,7 @@ export default function AccountPage() {
             wrapperClassName='mt-2'
           />
         )}
-        {!IS_CE_EDITION && <Button className='mt-2 text-[#D92D20]' onClick={() => setShowDeleteAccountModal(true)}>{t('common.account.delete')}</Button>}
+        {!IS_CE_EDITION && <Button className='mt-2 text-components-button-destructive-secondary-text' onClick={() => setShowDeleteAccountModal(true)}>{t('common.account.delete')}</Button>}
       </div>
       {
         editNameModalVisible && (
@@ -190,7 +190,7 @@ export default function AccountPage() {
             onClose={() => setEditNameModalVisible(false)}
             className={s.modal}
           >
-            <div className='mb-6 text-lg font-medium text-gray-900'>{t('common.account.editName')}</div>
+            <div className='mb-6 title-2xl-semi-bold text-text-primary'>{t('common.account.editName')}</div>
             <div className={titleClassName}>{t('common.account.name')}</div>
             <Input className='mt-2'
               value={editName}
@@ -219,7 +219,7 @@ export default function AccountPage() {
             }}
             className={s.modal}
           >
-            <div className='mb-6 text-lg font-medium text-gray-900'>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</div>
+            <div className='mb-6 title-2xl-semi-bold text-text-primary'>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</div>
             {userProfile.is_password_set && (
               <>
                 <div className={titleClassName}>{t('common.account.currentPassword')}</div>
@@ -242,7 +242,7 @@ export default function AccountPage() {
                 </div>
               </>
             )}
-            <div className='mt-8 text-sm font-medium text-gray-900'>
+            <div className='mt-8 system-sm-semibold text-text-secondary'>
               {userProfile.is_password_set ? t('common.account.newPassword') : t('common.account.password')}
             </div>
             <div className='relative mt-2'>
@@ -261,7 +261,7 @@ export default function AccountPage() {
                 </Button>
               </div>
             </div>
-            <div className='mt-8 text-sm font-medium text-gray-900'>{t('common.account.confirmPassword')}</div>
+            <div className='mt-8 system-sm-semibold text-text-secondary'>{t('common.account.confirmPassword')}</div>
             <div className='relative mt-2'>
               <Input
                 type={showConfirmPassword ? 'text' : 'password'}
@@ -305,13 +305,13 @@ export default function AccountPage() {
             title={t('common.account.delete')}
             content={
               <>
-                <div className='my-1 text-[#D92D20] text-sm leading-5'>
+                <div className='my-1 text-text-destructive body-md-medium'>
                   {t('common.account.deleteTip')}
                 </div>
                 <div className='mt-3 text-sm leading-5'>
                   <span>{t('common.account.deleteConfirmTip')}</span>
                   <a
-                    className='text-primary-600 cursor'
+                    className='text-text-accent cursor'
                     href={`mailto:support@dify.ai?subject=Delete Account Request&body=Delete Account: ${userProfile.email}`}
                     target='_blank'
                     rel='noreferrer noopener'
@@ -323,7 +323,7 @@ export default function AccountPage() {
                     support@dify.ai
                   </a>
                 </div>
-                <div className='my-2 px-3 py-2 rounded-lg bg-gray-100 text-sm font-medium leading-5 text-gray-800'>{`${t('common.account.delete')}: ${userProfile.email}`}</div>
+                <div className='my-2 px-3 py-2 rounded-lg bg-components-input-bg-active border border-components-input-border-active system-sm-regular text-components-input-text-filled'>{`${t('common.account.delete')}: ${userProfile.email}`}</div>
               </>
             }
             confirmText={t('common.operation.ok') as string}

web/app/account/avatar.tsx

@@ -40,9 +40,9 @@ export default function AppSelector() {
                 className={`
                     inline-flex items-center
                     rounded-[20px] p-1x text-sm
-                  text-gray-700 hover:bg-gray-200
+                    text-text-primary
                     mobile:px-1
-                    ${open && 'bg-gray-200'}
+                    ${open && 'bg-components-panel-bg-blur'}
                   `}
               >
                 <Avatar name={userProfile.name} size={32} />
@@ -60,7 +60,7 @@ export default function AppSelector() {
               <Menu.Items
                 className="
                     absolute -right-2 -top-1 w-60 max-w-80
-                    divide-y divide-gray-100 origin-top-right rounded-lg bg-white
+                    divide-y divide-divider-subtle origin-top-right rounded-lg bg-components-panel-bg-blur
                     shadow-lg
                   "
               >
@@ -78,10 +78,10 @@ export default function AppSelector() {
                 <Menu.Item>
                   <div className='p-1' onClick={() => handleLogout()}>
                     <div
-                      className='flex items-center justify-start h-9 px-3 rounded-lg cursor-pointer group hover:bg-gray-50'
+                      className='flex items-center justify-start h-9 px-3 rounded-lg cursor-pointer group hover:bg-state-base-hover'
                     >
-                      <LogOut01 className='w-4 h-4 text-gray-500 flex mr-1' />
-                      <div className='font-normal text-[14px] text-gray-700'>{t('common.userProfile.logout')}</div>
+                      <LogOut01 className='w-4 h-4 text-text-tertiary flex mr-1' />
+                      <div className='font-normal text-[14px] text-text-secondary'>{t('common.userProfile.logout')}</div>
                     </div>
                   </div>
                 </Menu.Item>

web/app/account/layout.tsx

@@ -21,7 +21,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
                 <HeaderWrapper>
                   <Header />
                 </HeaderWrapper>
-                <div className='relative flex flex-col overflow-y-auto bg-white shrink-0 h-0 grow'>
+                <div className='relative flex flex-col overflow-y-auto bg-components-panel-bg shrink-0 h-0 grow'>
                   {children}
                 </div>
               </ModalContextProvider>

web/app/components/base/modal/index.tsx

@@ -1,6 +1,6 @@
 import { Dialog, Transition } from '@headlessui/react'
 import { Fragment } from 'react'
-import { XMarkIcon } from '@heroicons/react/24/outline'
+import { RiCloseLine } from '@remixicon/react'
 import classNames from '@/utils/classnames'
 // https://headlessui.com/react/dialog
 
@@ -39,7 +39,7 @@ export default function Modal({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-black bg-opacity-25" />
+          <div className="fixed inset-0 bg-background-overlay-fullscreen" />
         </Transition.Child>
 
         <div
@@ -66,16 +66,16 @@ export default function Modal({
               )}>
                 {title && <Dialog.Title
                   as="h3"
-                  className="text-lg font-medium leading-6 text-text-primary"
+                  className="title-2xl-semi-bold text-text-primary"
                 >
                   {title}
                 </Dialog.Title>}
-                {description && <Dialog.Description className='text-text-tertiary text-xs font-normal mt-2'>
+                {description && <Dialog.Description className='text-text-secondary body-md-regular mt-2'>
                   {description}
                 </Dialog.Description>}
                 {closable
-                  && <div className='absolute z-10 top-6 right-6 w-5 h-5 rounded-2xl flex items-center justify-center hover:cursor-pointer hover:bg-components-panel-on-panel-item-bg-hover'>
-                    <XMarkIcon className='w-4 h-4 text-text-tertiary' onClick={
+                  && <div className='absolute z-10 top-6 right-6 w-5 h-5 rounded-2xl flex items-center justify-center hover:cursor-pointer hover:bg-state-base-hover'>
+                    <RiCloseLine className='w-4 h-4 text-text-tertiary' onClick={
                       (e) => {
                         e.stopPropagation()
                         onClose()

web/app/components/base/select/index.tsx

@@ -2,7 +2,8 @@
 import type { FC } from 'react'
 import React, { Fragment, useEffect, useState } from 'react'
 import { Combobox, Listbox, Transition } from '@headlessui/react'
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon, XMarkIcon } from '@heroicons/react/20/solid'
+import { ChevronDownIcon, ChevronUpIcon, XMarkIcon } from '@heroicons/react/20/solid'
+import { RiCheckLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import classNames from '@/utils/classnames'
 import {
@@ -152,7 +153,7 @@ const Select: FC<ISelectProps> = ({
                                 'absolute inset-y-0 right-0 flex items-center pr-4 text-gray-700',
                               )}
                             >
-                              <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                              <RiCheckLine className="h-4 w-4" aria-hidden="true" />
                             </span>
                           )}
                         </>
@@ -210,7 +211,7 @@ const SimpleSelect: FC<ISelectProps> = ({
       <div className={classNames('group/simple-select relative h-9', wrapperClassName)}>
         {renderTrigger && <Listbox.Button className='w-full'>{renderTrigger(selectedItem)}</Listbox.Button>}
         {!renderTrigger && (
-          <Listbox.Button className={classNames(`flex items-center w-full h-full rounded-lg border-0 bg-gray-100 pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover/simple-select:bg-state-base-hover-alt ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`, className)}>
+          <Listbox.Button className={classNames(`flex items-center w-full h-full rounded-lg border-0 bg-components-input-bg-normal pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-state-base-hover-alt group-hover/simple-select:bg-state-base-hover-alt ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`, className)}>
             <span className={classNames('block truncate text-left system-sm-regular text-components-input-text-filled', !selectedItem?.name && 'text-components-input-text-placeholder')}>{selectedItem?.name ?? localPlaceholder}</span>
             <span className="absolute inset-y-0 right-0 flex items-center pr-2">
               {(selectedItem && !notClearable)
@@ -243,13 +244,13 @@ const SimpleSelect: FC<ISelectProps> = ({
             leaveTo="opacity-0"
           >
 
-            <Listbox.Options className={classNames('absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg border-gray-200 border-[0.5px] focus:outline-none sm:text-sm', optionWrapClassName)}>
+            <Listbox.Options className={classNames('absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-components-panel-bg-blur py-1 text-base shadow-lg border-components-panel-border border-[0.5px] focus:outline-none sm:text-sm', optionWrapClassName)}>
               {items.map((item: Item) => (
                 <Listbox.Option
                   key={item.value}
                   className={({ active }) =>
                     classNames(
-                      `relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700 ${active ? 'bg-gray-100' : ''}`,
+                      'relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-state-base-hover text-text-secondary',
                       optionClassName,
                     )
                   }
@@ -265,10 +266,10 @@ const SimpleSelect: FC<ISelectProps> = ({
                           {selected && !hideChecked && (
                             <span
                               className={classNames(
-                                'absolute inset-y-0 right-0 flex items-center pr-4 text-gray-700',
+                                'absolute inset-y-0 right-0 flex items-center pr-4 text-text-accent',
                               )}
                             >
-                              <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                              <RiCheckLine className="h-4 w-4" aria-hidden="true" />
                             </span>
                           )}
                         </>)}
@@ -369,7 +370,7 @@ const PortalSelect: FC<PortalSelectProps> = ({
                 {item.name}
               </span>
               {!hideChecked && item.value === value && (
-                <CheckIcon className='shrink-0 h-4 w-4 text-text-accent' />
+                <RiCheckLine className='shrink-0 h-4 w-4 text-text-accent' />
               )}
             </div>
           ))}