用CSS变量给你的应用换个肤色

背景

本文介绍如何实现应用换肤这一功能，应用到的技术css变量来实现一键换肤。

介绍css变量

css变量是css3新增的原生变量属性，语法以--开始定义变量，使用var()调用变量。

---

基本用法示例：

/** 定义在根节点中，所有元素皆可访问 */
:root {
    --theme-color: red;
    --text-color: blue;
}

.container {
    background: var(--theme-color);
    color: var(--text-color);
}

以上就是css变量最基本的用法，更多详情可以参考css变量，这里就不过多赘述。

实战换肤

1. 先跟设计师定义肤色色系
2. 定义好一套色系文件
3. 在入口引入色系文件
4. 动态使用setAttribute切换主题色

项目应用代码

示例总共分为三个部分，一个是App.js,app.scss（业务代码），SkinChange(皮肤切换组件)，skin.scss(皮肤配置样式)

1. 定义好皮肤色，这里使用的是css属性选择器

/** 先按照设计师规范定义好主题色 */
/** skin.scss */
:root[sys-theme=blue] {
  --title-color: rgb(0, 0, 255);
  --content-text-color: rgba(0, 200, 255, .5);
  --footer-text-color: rgba(0, 200, 200, .8);
}

:root[sys-theme=pink] {
  --title-color: rgb(255, 192, 203);
  --content-text-color: rgba(255, 192, 255, .5);
  --footer-text-color: rgba(255, 192, 255, .9);
}

:root[sys-theme=green]{
  --title-color: rgb(0, 128, 0);
  --content-text-color: rgba(0, 255, 0, .5);
  --footer-text-color: rgba(0, 255, 0, .9);
}

2.业务代码中使用css变量做颜色

/**app.scss*/

/**业务中应用皮肤颜色*/

$title-color: var(--title-color);
$content-color: var(--content-text-color);
$footer-color: var(--footer-text-color);


.container{
  h1 {
    color: $title-color;
  }
  p {
    color: $content-color;
  }
  footer {
    color: $footer-color;
  }
}

// App.js

import './scss/skin.scss'
import './app.scss'
import { SkinChange } from './components/SkinChange/index'
function App() {
  document.documentElement.setAttribute('sys-theme', 'blue');
  return (
    <div className="App">
      <SkinChange />
      <div className='container'>
        <h1>页面标题</h1>
        <p>页面内容文案</p>
        <footer>页脚文案</footer>
      </div>
    </div>
  );
}

export default App;

 

3.切换皮肤组件，点击切换颜色时设置系统颜色，整体系统颜色即会随之改变

// components/SkinChange/index.js
const Skins = [
  {
    theme: 'blue',
    text: '蓝色'
  },
  {
    theme: 'pink',
    text: '粉色'
  },
  {
    theme: 'green',
    text: '绿色'
  }
]

function SkinBtns () {
  function changeTheme (e) {
    const { theme = '' } = e.target.dataset || {}
    if (!theme) return
    document.documentElement.setAttribute('sys-theme', theme)
  }
  return (
    <div className="skins-btn-view" onClick={(e) => changeTheme(e)}>
      {
        Skins.map((skin) => {
          return <button key={skin.theme} data-theme={skin.theme} className="skin-btn">{skin.text}</button>
        })
      }
    </div>
  );
}

export function SkinChange () {
  return (
    <div>
      <p>换肤</p>
      <SkinBtns />
    </div>
  );
}

主要思路通过点击皮肤组件，切换全局的sys-theme属性，对应变更所有主题色css变量颜色

效果图

总结

以上效果都是通过原生的css属性实现，本文也是起一个抛砖引玉的作用，更多好玩的玩法欢迎交流！

文章转自：https://juejin.cn/post/7383341578026057