vince
2 years ago
54 changed files with 341 additions and 404 deletions
@ -0,0 +1,118 @@ |
|||||
|
import type { Preferences } from './types'; |
||||
|
|
||||
|
import { |
||||
|
updateCSSVariables as executeUpdateCSSVariables, |
||||
|
generatorColorVariables, |
||||
|
} from '@vben-core/toolkit'; |
||||
|
|
||||
|
import { BUILT_IN_THEME_PRESETS } from './constants'; |
||||
|
|
||||
|
/** |
||||
|
* 更新主题的 CSS 变量以及其他 CSS 变量 |
||||
|
* @param preferences - 当前偏好设置对象，它的主题值将被用来设置文档的主题。 |
||||
|
*/ |
||||
|
function updateCSSVariables(preferences: Preferences) { |
||||
|
// 当修改到颜色变量时，更新 css 变量
|
||||
|
const root = document.documentElement; |
||||
|
if (!root) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
const theme = preferences?.theme ?? {}; |
||||
|
|
||||
|
const { builtinType, colorPrimary, mode, radius } = theme; |
||||
|
|
||||
|
// html 设置 dark 类
|
||||
|
if (Reflect.has(theme, 'mode')) { |
||||
|
const dark = isDarkTheme(mode); |
||||
|
root.classList.toggle('dark', dark); |
||||
|
} |
||||
|
|
||||
|
// html 设置 data-theme=[builtinType]
|
||||
|
if (Reflect.has(theme, 'builtinType')) { |
||||
|
const rootTheme = root.dataset.theme; |
||||
|
if (rootTheme !== builtinType) { |
||||
|
root.dataset.theme = builtinType; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 获取当前的内置主题
|
||||
|
const currentBuiltType = BUILT_IN_THEME_PRESETS.find( |
||||
|
(item) => item.type === builtinType, |
||||
|
); |
||||
|
|
||||
|
let builtinTypeColorPrimary: string | undefined = ''; |
||||
|
|
||||
|
if (currentBuiltType) { |
||||
|
const isDark = isDarkTheme(preferences.theme.mode); |
||||
|
// 设置不同主题的主要颜色
|
||||
|
const color = isDark |
||||
|
? currentBuiltType.darkPrimaryColor || currentBuiltType.primaryColor |
||||
|
: currentBuiltType.primaryColor; |
||||
|
builtinTypeColorPrimary = color || currentBuiltType.color; |
||||
|
} |
||||
|
|
||||
|
// 如果内置主题颜色和自定义颜色都不存在，则不更新主题颜色
|
||||
|
if ( |
||||
|
builtinTypeColorPrimary || |
||||
|
Reflect.has(theme, 'colorPrimary') || |
||||
|
Reflect.has(theme, 'colorDestructive') || |
||||
|
Reflect.has(theme, 'colorSuccess') || |
||||
|
Reflect.has(theme, 'colorWarning') |
||||
|
) { |
||||
|
preferences.theme.colorPrimary = builtinTypeColorPrimary || colorPrimary; |
||||
|
updateMainColorVariables(preferences); |
||||
|
} |
||||
|
|
||||
|
// 更新圆角
|
||||
|
if (Reflect.has(theme, 'radius')) { |
||||
|
document.documentElement.style.setProperty('--radius', `${radius}rem`); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 更新主要的 CSS 变量 |
||||
|
* @param preference - 当前偏好设置对象，它的颜色值将被转换成 HSL 格式并设置为 CSS 变量。 |
||||
|
*/ |
||||
|
function updateMainColorVariables(preference: Preferences) { |
||||
|
if (!preference.theme) { |
||||
|
return; |
||||
|
} |
||||
|
const { colorDestructive, colorPrimary, colorSuccess, colorWarning } = |
||||
|
preference.theme; |
||||
|
|
||||
|
const colorVariables = generatorColorVariables([ |
||||
|
{ color: colorPrimary, name: 'primary' }, |
||||
|
{ alias: 'warning', color: colorWarning, name: 'yellow' }, |
||||
|
{ alias: 'success', color: colorSuccess, name: 'green' }, |
||||
|
{ alias: 'destructive', color: colorDestructive, name: 'red' }, |
||||
|
]); |
||||
|
|
||||
|
if (colorPrimary) { |
||||
|
document.documentElement.style.setProperty( |
||||
|
'--primary', |
||||
|
colorVariables['--primary-500'], |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
if (colorVariables['--green-500']) { |
||||
|
colorVariables['--success'] = colorVariables['--green-500']; |
||||
|
} |
||||
|
if (colorVariables['--yellow-500']) { |
||||
|
colorVariables['--warning'] = colorVariables['--yellow-500']; |
||||
|
} |
||||
|
if (colorVariables['--red-500']) { |
||||
|
colorVariables['--destructive'] = colorVariables['--red-500']; |
||||
|
} |
||||
|
executeUpdateCSSVariables(colorVariables); |
||||
|
} |
||||
|
|
||||
|
function isDarkTheme(theme: string) { |
||||
|
let dark = theme === 'dark'; |
||||
|
if (theme === 'auto') { |
||||
|
dark = window.matchMedia('(prefers-color-scheme: dark)').matches; |
||||
|
} |
||||
|
return dark; |
||||
|
} |
||||
|
|
||||
|
export { updateCSSVariables }; |
||||
@ -1,5 +1,5 @@ |
|||||
export * from './create-icon'; |
export * from './create-icon'; |
||||
export * from './material'; |
export * from './lucide'; |
||||
export * from './mdi'; |
|
||||
|
|
||||
|
export * from './mdi'; |
||||
export * from '@iconify/vue'; |
export * from '@iconify/vue'; |
||||
|
|||||
@ -0,0 +1,46 @@ |
|||||
|
export { |
||||
|
ArrowDown, |
||||
|
ArrowLeft, |
||||
|
ArrowLeftToLine, |
||||
|
ArrowRightLeft, |
||||
|
ArrowRightToLine, |
||||
|
ArrowUp, |
||||
|
ArrowUpToLine, |
||||
|
Bell, |
||||
|
BookOpenText, |
||||
|
ChevronDown, |
||||
|
ChevronRight, |
||||
|
CircleHelp, |
||||
|
Copy, |
||||
|
CornerDownLeft, |
||||
|
Disc3 as IconDefault, |
||||
|
Ellipsis, |
||||
|
ExternalLink, |
||||
|
Eye, |
||||
|
EyeOff, |
||||
|
FoldHorizontal, |
||||
|
Fullscreen, |
||||
|
Github, |
||||
|
InspectionPanel, |
||||
|
Languages, |
||||
|
LoaderCircle, |
||||
|
LockKeyhole, |
||||
|
LogOut, |
||||
|
MailCheck, |
||||
|
Maximize, |
||||
|
Menu, |
||||
|
Minimize, |
||||
|
Minimize2, |
||||
|
MoonStar, |
||||
|
Palette, |
||||
|
PanelLeft, |
||||
|
PanelRight, |
||||
|
RotateCw, |
||||
|
Search, |
||||
|
SearchX, |
||||
|
Sun, |
||||
|
SunMoon, |
||||
|
SwatchBook, |
||||
|
UserRoundPen, |
||||
|
X, |
||||
|
} from 'lucide-vue-next'; |
||||
@ -1,88 +0,0 @@ |
|||||
import { createIconifyIcon } from './create-icon'; |
|
||||
|
|
||||
export const IconDefault = createIconifyIcon('ic:round-auto-awesome'); |
|
||||
|
|
||||
export const IcRoundKeyboardArrowDown = createIconifyIcon( |
|
||||
'ic:round-keyboard-arrow-down', |
|
||||
); |
|
||||
|
|
||||
export const IcRoundChevronRight = createIconifyIcon('ic:round-chevron-right'); |
|
||||
|
|
||||
export const IcRoundMenu = createIconifyIcon('ic:round-menu'); |
|
||||
|
|
||||
export const IcRoundMoreHoriz = createIconifyIcon('ic:round-more-horiz'); |
|
||||
|
|
||||
export const IcRoundFitScreen = createIconifyIcon('ic:round-fit-screen'); |
|
||||
|
|
||||
export const IcTwotoneFitScreen = createIconifyIcon('ic:twotone-fit-screen'); |
|
||||
|
|
||||
export const IcRoundColorLens = createIconifyIcon('ic:round-color-lens'); |
|
||||
|
|
||||
export const IcRoundMoreVert = createIconifyIcon('ic:round-more-vert'); |
|
||||
|
|
||||
export const IcRoundFullscreen = createIconifyIcon('ic:round-fullscreen'); |
|
||||
|
|
||||
export const IcRoundFullscreenExit = createIconifyIcon( |
|
||||
'ic:round-fullscreen-exit', |
|
||||
); |
|
||||
|
|
||||
export const IcRoundClose = createIconifyIcon('ic:round-close'); |
|
||||
|
|
||||
export const IcRoundRestartAlt = createIconifyIcon('ic:round-restart-alt'); |
|
||||
|
|
||||
export const IcRoundLogout = createIconifyIcon('ic:round-logout'); |
|
||||
|
|
||||
export const IcOutlineVisibility = createIconifyIcon('ic:outline-visibility'); |
|
||||
|
|
||||
export const IcOutlineVisibilityOff = createIconifyIcon( |
|
||||
'ic:outline-visibility-off', |
|
||||
); |
|
||||
|
|
||||
export const IcRoundSearch = createIconifyIcon('ic:round-search'); |
|
||||
|
|
||||
export const IcRoundFolderCopy = createIconifyIcon('ic:round-folder-copy'); |
|
||||
|
|
||||
export const IcRoundSubdirectoryArrowLeft = createIconifyIcon( |
|
||||
'ic:round-subdirectory-arrow-left', |
|
||||
); |
|
||||
export const IcRoundArrowUpward = createIconifyIcon('ic:round-arrow-upward'); |
|
||||
|
|
||||
export const IcRoundArrowDownward = createIconifyIcon( |
|
||||
'ic:round-arrow-downward', |
|
||||
); |
|
||||
|
|
||||
export const IcBaselineLanguage = createIconifyIcon('ic:baseline-language'); |
|
||||
|
|
||||
export const IcRoundSearchOff = createIconifyIcon('ic:round-search-off'); |
|
||||
|
|
||||
export const IcRoundNotificationsNone = createIconifyIcon( |
|
||||
'ic:round-notifications-none', |
|
||||
); |
|
||||
|
|
||||
export const IcRoundMarkEmailRead = createIconifyIcon( |
|
||||
'ic:round-mark-email-read', |
|
||||
); |
|
||||
|
|
||||
export const IcRoundWbSunny = createIconifyIcon('ic:round-wb-sunny'); |
|
||||
|
|
||||
export const IcRoundMotionPhotosAuto = createIconifyIcon( |
|
||||
'ic:round-motion-photos-auto', |
|
||||
); |
|
||||
|
|
||||
export const IcRoundSettingsSuggest = createIconifyIcon( |
|
||||
'ic:round-settings-suggest', |
|
||||
); |
|
||||
|
|
||||
export const IcRoundArrowBackIosNew = createIconifyIcon( |
|
||||
'ic:round-arrow-back-ios-new', |
|
||||
); |
|
||||
|
|
||||
export const IcRoundMultipleStop = createIconifyIcon('ic:round-multiple-stop'); |
|
||||
|
|
||||
export const IcRoundTableView = createIconifyIcon('ic:round-table-view'); |
|
||||
|
|
||||
export const IcRoundRefresh = createIconifyIcon('ic:round-refresh'); |
|
||||
|
|
||||
export const IcRoundCreditScore = createIconifyIcon('ic:round-credit-score'); |
|
||||
|
|
||||
export const IcRoundLock = createIconifyIcon('ic:round-lock'); |
|
||||
Loading…
Reference in new issue