此文章内容兼容API12，使用harmony next应用开发
黑白/深浅 主题换肤
华为官方支持自动切换深浅主题，适配很简单
1，将深浅主题的 color 和图像，分别放到对应的文件夹中，对应的深浅资源的命名必须一致
主题切换资源结构
深色模式下，如果系统找不到对应的深色资源，则仍然展示浅色资源
svg 图片，可以直接设置fillColor实现系统资源改变图片的绘制颜色。不通过两套图片资源的方式，也可以实现深浅色模式适配。
Image($r('app.media.pic_svg'))
.width(50)
.fillColor($r('sys.color.ohos_id_color_text_primary'))
2，用户选择不同的主题后，手动切换
public changeColorMode(colorMode: number) {
if (this.ability) {
if (colorMode == 0) {//默认
this.ability.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);
} else if (colorMode == 0) {//深色
this.ability.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_DARK);
} else {//浅色
this.ability.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT);
}
}
}
3，（可选）换肤监听
（1）初始化
//AbilityStage
onCreate(): void {
AppStorage.setOrCreate('currentColorMode', this.context.config.colorMode);
}
（2）触发
onConfigurationUpdate(newConfig: Configuration): void {
AppStorage.setOrCreate('currentColorMode', newConfig.colorMode);
}
（3）监听
//page 中
...
@StorageProp('currentColorMode') @Watch('onColorModeChange') currentMode: number = ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT;
onColorModeChange(): void {
if (this.currentMode == ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT) {
//切换为浅色模式
}else {
//切换为深色模式
}
}
...
4，web网页深浅适配
（1）如果h5根据不同 url 适配深浅皮肤，则在换肤监听时，动态加载url即可
（2）若网页已定义深色模式，使用 darkMode 配置，会自动更改
当深色模式开启时，Web将启用媒体查询prefers-color-scheme中网页所定义的深色样式，若网页未定义深色样式，则保持原状
（3）darkMode 通常搭配 forceDarkAccess()使用
- WebDarkMode.Off模式表示关闭深色模式。
- WebDarkMode.On表示开启深色模式，并且深色模式跟随前端页面。
- WebDarkMode.Auto表示开启深色模式，并且深色模式跟随系统
// xxx.ets
import { webview } from '@kit.ArkWeb';
@Entry
@Component
struct WebComponent {
controller: webview.WebviewController = new webview.WebviewController();
@State mode: WebDarkMode = WebDarkMode.On;
@State access: boolean = true;
build() {
Column() {
Web({ src: $rawfile('index.html'), controller: this.controller })
.darkMode(this.mode)
.forceDarkAccess(this.access)
}
}
}
