标签：换肤 SCSS -- .... 实现 theme a4b3ca 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);
    ....
    ....
  }
  

标签：换肤,SCSS,--,....,实现,theme,a4b3ca,scss
来源： https://www.cnblogs.com/aloneer/p/16483312.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。