使用sass 切换系统主题
style 包结构如下：
1661160098130.png
默认主题default.scss 如下：
/* 全局变量 */
$theme-color:#145d9a;
$theme-light-color:#166ca5;
$theme-dark-color:#114e8f;
$color-grey:#ededed;
// 颜色
$default:(
color-success: #67c23a,
color-warning: #e6a23c,
color-danger: #f56c6c,
color-info: #e5e6e9,
theme-color:$theme-color, // 主题颜色
theme-light-color:$theme-light-color,// 主题浅颜色
theme-dark-color:$theme-dark-color, // 主题深颜色
theme-active-color:$theme-dark-color, // 主题颜色active
html-bg-color:$color-white, // 网页整体背景色
btn-font-color:$color-white, // 按钮文字颜色
btn-active-bg-color:$theme-dark-color, // 按钮active 颜色
placehold-font-color: #999, // 占位符文字基准色
lable-font-color: #A2A0A1, // 不重要文字基准色
wexin-color:#67c23a, // 微信按钮颜色
link-color:$theme-color, // 链接颜色
line-color:$color-grey, // 线条基本色
theme-line-color:$theme-color, // 线条主题颜色
input-bg-color:#fafafa, // 表单背景色
system-bg-color:$color-white, // 系统主要背景色
/* 主菜单相关颜色 */
menu-font-color:$color-white,
menu-active-bg-color:rgba(255,255,255,.15),
menu-active-font-color:#fafafa,
menu-active-bottom-color:$color-white,
/* 主页面左侧导航颜色 */
nav-container-color:#f9f9f9
)
主题定义index.scss
@import './default.scss'; //默认主题颜色
@import './red.scss'; // 红色主题颜色
@import './dark.scss'; // 灰色主题颜色
//生成对应元素的主题样式代码
//主题参数
$themes: (
default: $default,
red: $red,
dark:$dark
);
@mixin themeify {
@each $themes-key, $themes-map in $themes {
$themes-map: $themes-map !global;
[data-theme=#{$themes-key}] & {
@content;
}
}
}
@function themed($key){
@if map-get($themes-map,$key){
@return map-get($themes-map,$key)
}@else{
@return $key
}
};
主题应用
在public文件夹下面index.html 里 body 标签上引用主题
<body data-theme="default">
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
普通页面使用主题颜色
如：home 页，背景颜色使用主题色
<style scoped lang="scss">
@include themeify{
background:themed(' theme-color'); // theme-color 必须在主题文件里定义
}
</style>
网友评论