feat(theme): 主题色与深色模式

docs/frontend/business/color.md

@@ -1,9 +1,47 @@
 # 主题色
 
-项目的一些通用样式使用了 CSS 变量来全局共享，主题色就是这样。主题色的配置在 `/src/style/theme.scss`  中。
+项目的一些通用样式使用了 CSS 变量来全局共享，主题色就是这样。
+主题色的配置在 `/src/style/theme.scss`  中，具体相关的颜色变量定义在 `/src/style/variables`中。
+
+颜色采用后缀数字进行深浅分类，后缀数字越大则相关颜色越深，反之越浅。后续按照此规则进行颜色的增减。
 
 > 主题色使用 HEX 来表示，可以给代码编辑器加上插件，以背景色显示对应的 HEX
 
 一般主题色的配置来自于设计稿，有些时候设计稿上提取的 HEX 写到代码中颜色可能不一样，可以考虑使用**屏幕取色工具**来提取颜色。
 
-> 如果后期有可选主题色的需求，可以考虑将 CSS 变量定义在根元素的 Classname 下，通过修改根元素的 Classname 来修改主题色变量
+## 主题色切换
+通过设置变量 `--wjh-color-primary` 、 `--wjh-color-primary-light` 、 `--wjh-color-primary-dark`  来分别代表某种主题下的主要配色以及与之相关的浅色和深色。
+
+固定组件配色直接使用 `/src/style/variables` 中的相关配色即可，与主题色相关的组件配色可以使用上文提及的三个主题配色。
+
+### 如何实现主题切换
+针对主题的切换，采用新组件 `theme-config`作为页面最外层的标签项。
+
+>通过将整个页面包裹在该组件下，使得该组件的主题颜色能够控制整个页面的颜色渲染。
+
+该组件的变量中的 `themeMode` 通过计算属性获取**全局存储变量** `serviceStore.theme.themeMode` ，它的值会改变组件选取的 `className` 选择不同主题色调。
+
+>通过改变 `themeMode` 的值，组件将会选取不同的主题色变量对整个页面进行渲染，同时会改变背景图片。
+
+## 深色和浅色模式的切换
+深色模式的实现同样与组件 `theme-config` 相关，同样通过该组件调取`hook`获得有关深色模式的**全局存储变量**。
+
+>深色和浅色模式的配色，将在  `/src/style/darkmode` 中具体定义。
+
+>同时还增加 `theme.json`  文件，设定深浅色的不同的基本配置颜色。
+
+深色模式的 `hook` 定义在 `/src/hooks/useDarkMode.ts`中。
+
+上述代码中`mode`获取全局变量中的模式设定值，来选择深浅色主题模式。  
+
+>通过 `Taro.getSystemInfo()` 函数来监听手机深色模式的设定值。
+
+通过调用此 `hook` 即可对深色模式进行三种切换--“深色模式”、“浅色模式”和“自适应模式”。
+
+## 后续开发
+开发每个页面都应该有适配深浅两种模式的颜色，主题色可以在原有的基础上增删。
+
+>针对主题色的更改：需要将背景图的配色改变，将新的颜色导入`/src/style/variables`中，同时再在 `theme-config` 中设定相关的主题色 `style`。
+
+
+