jandres/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-03-06 07:35:14 +00:00
Code Issues Actions 11 Packages Projects Releases Wiki Activity

refactor(theme-switcher): use semantic buttons for theme options

Browse Source
This commit is contained in:
yyh
2026-03-03 21:04:51 +08:00
parent a65735ff46
commit 6ecf9a2936
1 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
web/app/components/base/theme-switcher.tsx
View File

@@ -13,44 +13,50 @@ export default function ThemeSwitcher() {
return (
<div className="flex items-center rounded-[10px] bg-components-segmented-control-bg-normal p-0.5">
<div
<button
type="button"
className={cn(
'rounded-lg px-2 py-1 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
theme === 'system' && 'bg-components-segmented-control-item-active-bg text-text-accent-light-mode-only shadow-sm hover:bg-components-segmented-control-item-active-bg hover:text-text-accent-light-mode-only',
)}
onClick={() => handleThemeChange('system')}
aria-label="System theme"
data-testid="system-theme-container"
>
<div className="p-0.5">
<span className="i-ri-computer-line h-4 w-4" />
</div>
</div>
</button>
<div className={cn('h-[14px] w-px bg-transparent', theme === 'dark' && 'bg-divider-regular')} data-testid="divider"></div>
<div
<button
type="button"
className={cn(
'rounded-lg px-2 py-1 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
theme === 'light' && 'bg-components-segmented-control-item-active-bg text-text-accent-light-mode-only shadow-sm hover:bg-components-segmented-control-item-active-bg hover:text-text-accent-light-mode-only',
)}
onClick={() => handleThemeChange('light')}
aria-label="Light theme"
data-testid="light-theme-container"
>
<div className="p-0.5">
<span className="i-ri-sun-line h-4 w-4" />
</div>
</div>
</button>
<div className={cn('h-[14px] w-px bg-transparent', theme === 'system' && 'bg-divider-regular')} data-testid="divider"></div>
<div
<button
type="button"
className={cn(
'rounded-lg px-2 py-1 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
theme === 'dark' && 'bg-components-segmented-control-item-active-bg text-text-accent-light-mode-only shadow-sm hover:bg-components-segmented-control-item-active-bg hover:text-text-accent-light-mode-only',
)}
onClick={() => handleThemeChange('dark')}
aria-label="Dark theme"
data-testid="dark-theme-container"
>
<div className="p-0.5">
<span className="i-ri-moon-line h-4 w-4" />
</div>
</div>
</button>
</div>
)
}