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 './material'; |
|||
export * from './mdi'; |
|||
export * from './lucide'; |
|||
|
|||
export * from './mdi'; |
|||
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