SCSS 实现换肤(二)

  使用 scss 换肤，之前写过一个版本的换肤方式 SCSS 实现换肤，这里记录下使用 scss 实现换肤的另一种方式。

实现

• 新建主题色的文件 theme.scss，里边是对应主题的颜色变量

    //默认
    :root-- {
      //菜单栏
      --menuBg: red; //菜单栏背景
      --menuText: #333; //菜单栏字体色
      ....
    }
    //浅色
    :root[data-theme="chalk"] {
      --homebackgrond: #dee1e5;
      //背景色
      --topBg: rgba(255, 255, 255, 0.7);
      //顶部背景色
      --topHead: #333333;
      //顶部标题颜色
      --topState: #666666;
      //顶部状态栏颜色
      --topStateBg: #666666;
      ....
    }
    //深色
    :root[data-theme="vintage"] {
      --homebackgrond: #030a13;
      --topBg: rgba(35, 47, 59, 0.7);
      --topHead: #e2e8f0;
      --topState: #a4b3ca;
      --topStateBg: #a4b3ca;
      --topFreeBg: #040c15;
      --topFreeSize: #00ccb0;
      --headerBg: rgba(4, 12, 21, 0.6);
      --headerIcon: #a4b3ca;
      --isMutilHeaderIcon: #a4b3ca;
      ....
    }
    :root[data-theme="redTheme"] {
      --standardBg: url("~@/assets/annual/chatBg.png");
    }
    其它主题....
  

使用

• 引入

    <style lang="scss">
      @import "~@/scss/theme.scss";
    </style>
  

• 在样式中使用

  .home_content {
    background: var(--homebackgrond);
    ....
    ....
  }