一个实用的主题配置方案

1.从一个简单的模块开始

  下面是一个支付宝小程序简单的例子   
- 调用
<demo theme="dark"/>
- demo模块实现

<view  class="introduce-container {{theme=='dark'?'dark':'light'}}">
  <text class='video-scrore-inline'>test</text>
</view>

.light{
   --tipColor:#999;
}
.dark{
   --tipColor:rgba(255,255,255,0.5);
}
 .video-score-inline{
    color:#999;
    color: var(--tipColor);
  } 

一句话解释下，调用模块时指定暗黑主题，模块内置不同主题色值，根据指定展示不同的主题。

2.多模块的主题方案 

项目并存多个需主题配置的模块，这个方案是不是要改下了？对，介于主题主要分亮色主题和暗黑模式，我们可以把可复用的主题变量集中管理

2.1.集中管理式 

举个栗子

• dark

    @color-business-common-1： #ffffff
        .varsDark() {
            --theme-business-common-1: @color-business-common-1;
     }

• light

@color-business-common-2：#000；
.varsLight() {
  --theme-business-common-1:@color-business-common-2;
}

  引用theme后，就可以直接使用啦

    @import "../theme/index";
    .test{
        color: var(--theme-business-common-1);
    }

 那么模块主题值不能复用，还放在文件里统一管理嘛，当然不，也有可灵活定制主题的方法。

2.2.分布式

setColor函数，可以灵活生成主题

1. 调用

    @import "../theme/index";
    .setColor(--theme-tip-background, #e4e4e4, #232222);
    .test{
        background:var(--theme-tip-background)
    }

2. 实现：

    .setColor(@var, @color) {
          .setColor(@var, @color, @color);
        }

        .setColor(@var, @light, @dark) {
          ._setColor({@{var}: @light;}, {@{var}: @dark;});
        }

        ._setColor(@lightRule, @darkRule) {
          page,
          html,
          .light{
            @lightRule();
          }
          .dark{
            @darkRule();
          }
        }

3.主题组件怎么开发与使用

在第二节里，详述了主题less配置方案，那用了这套主题方案的组件如何开发与使用呢。以rax组件为例：

• 开发：

//组件中获取theme，作为组件最外层节点class,theme传dark/light

import { createElement, Component } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import classNames from 'classnames';


class Demo extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { theme } = this.props as IProps;
    const { titleText } = data;
    const viewClass =classNames('yk-container', theme ? `${theme}` : '')}
    return (
      <View className={viewClass}>
        <Text>test </Text>
      </View>
    );
  }
}

export default Demo;

• 使用：

• 方法1. 根结点（或组件的外层结点）加class='dark'，即可将子组件设为深色主题

<View className='dark' >
  <Demo />
</View>

• 方法2. 引用组件时加入theme='dark', 将子组件设为深色主题
  <Demo theme='dark'/>

4.优势 

上面说了那么多，这个方案有什么优势所在呢？

  1. 页面级主题一键切换--项目统一该主题配置，对于页面及内部组件的亮色|暗黑模式切换，只需在根节点通过class指定'dark|light'一键切换；

2. 一组件多场景通用 

好啦，就介绍到这~