东西很简单,就是一个data-theme="light"这种,就可以换不同的主题色
但是运行到抖音小程序无效,但是改成 class=“theme-light” 就可以,但是仅限于页面层级的,组件的也不行
不知道现在怎么回事,也不知道该咋改了
css
$themes: (
light: (
// 主题色 不会变化
mian-color: #f6f6f6,
mian-color-dk: #9c7a4b,
mian-color-light: #e8dfcc,
// 主色辅助色 不会变化
sub-color-dk: #c4a97d,
sub-color-light: #f8edc7,
// 配色
color-red: #930000,
color-gray: #999999,
color-dark: #222222,
color-white: #f3f3f3,
// 文字颜色
text-color: #9c7a4b,
text-color-dk: #9c7a4b,
text-color-red: #e66262,
text-color-dark: #222222,
text-color-white: #f3f3f3,
text-color-light: #f8edc7,
text-color-gray: #999999,
// bg
bg-color: #f6f6f6,
bg-color-shade: rgba(#222222, 0.7),
bg-color-shade-light: rgba(#f3f3f3, 1),
bg-color-white: #ffffff,
bg-color-dark: #222222,
bg-color-dk: #9c7a4b,
bg-color-gray: rgb(218, 218, 218),
// 边框颜色
border-color: #9c7a4b,
border-color-dk: #9c7a4b,
border-color-none: rgba(#fff, 0),
// img
img-bg: #444,
img-bg-light: #f3f3f3,
img-bg-dk: #999,
// 按钮
btn-primary-color: #1b170d,
btn-primary-color-hover: #1b170d,
btn-primary-border: #bba27a,
btn-primary-border-hover: #bba27a,
btn-primary-background: linear-gradient(20deg, #bba27a, #a98f63),
btn-primary-background-hover: linear-gradient(20deg, #aa8954, #a8874e),
btn-green-color: #7b9c4b,
// btn-success-color: linear-gradient(20deg, #C17452, #AB5F36),
// btn-warning-color: linear-gradient(20deg, #BBA27A, #A98F63),
// btn-info-color: linear-gradient(20deg, #BBA27A, #A98F63),
// btn-shadow: 0px 15px 16px 0px rgba(121, 115, 95, 0.26),
// $--color-success: #67c23a !default;
// $--color-warning: #e6a23c !default;
// $--color-danger: #f56c6c !default;
// $--color-info: #909399 !default;,,
),)
//声明一个根据Key获取颜色的function
@function themed($key) {
@return map-get($theme-map, $key);
}
//获取背景颜色
@mixin background_color($color) {
@include themeify {
background-color: themed($color) !important;
}
}
html
data-theme="light" class="theme-light"