xingyu
2 years ago
52 changed files with 186 additions and 1213 deletions
@ -1,36 +1,18 @@
|
||||
import { resolve } from 'node:path' |
||||
import { getThemeVariables } from 'ant-design-vue/dist/theme' |
||||
import { generateAntColors, primaryColor } from '../config/themeConfig' |
||||
|
||||
/** |
||||
* less global variable |
||||
*/ |
||||
export function generateModifyVars(dark = false) { |
||||
export function generateModifyVars() { |
||||
const palettes = generateAntColors(primaryColor) |
||||
const primary = palettes[5] |
||||
|
||||
const primaryColorObj: Record<string, string> = {} |
||||
|
||||
for (let index = 0; index < 10; index++) |
||||
primaryColorObj[`primary-${index + 1}`] = palettes[index] |
||||
|
||||
const modifyVars = getThemeVariables({ dark }) |
||||
return { |
||||
...modifyVars, |
||||
// Used for global import to avoid the need to import each style file separately
|
||||
// reference: Avoid repeated references
|
||||
'hack': `${modifyVars.hack} @import (reference) "${resolve('src/design/config.less')}";`, |
||||
'primary-color': primary, |
||||
...primaryColorObj, |
||||
'info-color': primary, |
||||
'processing-color': primary, |
||||
'success-color': '#55D187', // Success color
|
||||
'error-color': '#ED6F6F', // False color
|
||||
'warning-color': '#EFBD47', // Warning color
|
||||
// 'border-color-base': '#EEEEEE',
|
||||
'font-size-base': '14px', // Main font size
|
||||
'border-radius-base': '2px', // Component/float fillet
|
||||
'link-color': primary, // Link color
|
||||
'app-content-background': '#fafafa', // Link color
|
||||
hack: `true; @import (reference) "${resolve('src/design/config.less')}";`, |
||||
} |
||||
} |
||||
|
||||
@ -1,82 +0,0 @@
|
||||
/** |
||||
* Introduces component library styles on demand. |
||||
* https://github.com/xingyuv/vite-plugin-style-import
|
||||
*/ |
||||
import { createStyleImportPlugin } from 'vite-plugin-style-import' |
||||
|
||||
export function configStyleImportPlugin(_isBuild: boolean) { |
||||
if (!_isBuild) |
||||
return [] |
||||
|
||||
const styleImportPlugin = createStyleImportPlugin({ |
||||
libs: [ |
||||
{ |
||||
libraryName: 'ant-design-vue', |
||||
esModule: true, |
||||
resolveStyle: (name) => { |
||||
// 这里是无需额外引入样式文件的“子组件”列表
|
||||
const ignoreList = [ |
||||
'anchor-link', |
||||
'sub-menu', |
||||
'menu-item', |
||||
'menu-divider', |
||||
'menu-item-group', |
||||
'breadcrumb-item', |
||||
'breadcrumb-separator', |
||||
'form-item', |
||||
'step', |
||||
'select-option', |
||||
'select-opt-group', |
||||
'card-grid', |
||||
'card-meta', |
||||
'collapse-panel', |
||||
'descriptions-item', |
||||
'list-item', |
||||
'list-item-meta', |
||||
'table-column', |
||||
'table-column-group', |
||||
'tab-pane', |
||||
'tab-content', |
||||
'timeline-item', |
||||
'tree-node', |
||||
'skeleton-input', |
||||
'skeleton-avatar', |
||||
'skeleton-title', |
||||
'skeleton-paragraph', |
||||
'skeleton-image', |
||||
'skeleton-button', |
||||
] |
||||
// 这里是需要额外引入样式的子组件列表
|
||||
// 单独引入子组件时需引入组件样式，否则会在打包后导致子组件样式丢失
|
||||
const replaceList = { |
||||
'textarea': 'input', |
||||
'typography-text': 'typography', |
||||
'typography-title': 'typography', |
||||
'typography-paragraph': 'typography', |
||||
'typography-link': 'typography', |
||||
'dropdown-button': 'dropdown', |
||||
'input-password': 'input', |
||||
'input-search': 'input', |
||||
'input-group': 'input', |
||||
'radio-group': 'radio', |
||||
'checkbox-group': 'checkbox', |
||||
'layout-sider': 'layout', |
||||
'layout-content': 'layout', |
||||
'layout-footer': 'layout', |
||||
'layout-header': 'layout', |
||||
'month-picker': 'date-picker', |
||||
'range-picker': 'date-picker', |
||||
'image-preview-group': 'image', |
||||
} |
||||
|
||||
return ignoreList.includes(name) |
||||
? '' |
||||
: replaceList.hasOwnProperty(name) |
||||
? `ant-design-vue/es/${replaceList[name]}/style/index` |
||||
: `ant-design-vue/es/${name}/style/index` |
||||
}, |
||||
}, |
||||
], |
||||
}) |
||||
return styleImportPlugin |
||||
} |
||||
@ -1,83 +0,0 @@
|
||||
/** |
||||
* Vite plugin for website theme color switching |
||||
* https://github.com/xingyuv/vite-vue-plugin-theme
|
||||
*/ |
||||
import path from 'node:path' |
||||
import type { PluginOption } from 'vite' |
||||
import { antdDarkThemePlugin, mixDarken, mixLighten, tinycolor, viteThemePlugin } from 'vite-vue-plugin-theme' |
||||
import { generateColors, getThemeColors } from '../../config/themeConfig' |
||||
import { generateModifyVars } from '../../generate/generateModifyVars' |
||||
|
||||
export function configThemePlugin(isBuild: boolean): PluginOption[] { |
||||
const colors = generateColors({ |
||||
mixDarken, |
||||
mixLighten, |
||||
tinycolor, |
||||
}) |
||||
const plugin = [ |
||||
viteThemePlugin({ |
||||
resolveSelector: (s) => { |
||||
s = s.trim() |
||||
switch (s) { |
||||
case '.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon': |
||||
return '.ant-steps-item-icon > .ant-steps-icon' |
||||
case '.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)': |
||||
case '.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover': |
||||
case '.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active': |
||||
return s |
||||
case '.ant-steps-item-icon > .ant-steps-icon': |
||||
return s |
||||
case '.ant-select-item-option-selected:not(.ant-select-item-option-disabled)': |
||||
return s |
||||
default: |
||||
if (s.indexOf('.ant-btn') >= -1) { |
||||
// 按钮被重新定制过，需要过滤掉class防止覆盖
|
||||
return s |
||||
} |
||||
} |
||||
return s.startsWith('[data-theme') ? s : `[data-theme] ${s}` |
||||
}, |
||||
colorVariables: [...getThemeColors(), ...colors], |
||||
}), |
||||
antdDarkThemePlugin({ |
||||
preloadFiles: [ |
||||
path.resolve(process.cwd(), 'node_modules/ant-design-vue/dist/antd.less'), |
||||
// path.resolve(process.cwd(), 'node_modules/ant-design-vue/dist/antd.dark.less'),
|
||||
path.resolve(process.cwd(), 'src/design/index.less'), |
||||
], |
||||
filter: id => (isBuild ? !id.endsWith('antd.less') : true), |
||||
// extractCss: false,
|
||||
darkModifyVars: { |
||||
...generateModifyVars(true), |
||||
'text-color': '#c9d1d9', |
||||
'primary-1': 'rgb(255 255 255 / 8%)', |
||||
'text-color-base': '#c9d1d9', |
||||
'component-background': '#151515', |
||||
'heading-color': 'rgb(255 255 255 / 65%)', |
||||
// black: '#0e1117',
|
||||
// #8b949e
|
||||
'text-color-secondary': '#8b949e', |
||||
'border-color-base': '#303030', |
||||
// 'border-color-split': '#30363d',
|
||||
'item-active-bg': '#111b26', |
||||
'app-content-background': '#1e1e1e', |
||||
'tree-node-selected-bg': '#11263c', |
||||
|
||||
'alert-success-border-color': '#274916', |
||||
'alert-success-bg-color': '#162312', |
||||
'alert-success-icon-color': '#49aa19', |
||||
'alert-info-border-color': '#153450', |
||||
'alert-info-bg-color': '#111b26', |
||||
'alert-info-icon-color': '#177ddc', |
||||
'alert-warning-border-color': '#594214', |
||||
'alert-warning-bg-color': '#2b2111', |
||||
'alert-warning-icon-color': '#d89614', |
||||
'alert-error-border-color': '#58181c', |
||||
'alert-error-bg-color': '#2a1215', |
||||
'alert-error-icon-color': '#a61d24', |
||||
}, |
||||
}), |
||||
] |
||||
|
||||
return plugin as unknown as PluginOption[] |
||||
} |
||||
@ -1,286 +0,0 @@
|
||||
// button reset |
||||
.ant-btn { |
||||
&-link:hover, |
||||
&-link:focus, |
||||
&-link:active { |
||||
border-color: transparent !important; |
||||
} |
||||
|
||||
&-primary { |
||||
color: @white; |
||||
background-color: @button-primary-color; |
||||
|
||||
&:hover, |
||||
&:focus { |
||||
color: @white; |
||||
background-color: @button-primary-hover-color; |
||||
} |
||||
} |
||||
|
||||
/* stylelint-disable-next-line selector-not-notation */ |
||||
&-primary:not(&-background-ghost):not([disabled]) { |
||||
color: @white; |
||||
} |
||||
|
||||
&-default { |
||||
color: @button-cancel-color; |
||||
background-color: @button-cancel-bg-color; |
||||
border-color: @button-cancel-border-color; |
||||
|
||||
&:hover, |
||||
&:focus { |
||||
color: @button-cancel-hover-color; |
||||
background-color: @button-cancel-hover-bg-color; |
||||
border-color: @button-cancel-hover-border-color; |
||||
} |
||||
// |
||||
//&[disabled], |
||||
//&[disabled]:hover { |
||||
// color: fade(@button-cancel-color, 40%) !important; |
||||
// background: fade(@button-cancel-bg-color, 40%) !important; |
||||
// border-color: fade(@button-cancel-border-color, 40%) !important; |
||||
//} |
||||
} |
||||
|
||||
[data-theme="light"] &.ant-btn-link.is-disabled { |
||||
color: rgb(0 0 0 / 25%); |
||||
text-shadow: none; |
||||
cursor: not-allowed !important; |
||||
background-color: transparent !important; |
||||
border-color: transparent !important; |
||||
box-shadow: none; |
||||
} |
||||
|
||||
[data-theme="dark"] &.ant-btn-link.is-disabled { |
||||
color: rgb(255 255 255 / 25%) !important; |
||||
text-shadow: none; |
||||
cursor: not-allowed !important; |
||||
background-color: transparent !important; |
||||
border-color: transparent !important; |
||||
box-shadow: none; |
||||
} |
||||
|
||||
// color: @white; |
||||
|
||||
&-success.ant-btn-link:not([disabled="disabled"]) { |
||||
color: @button-success-color; |
||||
|
||||
&:hover, |
||||
&:focus { |
||||
color: @button-success-hover-color; |
||||
border-color: transparent; |
||||
} |
||||
|
||||
&:active { |
||||
color: @button-success-active-color; |
||||
} |
||||
} |
||||
|
||||
&-success.ant-btn-link.ant-btn-loading, |
||||
&-warning.ant-btn-link.ant-btn-loading, |
||||
&-error.ant-btn-link.ant-btn-loading, |
||||
&-background-ghost.ant-btn-link.ant-btn-loading, |
||||
&.ant-btn-link.ant-btn-loading { |
||||
&::before { |
||||
background: transparent; |
||||
} |
||||
} |
||||
|
||||
&-success:not(.ant-btn-link, .is-disabled) { |
||||
color: @white; |
||||
background-color: @button-success-color; |
||||
border-color: @button-success-color; |
||||
//border-width: 0; |
||||
|
||||
&:hover, |
||||
&:focus { |
||||
color: @white; |
||||
background-color: @button-success-hover-color; |
||||
border-color: @button-success-hover-color; |
||||
} |
||||
|
||||
&:active { |
||||
background-color: @button-success-active-color; |
||||
border-color: @button-success-active-color; |
||||
} |
||||
} |
||||
|
||||
&-warning.ant-btn-link:not([disabled="disabled"]) { |
||||
color: @button-warn-color; |
||||
|
||||
&:hover, |
||||
&:focus { |
||||
color: @button-warn-hover-color; |
||||
border-color: transparent; |
||||
} |
||||
|
||||
&:active { |
||||
color: @button-warn-active-color; |
||||
} |
||||
} |
||||
|
||||
&-warning:not(.ant-btn-link, .is-disabled) { |
||||
color: @white; |
||||
background-color: @button-warn-color; |
||||
border-color: @button-warn-color; |
||||
//border-width: 0; |
||||
|
||||
&:hover, |
||||
&:focus { |
||||
color: @white; |
||||
background-color: @button-warn-hover-color; |
||||
border-color: @button-warn-hover-color; |
||||
} |
||||
|
||||
&:active { |
||||
background-color: @button-warn-active-color; |
||||
border-color: @button-warn-active-color; |
||||
} |
||||
|
||||
//&[disabled], |
||||
//&[disabled]:hover { |
||||
// color: @white; |
||||
// background-color: fade(@button-warn-color, 40%); |
||||
// border-color: fade(@button-warn-color, 40%); |
||||
//} |
||||
} |
||||
|
||||
&-error.ant-btn-link:not([disabled="disabled"]) { |
||||
color: @button-error-color; |
||||
|
||||
&:hover, |
||||
&:focus { |
||||
color: @button-error-hover-color; |
||||
border-color: transparent; |
||||
} |
||||
|
||||
&:active { |
||||
color: @button-error-active-color; |
||||
} |
||||
} |
||||
|
||||
&-error:not(.ant-btn-link, .is-disabled) { |
||||
color: @white; |
||||
background-color: @button-error-color; |
||||
border-color: @button-error-color; |
||||
//border-width: 0; |
||||
|
||||
&:hover, |
||||
&:focus { |
||||
color: @white; |
||||
background-color: @button-error-hover-color; |
||||
border-color: @button-error-hover-color; |
||||
} |
||||
|
||||
&:active { |
||||
background-color: @button-error-active-color; |
||||
border-color: @button-error-active-color; |
||||
} |
||||
|
||||
//&[disabled], |
||||
//&[disabled]:hover { |
||||
// color: @white; |
||||
// background-color: fade(@button-error-color, 40%); |
||||
// border-color: fade(@button-error-color, 40%); |
||||
//} |
||||
} |
||||
|
||||
&-background-ghost { |
||||
background-color: transparent !important; |
||||
border-width: 1px; |
||||
|
||||
&[disabled], |
||||
&[disabled]:hover { |
||||
color: fade(@white, 40%) !important; |
||||
background-color: transparent !important; |
||||
border-color: fade(@white, 40%) !important; |
||||
} |
||||
} |
||||
|
||||
&-dashed&-background-ghost, |
||||
&-default&-background-ghost { |
||||
color: @button-ghost-color; |
||||
border-color: @button-ghost-color; |
||||
|
||||
&:hover, |
||||
&:focus { |
||||
color: @button-ghost-hover-color; |
||||
border-color: @button-ghost-hover-color; |
||||
} |
||||
|
||||
&:active { |
||||
color: @button-ghost-active-color; |
||||
border-color: @button-ghost-active-color; |
||||
} |
||||
|
||||
&[disabled], |
||||
&[disabled]:hover { |
||||
color: fade(@white, 40%) !important; |
||||
border-color: fade(@white, 40%) !important; |
||||
} |
||||
} |
||||
|
||||
&-background-ghost&-success:not(.ant-btn-link) { |
||||
color: @button-success-color; |
||||
background-color: transparent; |
||||
border-color: @button-success-color; |
||||
border-width: 1px; |
||||
|
||||
&:hover, |
||||
&:focus { |
||||
color: @button-success-hover-color !important; |
||||
border-color: @button-success-hover-color; |
||||
} |
||||
|
||||
&:active { |
||||
color: @button-success-active-color; |
||||
border-color: @button-success-active-color; |
||||
} |
||||
} |
||||
|
||||
&-background-ghost&-warning:not(.ant-btn-link) { |
||||
color: @button-warn-color; |
||||
background-color: transparent; |
||||
border-color: @button-warn-color; |
||||
border-width: 1px; |
||||
|
||||
&:hover, |
||||
&:focus { |
||||
color: @button-warn-hover-color !important; |
||||
border-color: @button-warn-hover-color; |
||||
} |
||||
|
||||
&:active { |
||||
color: @button-warn-active-color; |
||||
border-color: @button-warn-active-color; |
||||
} |
||||
} |
||||
|
||||
&-background-ghost&-error:not(.ant-btn-link) { |
||||
color: @button-error-color; |
||||
background-color: transparent; |
||||
border-color: @button-error-color; |
||||
border-width: 1px; |
||||
|
||||
&:hover, |
||||
&:focus { |
||||
color: @button-error-hover-color !important; |
||||
border-color: @button-error-hover-color; |
||||
} |
||||
|
||||
&:active { |
||||
color: @button-error-active-color; |
||||
border-color: @button-error-active-color; |
||||
} |
||||
} |
||||
|
||||
&-ghost.ant-btn-link:not([disabled="disabled"]) { |
||||
color: @button-ghost-color; |
||||
|
||||
&:hover, |
||||
&:focus { |
||||
color: @button-ghost-hover-color; |
||||
border-color: transparent; |
||||
} |
||||
} |
||||
} |
||||
@ -1,67 +0,0 @@
|
||||
@import "./pagination.less"; |
||||
@import "./input.less"; |
||||
@import "./btn.less"; |
||||
|
||||
.ant-image-preview-root { |
||||
img { |
||||
display: unset; |
||||
} |
||||
} |
||||
|
||||
span.anticon:not(.app-iconify) { |
||||
vertical-align: 0.125em !important; |
||||
} |
||||
|
||||
.ant-back-top { |
||||
right: 20px; |
||||
bottom: 20px; |
||||
} |
||||
|
||||
.collapse-container__body { |
||||
> .ant-descriptions { |
||||
margin-left: 6px; |
||||
} |
||||
} |
||||
|
||||
.ant-image-preview-operations { |
||||
background-color: rgb(0 0 0 / 30%); |
||||
} |
||||
|
||||
.ant-popover { |
||||
&-content { |
||||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%); |
||||
} |
||||
} |
||||
|
||||
// ================================= |
||||
// ==============modal message====== |
||||
// ================================= |
||||
.modal-icon-warning { |
||||
color: @warning-color !important; |
||||
} |
||||
|
||||
.modal-icon-success { |
||||
color: @success-color !important; |
||||
} |
||||
|
||||
.modal-icon-error { |
||||
color: @error-color !important; |
||||
} |
||||
|
||||
.modal-icon-info { |
||||
color: @primary-color !important; |
||||
} |
||||
|
||||
.ant-checkbox-checked .ant-checkbox-inner::after, |
||||
.ant-tree-checkbox-checked .ant-tree-checkbox-inner::after { |
||||
border-top: 0 !important; |
||||
border-left: 0 !important; |
||||
} |
||||
|
||||
.ant-form-item-control-input-content { |
||||
> div { |
||||
> div { |
||||
max-width: 100%; |
||||
} |
||||
} |
||||
} |
||||
@ -1,27 +0,0 @@
|
||||
@import (reference) "../color.less"; |
||||
|
||||
// input |
||||
.ant-input { |
||||
&-number, |
||||
&-number-group-wrapper { |
||||
width: 100% !important; |
||||
min-width: 110px; |
||||
max-width: 100%; |
||||
} |
||||
} |
||||
|
||||
.ant-input-affix-wrapper .ant-input-suffix { |
||||
right: 9px; |
||||
} |
||||
|
||||
.ant-input-clear-icon { |
||||
margin-right: 5px; |
||||
} |
||||
|
||||
.ant-input-affix-wrapper-textarea-with-clear-btn { |
||||
padding: 0 !important; |
||||
|
||||
textarea.ant-input { |
||||
padding: 4px; |
||||
} |
||||
} |
||||
@ -1,96 +0,0 @@
|
||||
html[data-theme="dark"] { |
||||
.ant-pagination { |
||||
&.mini { |
||||
.ant-pagination-prev, |
||||
.ant-pagination-next, |
||||
.ant-pagination-item { |
||||
background-color: rgb(255 255 255 / 4%) !important; |
||||
|
||||
a { |
||||
color: #8b949e !important; |
||||
} |
||||
} |
||||
|
||||
.ant-select-arrow { |
||||
color: @text-color-secondary !important; |
||||
} |
||||
|
||||
.ant-pagination-item-active { |
||||
background-color: @primary-color !important; |
||||
border: none; |
||||
border-radius: none !important; |
||||
|
||||
a { |
||||
color: @white !important; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.ant-pagination { |
||||
&.mini { |
||||
.ant-pagination-prev, |
||||
.ant-pagination-next { |
||||
font-size: 12px; |
||||
color: @text-color-base; |
||||
border: 1px solid; |
||||
} |
||||
|
||||
.ant-pagination-prev:hover, |
||||
.ant-pagination-next:hover, |
||||
.ant-pagination-item:focus, |
||||
.ant-pagination-item:hover { |
||||
a { |
||||
color: @primary-color; |
||||
} |
||||
} |
||||
|
||||
.ant-pagination-prev, |
||||
.ant-pagination-next, |
||||
.ant-pagination-item { |
||||
margin: 0 4px !important; |
||||
background-color: #f4f4f5 !important; |
||||
border: none; |
||||
border-radius: none !important; |
||||
|
||||
a { |
||||
margin-top: 1px; |
||||
color: #606266; |
||||
} |
||||
|
||||
&:last-child { |
||||
margin-right: 0 !important; |
||||
} |
||||
} |
||||
|
||||
.ant-pagination-item-active { |
||||
background-color: @primary-color !important; |
||||
border: none; |
||||
border-radius: none !important; |
||||
|
||||
a { |
||||
color: @white !important; |
||||
} |
||||
} |
||||
|
||||
.ant-pagination-options { |
||||
margin-left: 12px; |
||||
} |
||||
|
||||
.ant-pagination-options-quick-jumper input { |
||||
height: 22px; |
||||
margin: 0 6px; |
||||
line-height: 22px; |
||||
text-align: center; |
||||
} |
||||
|
||||
.ant-select-arrow { |
||||
color: @border-color-shallow-dark; |
||||
} |
||||
} |
||||
|
||||
&-disabled { |
||||
display: none !important; |
||||
} |
||||
} |
||||
@ -1,76 +0,0 @@
|
||||
@prefix-cls: ~"@{namespace}-basic-table"; |
||||
|
||||
// fix table unnecessary scrollbar |
||||
.@{prefix-cls} { |
||||
.hide-scrollbar-y { |
||||
.ant-spin-nested-loading { |
||||
.ant-spin-container { |
||||
.ant-table { |
||||
.ant-table-content { |
||||
.ant-table-scroll { |
||||
.ant-table-hide-scrollbar { |
||||
overflow-y: auto !important; |
||||
} |
||||
|
||||
.ant-table-body { |
||||
overflow-y: auto !important; |
||||
} |
||||
} |
||||
|
||||
.ant-table-fixed-right { |
||||
.ant-table-body-outer { |
||||
.ant-table-body-inner { |
||||
overflow-y: auto !important; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.ant-table-fixed-left { |
||||
.ant-table-body-outer { |
||||
.ant-table-body-inner { |
||||
overflow-y: auto !important; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.hide-scrollbar-x { |
||||
.ant-spin-nested-loading { |
||||
.ant-spin-container { |
||||
.ant-table { |
||||
.ant-table-content { |
||||
.ant-table-scroll { |
||||
.ant-table-hide-scrollbar { |
||||
//overflow-x: auto !important; |
||||
} |
||||
|
||||
.ant-table-body { |
||||
overflow: auto !important; |
||||
} |
||||
} |
||||
|
||||
.ant-table-fixed-right { |
||||
.ant-table-body-outer { |
||||
.ant-table-body-inner { |
||||
overflow-x: auto !important; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.ant-table-fixed-left { |
||||
.ant-table-body-outer { |
||||
.ant-table-body-inner { |
||||
overflow-x: auto !important; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -1,23 +1,12 @@
|
||||
import { darkCssIsReady, loadDarkThemeCss } from 'vite-vue-plugin-theme/es/client' |
||||
import { addClass, hasClass, removeClass } from '@/utils/domUtils' |
||||
import { useDark, useToggle } from '@vueuse/core' |
||||
|
||||
export async function updateDarkTheme(mode: string | null = 'light') { |
||||
const htmlRoot = document.getElementById('htmlRoot') |
||||
if (!htmlRoot) |
||||
return |
||||
const isDark = useDark({ |
||||
attribute: 'data-theme', |
||||
valueDark: 'dark', |
||||
valueLight: 'light', |
||||
}) |
||||
const toggleDark = useToggle(isDark) |
||||
|
||||
const hasDarkClass = hasClass(htmlRoot, 'dark') |
||||
if (mode === 'dark') { |
||||
if (import.meta.env.PROD && !darkCssIsReady) |
||||
await loadDarkThemeCss() |
||||
|
||||
htmlRoot.setAttribute('data-theme', 'dark') |
||||
if (!hasDarkClass) |
||||
addClass(htmlRoot, 'dark') |
||||
} |
||||
else { |
||||
htmlRoot.setAttribute('data-theme', 'light') |
||||
if (hasDarkClass) |
||||
removeClass(htmlRoot, 'dark') |
||||
} |
||||
export function updateDarkTheme(mode: string | null = 'light') { |
||||
toggleDark(mode === 'dark') |
||||
} |
||||
|
||||
@ -1,16 +1 @@
|
||||
import { replaceStyleVariables } from 'vite-vue-plugin-theme/es/client' |
||||
import { mixDarken, mixLighten, tinycolor } from 'vite-vue-plugin-theme/es/colorUtils' |
||||
import { generateColors, getThemeColors } from '../../../build/config/themeConfig' |
||||
|
||||
export async function changeTheme(color: string) { |
||||
const colors = generateColors({ |
||||
mixDarken, |
||||
mixLighten, |
||||
tinycolor, |
||||
color, |
||||
}) |
||||
|
||||
return await replaceStyleVariables({ |
||||
colorVariables: [...getThemeColors(color), ...colors], |
||||
}) |
||||
} |
||||
export async function changeTheme(_color: string) {} |
||||
|
||||
Reference in new issue