AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-14 15:15:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: some display error in dark mode (#20469)

Browse Source
This commit is contained in:
非法操作 2025-05-30 11:25:46 +08:00 committed by GitHub
parent db488bef51
commit 156bb8238d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 32 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/components/base/chat/chat/question.tsx
View File

@ -117,7 +117,7 @@ const Question: FC<QuestionProps> = ({
</div> </div>
<div <div
ref={contentRef} ref={contentRef}
className='w-full rounded-2xl bg-[#D1E9FF]/50 px-4 py-3 text-sm text-gray-900' className='w-full rounded-2xl bg-background-gradient-bg-fill-chat-bubble-bg-3 px-4 py-3 text-sm text-text-primary'
style={theme?.chatBubbleColorStyle ? CssTransform(theme.chatBubbleColorStyle) : {}} style={theme?.chatBubbleColorStyle ? CssTransform(theme.chatBubbleColorStyle) : {}}
> >
{ {

4
web/app/components/base/chat/embedded-chatbot/theme/theme-context.ts
View File

@ -12,8 +12,7 @@ export class Theme {
public colorPathOnHeader = 'text-text-primary-on-surface' public colorPathOnHeader = 'text-text-primary-on-surface'
public backgroundButtonDefaultColorStyle = 'backgroundColor: #1C64F2' public backgroundButtonDefaultColorStyle = 'backgroundColor: #1C64F2'
public roundedBackgroundColorStyle = 'backgroundColor: rgb(245 248 255)' public roundedBackgroundColorStyle = 'backgroundColor: rgb(245 248 255)'
public chatBubbleColorStyle = 'backgroundColor: rgb(225 239 254)' public chatBubbleColorStyle = ''
public chatBubbleColor = 'rgb(225 239 254)'
constructor(chatColorTheme: string | null = null, chatColorThemeInverted = false) { constructor(chatColorTheme: string | null = null, chatColorThemeInverted = false) {
this.chatColorTheme = chatColorTheme this.chatColorTheme = chatColorTheme
@ -29,7 +28,6 @@ export class Theme {
this.backgroundButtonDefaultColorStyle = `backgroundColor: ${this.primaryColor}; color: ${this.colorFontOnHeaderStyle};` this.backgroundButtonDefaultColorStyle = `backgroundColor: ${this.primaryColor}; color: ${this.colorFontOnHeaderStyle};`
this.roundedBackgroundColorStyle = `backgroundColor: ${hexToRGBA(this.primaryColor, 0.05)}` this.roundedBackgroundColorStyle = `backgroundColor: ${hexToRGBA(this.primaryColor, 0.05)}`
this.chatBubbleColorStyle = `backgroundColor: ${hexToRGBA(this.primaryColor, 0.15)}` this.chatBubbleColorStyle = `backgroundColor: ${hexToRGBA(this.primaryColor, 0.15)}`
this.chatBubbleColor = `${hexToRGBA(this.primaryColor, 0.15)}`
} }
} }

6
web/app/components/datasets/create/step-two/index.tsx
View File

@ -865,10 +865,10 @@ const StepTwo = ({
<> <>
<CustomDialog show={isQAConfirmDialogOpen} onClose={() => setIsQAConfirmDialogOpen(false)} className='w-[432px]'> <CustomDialog show={isQAConfirmDialogOpen} onClose={() => setIsQAConfirmDialogOpen(false)} className='w-[432px]'>
<header className='mb-4 pt-6'> <header className='mb-4 pt-6'>
<h2 className='text-lg font-semibold'> <h2 className='text-lg font-semibold text-text-primary'>
{t('datasetCreation.stepTwo.qaSwitchHighQualityTipTitle')} {t('datasetCreation.stepTwo.qaSwitchHighQualityTipTitle')}
</h2> </h2>
<p className='mt-2 text-sm font-normal'> <p className='mt-2 text-sm font-normal text-text-secondary'>
{t('datasetCreation.stepTwo.qaSwitchHighQualityTipContent')} {t('datasetCreation.stepTwo.qaSwitchHighQualityTipContent')}
</p> </p>
</header> </header>
@ -928,7 +928,7 @@ const StepTwo = ({
</div> </div>
)} )}
{hasSetIndexType && indexType === IndexingType.ECONOMICAL && ( {hasSetIndexType && indexType === IndexingType.ECONOMICAL && (
<div className='system-xs-medium mt-2'> <div className='system-xs-medium mt-2 text-text-tertiary'>
{t('datasetCreation.stepTwo.indexSettingTip')} {t('datasetCreation.stepTwo.indexSettingTip')}
<Link className='text-text-accent' href={`/datasets/${datasetId}/settings`}>{t('datasetCreation.stepTwo.datasetSettingLink')}</Link> <Link className='text-text-accent' href={`/datasets/${datasetId}/settings`}>{t('datasetCreation.stepTwo.datasetSettingLink')}</Link>
</div> </div>

26
web/app/components/datasets/documents/detail/batch-modal/csv-downloader.tsx
View File

@ -50,20 +50,20 @@ const CSVDownload: FC<{ docForm: ChunkingMode }> = ({ docForm }) => {
return ( return (
<div className='mt-6'> <div className='mt-6'>
<div className='text-sm font-medium text-gray-900'>{t('share.generation.csvStructureTitle')}</div> <div className='text-sm font-medium text-text-primary'>{t('share.generation.csvStructureTitle')}</div>
<div className='mt-2 max-h-[500px] overflow-auto'> <div className='mt-2 max-h-[500px] overflow-auto'>
{docForm === ChunkingMode.qa && ( {docForm === ChunkingMode.qa && (
<table className='w-full table-fixed border-separate border-spacing-0 rounded-lg border border-gray-200 text-xs'> <table className='w-full table-fixed border-separate border-spacing-0 rounded-lg border border-divider-subtle text-xs'>
<thead className='text-gray-500'> <thead className='text-text-secondary'>
<tr> <tr>
<td className='h-9 border-b border-gray-200 pl-3 pr-2'>{t('datasetDocuments.list.batchModal.question')}</td> <td className='h-9 border-b border-divider-subtle pl-3 pr-2'>{t('datasetDocuments.list.batchModal.question')}</td>
<td className='h-9 border-b border-gray-200 pl-3 pr-2'>{t('datasetDocuments.list.batchModal.answer')}</td> <td className='h-9 border-b border-divider-subtle pl-3 pr-2'>{t('datasetDocuments.list.batchModal.answer')}</td>
</tr> </tr>
</thead> </thead>
<tbody className='text-gray-700'> <tbody className='text-text-tertiary'>
<tr> <tr>
<td className='h-9 border-b border-gray-100 pl-3 pr-2 text-[13px]'>{t('datasetDocuments.list.batchModal.question')} 1</td> <td className='h-9 border-b border-divider-subtle pl-3 pr-2 text-[13px]'>{t('datasetDocuments.list.batchModal.question')} 1</td>
<td className='h-9 border-b border-gray-100 pl-3 pr-2 text-[13px]'>{t('datasetDocuments.list.batchModal.answer')} 1</td> <td className='h-9 border-b border-divider-subtle pl-3 pr-2 text-[13px]'>{t('datasetDocuments.list.batchModal.answer')} 1</td>
</tr> </tr>
<tr> <tr>
<td className='h-9 pl-3 pr-2 text-[13px]'>{t('datasetDocuments.list.batchModal.question')} 2</td> <td className='h-9 pl-3 pr-2 text-[13px]'>{t('datasetDocuments.list.batchModal.question')} 2</td>
@ -73,15 +73,15 @@ const CSVDownload: FC<{ docForm: ChunkingMode }> = ({ docForm }) => {
</table> </table>
)} )}
{docForm === ChunkingMode.text && ( {docForm === ChunkingMode.text && (
<table className='w-full table-fixed border-separate border-spacing-0 rounded-lg border border-gray-200 text-xs'> <table className='w-full table-fixed border-separate border-spacing-0 rounded-lg border border-divider-subtle text-xs'>
<thead className='text-gray-500'> <thead className='text-text-secondary'>
<tr> <tr>
<td className='h-9 border-b border-gray-200 pl-3 pr-2'>{t('datasetDocuments.list.batchModal.contentTitle')}</td> <td className='h-9 border-b border-divider-subtle pl-3 pr-2'>{t('datasetDocuments.list.batchModal.contentTitle')}</td>
</tr> </tr>
</thead> </thead>
<tbody className='text-gray-700'> <tbody className='text-text-tertiary'>
<tr> <tr>
<td className='h-9 border-b border-gray-100 pl-3 pr-2 text-[13px]'>{t('datasetDocuments.list.batchModal.content')} 1</td> <td className='h-9 border-b border-divider-subtle pl-3 pr-2 text-[13px]'>{t('datasetDocuments.list.batchModal.content')} 1</td>
</tr> </tr>
<tr> <tr>
<td className='h-9 pl-3 pr-2 text-[13px]'>{t('datasetDocuments.list.batchModal.content')} 2</td> <td className='h-9 pl-3 pr-2 text-[13px]'>{t('datasetDocuments.list.batchModal.content')} 2</td>

16
web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
View File

@ -93,29 +93,29 @@ const CSVUploader: FC<Props> = ({
/> />
<div ref={dropRef}> <div ref={dropRef}>
{!file && ( {!file && (
<div className={cn('flex h-20 items-center rounded-xl border border-dashed border-gray-200 bg-gray-50 text-sm font-normal', dragging && 'border border-[#B2CCFF] bg-[#F5F8FF]')}> <div className={cn('flex h-20 items-center rounded-xl border border-dashed border-components-panel-border bg-components-panel-bg-blur text-sm font-normal', dragging && 'border border-divider-subtle bg-components-panel-on-panel-item-bg-hover')}>
<div className='flex w-full items-center justify-center space-x-2'> <div className='flex w-full items-center justify-center space-x-2'>
<CSVIcon className="shrink-0" /> <CSVIcon className="shrink-0" />
<div className='text-gray-500'> <div className='text-text-secondary'>
{t('datasetDocuments.list.batchModal.csvUploadTitle')} {t('datasetDocuments.list.batchModal.csvUploadTitle')}
<span className='cursor-pointer text-primary-400' onClick={selectHandle}>{t('datasetDocuments.list.batchModal.browse')}</span> <span className='cursor-pointer text-text-accent' onClick={selectHandle}>{t('datasetDocuments.list.batchModal.browse')}</span>
</div> </div>
</div> </div>
{dragging && <div ref={dragRef} className='absolute left-0 top-0 h-full w-full' />} {dragging && <div ref={dragRef} className='absolute left-0 top-0 h-full w-full' />}
</div> </div>
)} )}
{file && ( {file && (
<div className={cn('group flex h-20 items-center rounded-xl border border-gray-200 bg-gray-50 px-6 text-sm font-normal', 'hover:border-[#B2CCFF] hover:bg-[#F5F8FF]')}> <div className={cn('group flex h-20 items-center rounded-xl border border-components-panel-border bg-components-panel-bg-blur px-6 text-sm font-normal', 'hover:border-divider-subtle hover:bg-components-panel-on-panel-item-bg-hover')}>
<CSVIcon className="shrink-0" /> <CSVIcon className="shrink-0" />
<div className='ml-2 flex w-0 grow'> <div className='ml-2 flex w-0 grow'>
<span className='max-w-[calc(100%_-_30px)] overflow-hidden text-ellipsis whitespace-nowrap text-gray-800'>{file.name.replace(/.csv$/, '')}</span> <span className='max-w-[calc(100%_-_30px)] overflow-hidden text-ellipsis whitespace-nowrap text-text-primary'>{file.name.replace(/.csv$/, '')}</span>
<span className='shrink-0 text-gray-500'>.csv</span> <span className='shrink-0 text-text-secondary'>.csv</span>
</div> </div>
<div className='hidden items-center group-hover:flex'> <div className='hidden items-center group-hover:flex'>
<Button onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.change')}</Button> <Button onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.change')}</Button>
<div className='mx-2 h-4 w-px bg-gray-200' /> <div className='mx-2 h-4 w-px bg-text-secondary' />
<div className='cursor-pointer p-2' onClick={removeFile}> <div className='cursor-pointer p-2' onClick={removeFile}>
<RiDeleteBinLine className='h-4 w-4 text-gray-500' /> <RiDeleteBinLine className='h-4 w-4 text-text-secondary' />
</div> </div>
</div> </div>
</div> </div>

4
web/app/components/datasets/documents/detail/batch-modal/index.tsx
View File

@ -41,9 +41,9 @@ const BatchModal: FC<IBatchModalProps> = ({
return ( return (
<Modal isShow={isShow} onClose={noop} className='!max-w-[520px] !rounded-xl px-8 py-6'> <Modal isShow={isShow} onClose={noop} className='!max-w-[520px] !rounded-xl px-8 py-6'>
<div className='relative pb-1 text-xl font-medium leading-[30px] text-gray-900'>{t('datasetDocuments.list.batchModal.title')}</div> <div className='relative pb-1 text-xl font-medium leading-[30px] text-text-primary'>{t('datasetDocuments.list.batchModal.title')}</div>
<div className='absolute right-4 top-4 cursor-pointer p-2' onClick={onCancel}> <div className='absolute right-4 top-4 cursor-pointer p-2' onClick={onCancel}>
<RiCloseLine className='h-4 w-4 text-gray-500' /> <RiCloseLine className='h-4 w-4 text-text-secondary' />
</div> </div>
<CSVUploader <CSVUploader
file={currentCSV} file={currentCSV}

2
web/app/components/datasets/settings/form/index.tsx
View File

@ -232,7 +232,7 @@ const Form = () => {
<div className='p-1'> <div className='p-1'>
<AlertTriangle className='size-4 text-text-warning-secondary' /> <AlertTriangle className='size-4 text-text-warning-secondary' />
</div> </div>
<span className='system-xs-medium'>{t('datasetSettings.form.upgradeHighQualityTip')}</span> <span className='system-xs-medium text-text-warning-secondary'>{t('datasetSettings.form.upgradeHighQualityTip')}</span>
</div>} </div>}
</div> </div>
</div> </div>

1
web/themes/dark.css
View File

@ -386,6 +386,7 @@ html[data-theme="dark"] {
--color-background-gradient-bg-fill-chat-bg-2: #1d1d20; --color-background-gradient-bg-fill-chat-bg-2: #1d1d20;
--color-background-gradient-bg-fill-chat-bubble-bg-1: #c8ceda14; --color-background-gradient-bg-fill-chat-bubble-bg-1: #c8ceda14;
--color-background-gradient-bg-fill-chat-bubble-bg-2: #c8ceda05; --color-background-gradient-bg-fill-chat-bubble-bg-2: #c8ceda05;
--color-background-gradient-bg-fill-chat-bubble-bg-3: #a5bddb;
--color-background-gradient-bg-fill-debug-bg-1: #c8ceda14; --color-background-gradient-bg-fill-debug-bg-1: #c8ceda14;
--color-background-gradient-bg-fill-debug-bg-2: #18181b0a; --color-background-gradient-bg-fill-debug-bg-2: #18181b0a;

1
web/themes/light.css
View File

@ -386,6 +386,7 @@ html[data-theme="light"] {
--color-background-gradient-bg-fill-chat-bg-2: #f2f4f7; --color-background-gradient-bg-fill-chat-bg-2: #f2f4f7;
--color-background-gradient-bg-fill-chat-bubble-bg-1: #ffffff; --color-background-gradient-bg-fill-chat-bubble-bg-1: #ffffff;
--color-background-gradient-bg-fill-chat-bubble-bg-2: #ffffff99; --color-background-gradient-bg-fill-chat-bubble-bg-2: #ffffff99;
--color-background-gradient-bg-fill-chat-bubble-bg-3: #e1effe;
--color-background-gradient-bg-fill-debug-bg-1: #ffffff00; --color-background-gradient-bg-fill-debug-bg-1: #ffffff00;
--color-background-gradient-bg-fill-debug-bg-2: #c8ceda24; --color-background-gradient-bg-fill-debug-bg-2: #c8ceda24;

1
web/themes/tailwind-theme-var-define.ts
View File

@ -386,6 +386,7 @@ const vars = {
'background-gradient-bg-fill-chat-bg-2': 'var(--color-background-gradient-bg-fill-chat-bg-2)', 'background-gradient-bg-fill-chat-bg-2': 'var(--color-background-gradient-bg-fill-chat-bg-2)',
'background-gradient-bg-fill-chat-bubble-bg-1': 'var(--color-background-gradient-bg-fill-chat-bubble-bg-1)', 'background-gradient-bg-fill-chat-bubble-bg-1': 'var(--color-background-gradient-bg-fill-chat-bubble-bg-1)',
'background-gradient-bg-fill-chat-bubble-bg-2': 'var(--color-background-gradient-bg-fill-chat-bubble-bg-2)', 'background-gradient-bg-fill-chat-bubble-bg-2': 'var(--color-background-gradient-bg-fill-chat-bubble-bg-2)',
'background-gradient-bg-fill-chat-bubble-bg-3': 'var(--color-background-gradient-bg-fill-chat-bubble-bg-3)',
'background-gradient-bg-fill-debug-bg-1': 'var(--color-background-gradient-bg-fill-debug-bg-1)', 'background-gradient-bg-fill-debug-bg-1': 'var(--color-background-gradient-bg-fill-debug-bg-1)',
'background-gradient-bg-fill-debug-bg-2': 'var(--color-background-gradient-bg-fill-debug-bg-2)', 'background-gradient-bg-fill-debug-bg-2': 'var(--color-background-gradient-bg-fill-debug-bg-2)',