admin/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Feat: dark mode for independent pages (#17045)

Browse Source
This commit is contained in:
KVOJJJin
2025-03-31 10:28:19 +08:00
committed by GitHub
parent 46d235bca0
commit e008faf729
16 changed files with 66 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
web/app/install/installForm.tsx
View File

@@ -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>