From b79d80fdb4d1f612db0c0b2e8479fa6a56fafee6 Mon Sep 17 00:00:00 2001 From: Tong030905 Date: Wed, 30 Aug 2023 16:26:14 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat(theme):=20=E4=B8=BB=E9=A2=98=E8=89=B2?= =?UTF-8?q?=E4=B8=8E=E6=B7=B1=E8=89=B2=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/frontend/business/color.md | 123 +++++++++++++++++++++++++++++++- 1 file changed, 121 insertions(+), 2 deletions(-) diff --git a/docs/frontend/business/color.md b/docs/frontend/business/color.md index afe5b1e..225ef1f 100644 --- a/docs/frontend/business/color.md +++ b/docs/frontend/business/color.md @@ -1,9 +1,128 @@ # 主题色 -项目的一些通用样式使用了 CSS 变量来全局共享，主题色就是这样。主题色的配置在 `/src/style/theme.scss` 中。 +项目的一些通用样式使用了 CSS 变量来全局共享，主题色就是这样。 +主题色的配置在 `/src/style/theme.scss` 中，具体相关的颜色变量定义在 `/src/style/variables`中。 + +颜色采用后缀数字进行深浅分类，后缀数字越大则相关颜色越深，反之越浅。后续按照此规则进行颜色的增减。 > 主题色使用 HEX 来表示，可以给代码编辑器加上插件，以背景色显示对应的 HEX 一般主题色的配置来自于设计稿，有些时候设计稿上提取的 HEX 写到代码中颜色可能不一样，可以考虑使用**屏幕取色工具**来提取颜色。 -> 如果后期有可选主题色的需求，可以考虑将 CSS 变量定义在根元素的 Classname 下，通过修改根元素的 Classname 来修改主题色变量 \ No newline at end of file +## 主题色切换 +通过设置变量 `--wjh-color-primary` 、 `--wjh-color-primary-light` 、 `--wjh-color-primary-dark` 来分别代表某种主题下的主要配色以及与之相关的浅色和深色。 + +固定组件配色直接使用 `/src/style/variables` 中的相关配色即可，与主题色相关的组件配色可以使用上文提及的三个主题配色。 + +### 如何实现主题切换 +针对主题的切换，采用新组件 `theme-config` 。 + +>通过将整个页面包裹在该组件下，使得该组件的主题颜色能够控制整个页面的颜色渲染。 + +该组件的变量中的 `themeMode` 通过计算属性获取**全局存储变量** `serviceStore.theme.themeMode` ，它的值会改变组件选取的 `className` 选择不同主题色调。 + +```scss +.theme.green { + --wjh-color-primary-light: var(--wjh-color-green-500); + --wjh-color-primary: var(--wjh-color-green-600); + --wjh-color-primary-dark: var(--wjh-color-green-700); + + background-image: url('~@/assets/photos/background.svg'); +} + +.theme.yellow { + --wjh-color-primary-light: var(--wjh-color-yellow-500); + --wjh-color-primary: var(--wjh-color-yellow-600); + --wjh-color-primary-dark: var(--wjh-color-yellow-700); + + background-image: url('~@/assets/photos/background-yellow.svg'); +} + +.theme.blue { + --wjh-color-primary-light: var(--wjh-color-blue-500); + --wjh-color-primary: var(--wjh-color-blue-600); + --wjh-color-primary-dark: var(--wjh-color-blue-700); + + background-image: url('~@/assets/photos/background-blue.svg'); +} + +.theme.pink { + --wjh-color-primary-light: var(--wjh-color-pink-500); + --wjh-color-primary: var(--wjh-color-pink-600); + --wjh-color-primary-dark: var(--wjh-color-pink-700); + + background-image: url('~@/assets/photos/background-pink.svg'); +} +``` + +通过改变 `themeMode` 的值，组件将会选取不同的主题色变量对整个页面进行渲染，同时会改变背景图片。 + +## 深色和浅色模式的切换 +深色模式的实现同样与组件 `theme-config` 相关，同样通过该组件调取`hook`获得有关深色模式的**全局存储变量**。 + +>深色和浅色模式的配色，将在 `/src/style/darkmode` 中具体定义。 + +>同时还增加 `theme.json` 文件，设定深浅色的不同的基本配置颜色。 + +深色模式的 `hook` 定义在 `/src/hooks/useDarkMode.ts`中。 + +```ts +const useDarkMode = () => { + const mode = computed(() => serviceStore.theme.darkMode.mode); + const isAdapted = computed(() => serviceStore.theme.darkMode.isAdapted); + + const handleModeChange = (e) => { + if (isAdapted.value === true) { + setMode(e.theme as DarkModeTheme); + } + }; + + const setIsAdapted = async (value: boolean) => { + store.commit("setDarkModeAdapted", value); + if (value === true) { + const sysInfo = await Taro.getSystemInfo(); + setMode(sysInfo.theme as DarkModeTheme); + } + }; + + const setMode = async (value: DarkModeTheme) => { + store.commit("setDarkMode", value); + }; + + onMounted(async () => { + if (isAdapted.value) { + const sysInfo = await Taro.getSystemInfo(); + setMode(sysInfo.theme as DarkModeTheme); + } + + Taro.onThemeChange(handleModeChange); + }); + + onUnmounted(() => { + Taro.offThemeChange(handleModeChange); + }); + + return { + mode, + isAdapted, + setMode, + setIsAdapted + }; +}; + +export default useDarkMode; +``` + +上述代码中`mode`获取全局变量中的模式设定值，来选择深浅色主题模式。 + +>其中`isAdapted`用来判断是否设置自适应手机深浅模式，再通过 `Taro.getSystemInfo()` 函数来获取手机深色模式的设定值。 + +通过调用此 `hook` 即可对深色模式进行三种切换--“深色模式”、“浅色模式”和“自适应模式”。 + +## 后续开发 +开发每个页面都应该有适配深浅两种模式的颜色，主题色可以在原有的基础上增删。 + +>针对主题色的更改：需要将背景图的配色改变，将新的颜色导入`/src/style/variables`中，同时再在 `theme-config` 中设定相关的主题色 `style`。 + + + From fb1624d6dd6bdd66bde279f7be26d645f084feb7 Mon Sep 17 00:00:00 2001 From: Tong030905 Date: Thu, 31 Aug 2023 16:09:17 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix(theme):=20=E5=88=A0=E5=87=8F=E4=BB=A3?= =?UTF-8?q?=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/frontend/business/color.md | 87 ++------------------------------- 1 file changed, 3 insertions(+), 84 deletions(-) diff --git a/docs/frontend/business/color.md b/docs/frontend/business/color.md index 225ef1f..3c424e2 100644 --- a/docs/frontend/business/color.md +++ b/docs/frontend/business/color.md @@ -15,47 +15,13 @@ 固定组件配色直接使用 `/src/style/variables` 中的相关配色即可，与主题色相关的组件配色可以使用上文提及的三个主题配色。 ### 如何实现主题切换 -针对主题的切换，采用新组件 `theme-config` 。 +针对主题的切换，采用新组件 `theme-config`作为页面最外层的标签项。 >通过将整个页面包裹在该组件下，使得该组件的主题颜色能够控制整个页面的颜色渲染。 该组件的变量中的 `themeMode` 通过计算属性获取**全局存储变量** `serviceStore.theme.themeMode` ，它的值会改变组件选取的 `className` 选择不同主题色调。 -```scss -.theme.green { - --wjh-color-primary-light: var(--wjh-color-green-500); - --wjh-color-primary: var(--wjh-color-green-600); - --wjh-color-primary-dark: var(--wjh-color-green-700); - - background-image: url('~@/assets/photos/background.svg'); -} - -.theme.yellow { - --wjh-color-primary-light: var(--wjh-color-yellow-500); - --wjh-color-primary: var(--wjh-color-yellow-600); - --wjh-color-primary-dark: var(--wjh-color-yellow-700); - - background-image: url('~@/assets/photos/background-yellow.svg'); -} - -.theme.blue { - --wjh-color-primary-light: var(--wjh-color-blue-500); - --wjh-color-primary: var(--wjh-color-blue-600); - --wjh-color-primary-dark: var(--wjh-color-blue-700); - - background-image: url('~@/assets/photos/background-blue.svg'); -} - -.theme.pink { - --wjh-color-primary-light: var(--wjh-color-pink-500); - --wjh-color-primary: var(--wjh-color-pink-600); - --wjh-color-primary-dark: var(--wjh-color-pink-700); - - background-image: url('~@/assets/photos/background-pink.svg'); -} -``` - -通过改变 `themeMode` 的值，组件将会选取不同的主题色变量对整个页面进行渲染，同时会改变背景图片。 +>通过改变 `themeMode` 的值，组件将会选取不同的主题色变量对整个页面进行渲染，同时会改变背景图片。 ## 深色和浅色模式的切换 深色模式的实现同样与组件 `theme-config` 相关，同样通过该组件调取`hook`获得有关深色模式的**全局存储变量**。 @@ -66,56 +32,9 @@ 深色模式的 `hook` 定义在 `/src/hooks/useDarkMode.ts`中。 -```ts -const useDarkMode = () => { - const mode = computed(() => serviceStore.theme.darkMode.mode); - const isAdapted = computed(() => serviceStore.theme.darkMode.isAdapted); - - const handleModeChange = (e) => { - if (isAdapted.value === true) { - setMode(e.theme as DarkModeTheme); - } - }; - - const setIsAdapted = async (value: boolean) => { - store.commit("setDarkModeAdapted", value); - if (value === true) { - const sysInfo = await Taro.getSystemInfo(); - setMode(sysInfo.theme as DarkModeTheme); - } - }; - - const setMode = async (value: DarkModeTheme) => { - store.commit("setDarkMode", value); - }; - - onMounted(async () => { - if (isAdapted.value) { - const sysInfo = await Taro.getSystemInfo(); - setMode(sysInfo.theme as DarkModeTheme); - } - - Taro.onThemeChange(handleModeChange); - }); - - onUnmounted(() => { - Taro.offThemeChange(handleModeChange); - }); - - return { - mode, - isAdapted, - setMode, - setIsAdapted - }; -}; - -export default useDarkMode; -``` - 上述代码中`mode`获取全局变量中的模式设定值，来选择深浅色主题模式。 ->其中`isAdapted`用来判断是否设置自适应手机深浅模式，再通过 `Taro.getSystemInfo()` 函数来获取手机深色模式的设定值。 +>通过 `Taro.getSystemInfo()` 函数来监听手机深色模式的设定值。 通过调用此 `hook` 即可对深色模式进行三种切换--“深色模式”、“浅色模式”和“自适应模式”。