DarkModePage：主题选择 + 浅色/深色预览卡片

前言“海风日记“的深色模式页面支持跟随系统、浅色模式和深色模式三种主题选择并提供浅色/深色预览卡片。本文将从DarkModePage.ets源码出发深入讲解主题选择和预览的实现。一、主题选择State darkMode: number 0 // 0跟随系统, 1浅色, 2深色 ForEach([ { label: 跟随系统, desc: 随系统深色/浅色模式自动切换, icon: $r(sys.symbol.circle) }, { label: 浅色模式, desc: 始终使用暖白色主题, icon: $r(sys.symbol.sun_max) }, { label: 深色模式, desc: 始终使用深色护眼主题, icon: $r(sys.symbol.moon) }, ], (item, i) { Row({ space: 12 }) { SymbolGlyph(item.icon).fontSize(20).fontColor([this.darkMode i ? COLOR_PRIMARY : COLOR_AMBER]) Column({ space: 2 }) { Text(item.label).fontSize(14).fontColor(COLOR_TEXT_MAIN) Text(item.desc).fontSize(11).fontColor(COLOR_TEXT_HINT) } if (this.darkMode i) { SymbolGlyph($r(sys.symbol.checkmark_circle_fill)).fontSize(20).fontColor([COLOR_PRIMARY]) } } .onClick(() { this.darkMode i }) })二、自动切换State autoDark: boolean false Row() { Column({ space: 2 }) { Text(日落时自动切换).fontSize(14).fontColor(COLOR_TEXT_MAIN) Text(日出后切换为浅色日落后切换为深色).fontSize(11).fontColor(COLOR_TEXT_HINT) } Toggle({ type: ToggleType.Switch, isOn: this.autoDark }) .onChange((v) { this.autoDark v }).selectedColor(COLOR_PRIMARY) }三、浅色/深色预览Row({ space: 12 }) { // 浅色预览 Column({ space: 8 }) { Column().width(100%).height(80) .backgroundColor(COLOR_CARD_BG).borderRadius(10) .border({ width: 2, color: this.darkMode 1 ? COLOR_PRIMARY : COLOR_INPUT_BORDER }) Text(浅色).fontSize(12).fontColor(COLOR_TEXT_SECONDARY) } // 深色预览 Column({ space: 8 }) { Column().width(100%).height(80) .backgroundColor(COLOR_DARK_CARD_BG).borderRadius(10) .border({ width: 2, color: this.darkMode 2 ? COLOR_PRIMARY : COLOR_INPUT_BORDER }) Text(深色).fontSize(12).fontColor(COLOR_TEXT_SECONDARY) } }四、颜色常量export const COLOR_DARK_CARD_BG #1A1A1F // 深色模式卡片背景五、总结本文通过“海风日记“的深色模式页面深入讲解了主题选择和预览的实现三种主题跟随系统、浅色、深色自动切换日落时自动切换预览卡片浅色/深色对比选中标记checkmark_circle_fill下一篇文章将深入讲解SpaceManagePage 空间管理敬请期待。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Toggle 组件文档SymbolGlyph 文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区