element换肤
如果只是简单的需求需要暗黑和白色的切换模式官方有说明 切换皮肤官方是通过html的class类名然后渲染关联的样式实现,自己如果需要专门修改关联的css变量或者覆盖的话官方也有说明,但是一般来说是够用的,有特殊需求建议参考下面的方案实践。
css变量换肤
建立一个样式文件然后在关联的文件下面去扩展自己的公共样式; 修改的时候无非就是修改下html属性[data-theme]实现皮肤切换
示例代码:
css
[data-theme=light] {
--v-color: #122ca1;
}
[data-theme=dark] {
--v-color: #d6c7c7;
}
这里只是一个切换的示例,具体切换class还是id,这个都可以自主灵活变化
js
document
.querySelector('html')
.setAttribute('data-theme', isDark.value ? 'dark' : 'light');
浏览器兼容
主流浏览器基本没问题,但是有一定的兼容性要求就需要谨慎选择了
scss/less换肤
上面的方案也许会有一些浏览器不兼容的问题,现在这种方案基本不会存在兼容问题了,利用scss的特性简化自己的维护代码的成本。
示例代码:
下面的逻辑代码直接渲染出2套css样式,如果自己有多套样式的需求也可以参考这一套实现,比较方便维护
scss
$bg-color: (
light: #fff,
dark: #091a28
);
$title-color: (
light: #363636,
dark: #fff
);
$subtitle-color: (
light: #4a4a4a,
dark: cyan
);
$border-bottom: (
light: 1px solid #dbdbdb,
dark: 1px solid #363636
);
@mixin useTheme($key, $valueMap) {
$themes: light, dark;
@each $theme in $themes {
[data-theme=#{$theme}] & {
#{$key}: map-get($valueMap, $theme);
}
}
}
// 使用示例
.bg-color {
@include useTheme('color', $subtitle-color);
}
下面示例在vite如何全局引入
之前直接在main.ts引入无法在样式中使用,应该是样式加载顺序的问题,没办法识别,后面统一在vite.config配置后页面表现正常支持使用了。
js
css: {
preprocessorOptions:{
scss:{
// scss样式颜色全局引入
additionalData: `
@import "@/assets/theme.scss";
@import "@/assets/variables.scss";
`
}
},
},