写点什么

鸿蒙 next 实现应用内的暗黑模式切换

作者:flfljh
  • 2024-11-05
    湖南
  • 本文字数:1536 字

    阅读完需:约 5 分钟

鸿蒙 next 实现应用内的暗黑模式切换

实现暗黑模式的大致思路是利用 @Provider 与 @Consume 共享一个 lightMode 变量,在页面创建时读取持久化的 lightMode,来实现暗黑模式。

1.在 Entry 页面使用 @Provide 注解 lightMode

@Entry@Componentstruct QuickTestMainPage {    @Provide lightMode: boolean = true; //true 日间模式 false 夜间模式}
复制代码

2.在 aboutToAppear 中读取持久化变量 lightMode

import { StyleFit } from './utils/StyleFit';
@Entry@Componentstruct QuickTestMainPage { @Provide lightMode: boolean = true; //true 日间模式 false 夜间模式 aboutToAppear() { this.lightMode = StyleFit.getLightMode(); }}
复制代码


export class StyleFit {  private static lightMode: boolean = true; // true 日间模式 false 夜间模式
static init() { PreferencesUtil.getString("light_mode").then(value => { if (value == "1" || value == "") { /// 日间模式 StyleFit.lightMode = true; } else { // 夜间模式 StyleFit.lightMode = false; } }) } static setLightMode(value: boolean) { StyleFit.lightMode = value; PreferencesUtil.putSync("light_mode", value ? "1" : "0"); }
static getLightMode() { return StyleFit.lightMode; }}
复制代码

3.封装工具类 StyleRes 来统一颜色 token 管理。

export enum StyleColor {  backgroundColor, // 背景色  pageColor, // 页面颜色  cardBgColor, // 悬浮卡片背景色  cardBgActiveColor, // 悬浮卡片背景色激活态颜色  textNormalColor, // 普通文字颜色  textBoldColor, // 加粗文字颜色  blackTextActiveColor, // 日间黑色激活文本颜色  texSubColor, // 次文字颜色  shadowColor, // 阴影颜色
}

export class StyleRes { static getStyleColor(styleColor: StyleColor, lightMode: boolean) { let color = "#ffffffff";
switch (styleColor) { case StyleColor.backgroundColor: color = lightMode ? "#ffffffff" : "#FF191B27"; break; case StyleColor.pageColor: color = lightMode ? "#fff7f8fb" : "#FF191B27"; break; case StyleColor.cardBgColor: color = lightMode ? "#ffffffff" : "#FF292B38"; break; case StyleColor.cardBgActiveColor: color = lightMode ? "#FFE0EFFF" : "#FF162741"; break; case StyleColor.textNormalColor: color = lightMode ? "#FF465069" : "#FF999FB5"; break; case StyleColor.textBoldColor: color = lightMode ? "#FF191B27" : "#FF999FB5"; break; case StyleColor.blackTextActiveColor: color = lightMode ? "#FF191B27" : "#FF0080FF"; break; case StyleColor.texSubColor: color = lightMode ? "#FF465069" : "#FF999FB5"; break; case StyleColor.shadowColor: color = lightMode ? "#14000000" : "#FF222634"; break;
}
return color; }}
复制代码

4.在需要暗黑模式 ui 的地方.

使用代码: StyleRes.getStyleColor(StyleColor.textBoldColor, this.lightMode)


import { StyleColor, StyleRes } from './utils/StyleRes';
@Componentstruct BotoomTool { @Consume lightMode: boolean; build() { Column() { } .backgroundColor(StyleRes.getStyleColor(StyleColor.backgroundColor, this.lightMode)) }}
复制代码


发布于: 刚刚阅读数: 4
用户头像

flfljh

关注

还未添加个人签名 2024-10-29 加入

还未添加个人简介

评论

发布
暂无评论
鸿蒙 next 实现应用内的暗黑模式切换_鸿蒙_flfljh_InfoQ写作社区