首页 > 其他分享 >鸿蒙 next 实现应用内的暗黑模式切换

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

时间:2024-11-05 20:17:44浏览次数:6  
标签:case lightMode 鸿蒙 color StyleFit next break StyleColor 暗黑

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

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

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

@Entry
@Component
struct QuickTestMainPage { 
   @Provide lightMode: boolean = true; //true 日间模式 false 夜间模式
}

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

import { StyleFit } from './utils/StyleFit';

@Entry
@Component
struct 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';

@Component
struct BotoomTool {
    @Consume lightMode: boolean;
  
    build() {
      Column() {
      }
      .backgroundColor(StyleRes.getStyleColor(StyleColor.backgroundColor, this.lightMode))
    }
}

标签:case,lightMode,鸿蒙,color,StyleFit,next,break,StyleColor,暗黑
From: https://blog.51cto.com/u_17100710/12462989

相关文章

  • 覆盖80%业务场景,原生鸿蒙出行、教育行业样板间专区上线
    华为原生鸿蒙之夜获得广泛关注,华为官宣鸿蒙生态设备数量已超过10亿台,鸿蒙原生应用和元服务数量已超过15000个,鸿蒙生态已进入飞速发展阶段。为更好地助力各行业开发者降本提效开发鸿蒙原生应用和元服务,华为开发者联盟生态市场(简称生态市场)近日上线了原生鸿蒙出行行业、教育行业“样......
  • 覆盖80%业务场景,原生鸿蒙出行、教育行业样板间专区上线
    华为原生鸿蒙之夜获得广泛关注,华为官宣鸿蒙生态设备数量已超过10亿台,鸿蒙原生应用和元服务数量已超过15000个,鸿蒙生态已进入飞速发展阶段。为更好地助力各行业开发者降本提效开发鸿蒙原生应用和元服务,华为开发者联盟生态市场(简称生态市场)近日上线了原生鸿蒙出行行业、教育行业“样......
  • 鸿蒙开发进阶(HarmonyOS )加速Web页面的访问
     鸿蒙NEXT开发实战往期必看文章:一分钟了解”纯血版!鸿蒙HarmonyOSNext应用开发!“非常详细的”鸿蒙HarmonyOSNext应用开发学习路线!(从零基础入门到精通)HarmonyOSNEXT应用开发案例实践总结合(持续更新......)HarmonyOSNEXT应用开发性能优化实践总结(持续更新......)当Web页......
  • 鸿蒙HarmonyOS(ArkTS基础-1)
    文章目录HarmonyOS鸿蒙开发ArkTS语言1.初识ArkTS语言a.ArKTS是什么b.ArkTS的编程规范c.从Ts到ArkTS的注意点2.ArkTS的基本语法a.声明b.类型c.运算符d.语句HarmonyOS鸿蒙开发(本文档是在鸿蒙开发者文档的基础上,选取了最常用的一些关键语法,以及一些注释,可......
  • 鸿蒙系统崛起:开发者的机遇、挑战与战略
    随着科技的迅猛发展,鸿蒙操作系统以其独特的分布式架构和多设备协同能力,在全球操作系统市场中脱颖而出。它不仅与安卓和iOS形成了三足鼎立之势,还在智能手机、智能穿戴、车载系统以及智能家居等多个领域中获得了广泛应用。面对这一新兴生态系统,开发者如何抓住机遇,同时应对开发中......
  • 鸿蒙Next安全控件深度揭秘:粘贴与保存控件全解析
    本文旨在深入探讨华为鸿蒙HarmonyOSNext系统(截止目前API12)在开发多语言电商平台方面的技术细节,基于实际开发实践进行总结。主要作为技术分享与交流载体,难免错漏,欢迎各位同仁提出宝贵意见和问题,以便共同进步。本文为原创内容,任何形式的转载必须注明出处及原作者。在鸿蒙Next......
  • 鸿蒙Next安全访问新范式:系统Picker与安全控件解析
    本文旨在深入探讨华为鸿蒙HarmonyOSNext系统(截止目前API12)在开发多语言电商平台方面的技术细节,基于实际开发实践进行总结。主要作为技术分享与交流载体,难免错漏,欢迎各位同仁提出宝贵意见和问题,以便共同进步。本文为原创内容,任何形式的转载必须注明出处及原作者。在当今数字化......
  • 【鸿蒙开发】—— 选项卡 (Tabs)
    ......
  • 【鸿蒙开发】—— 创建轮播 (Swiper)
    ......
  • 【鸿蒙南向开发】OpenHarmony驱动框架HDF中设备管理服务构建过程详解(二)
    ......