weixin_58412143 2022-03-23 10:37 采纳率: 92.6%
浏览 37
已结题

vue换肤的实现,基于css的改变

HTML——
<a @click="change(type)">
                <img class="pf-img" src="../../assets/pf.png" alt="" />
</a>
return——
        type: 'dark',
JS——
 /*点击改变主题样式*/
      change(theme) {
        if (this.type == 'dark') {
          document.documentElement.setAttribute("data-theme", 'light');
          this.type = 'light'
          console.log('改变为白色主题')
        } else {
          document.documentElement.setAttribute("data-theme", 'dark');
          this.type = 'dark'
          console.log('改变为深色主题')
        }
      },
CSS——
<style lang="scss" scoped>
  @import "./public/static/sass/_handle.scss";
</style>
public——CSS——
//引入
 @import "./public/static/sass/_handle.scss";
//一些页面的样式
public——SASS——(_handle.scss)
@import "../../../public/static/scss/_themes.scss";

//遍历主题map
@mixin themeify {
@each $theme-name, $theme-map in $themes {
//!global 把局部变量强升为全局变量
$theme-map: $theme-map !global;
//判断html的data-theme的属性值  #{}是sass的插值表达式
//& sass嵌套里的父容器标识   @content是混合器插槽,像vue的slot
[data-theme="#{$theme-name}"] & {
@content;
}
}
}
//声明一个根据Key获取颜色的function
@function themed($key) {
@return map-get($theme-map, $key);
}
//例子——
//获取字体颜色
@mixin font_color($color) {
@include themeify {
color: themed($color)!important;
}
}
//获取边框颜色
@mixin border_color($color) {
@include themeify {
border-color: themed($color)!important;
}
}
//获取背景颜色
@mixin background_color($color) {
@include themeify {
background-color: themed($color)!important;
}
}
//获取中间bg背景图
  @mixin background_imagebody-box($image) {
  @include themeify {
  background-image: themed($image)!important;
  }
  }
//background_imagebody-box,是自己定义的名称,来自开头引入的(  _themes.scss)
public——SCSS——(_themes.scss)
$themes: (
light: (
//例子——
  font_colorel-pager-active1: #ffffff,
  background_colorcenterTable:#F1F0FE,),
  dark: ( 
//例子——
  font_colorel-pager-active1: #000000,
 background_colorcenterTable:#020E20, )
);
最后再在css里需要的地方写——
  @include background-color("background_colorcenterTable");
  • 写回答

1条回答 默认 最新

  • weixin_58412143 2022-03-23 14:52
    关注
    APP.vue——
    created() {
        let theme = localStorage.getItem('theme')
            if(!theme || theme === 'dark'){
              window.document.documentElement.setAttribute('data-theme', 'dark')
            }else{
              window.document.documentElement.setAttribute('data-theme', 'light')
            }
    
      },
    

    img

    评论

报告相同问题?

问题事件

  • 系统已结题 3月31日
  • 创建了问题 3月23日

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题