主题与外观-Cordovaopenharmony多主题切换

一、功能概述

不同用户有不同的审美偏好。"主题与外观"模块提供多种主题选择（如浅色、深色、自动等），让用户可以根据自己的喜好定制应用的外观。本篇文章围绕"主题与外观"展开，介绍如何在Cordova Web 层实现主题切换，并通过OpenHarmony ArkTS 插件提供原生主题应用。

我们继续采用"一段代码一段说明"的写作方式，并包含 ArkTS 示例代码。

二、Web 端主题选择界面

<divid="theme-page"class="page page-theme"><h1>主题与外观</h1><divclass="theme-options"><labelclass="theme-option"><inputtype="radio"name="theme"value="light"/><span>浅色主题</span></label><labelclass="theme-option"><inputtype="radio"name="theme"value="dark"checked/><span>深色主题</span></label><labelclass="theme-option"><inputtype="radio"name="theme"value="auto"/><span>跟随系统</span></label></div><divclass="theme-preview"><h3>预览</h3><divclass="preview-card">这是一个示例卡片</div></div></div>

这段 HTML 定义了主题选择页面的结构。用户可以选择浅色、深色或自动跟随系统主题，下方有一个预览区域展示当前主题效果。

.page-theme{padding:16px 24px;}.theme-options{background:#374151;padding:12px;border-radius:4px;margin-bottom:16px;}.theme-option{display:flex;align-items:center;padding:8px 0;cursor:pointer;}.theme-option input{margin-right:8px;}.theme-preview{background:#374151;padding:12px;border-radius:4px;}.preview-card{background:#1f2937;padding:16px;border-radius:4px;margin-top:8px;}/* 浅色主题 */.theme-light{--bg-primary:#ffffff;--bg-secondary:#f5f5f5;--text-primary:#000000;--text-secondary:#666666;}/* 深色主题 */.theme-dark{--bg-primary:#1f2937;--bg-secondary:#374151;--text-primary:#ffffff;--text-secondary:#cccccc;}

CSS 定义了浅色和深色主题的颜色变量，通过 CSS 变量实现主题切换。

三、主题切换逻辑

asyncfunctionloadTheme(){constsettings=awaitdb.getSettings();consttheme=settings.theme||'dark';document.querySelectorAll('input[name="theme"]').forEach((radio)=>{radio.checked=radio.value===theme;});applyTheme(theme);}functionapplyTheme(theme){document.documentElement.classList.remove('theme-light','theme-dark','theme-auto');if(theme==='auto'){constprefersDark=window.matchMedia('(prefers-color-scheme: dark)').matches;document.documentElement.classList.add(prefersDark?'theme-dark':'theme-light');}else{document.documentElement.classList.add(`theme-${theme}`);}}asyncfunctionsaveTheme(theme){constsettings=awaitdb.getSettings();settings.theme=theme;awaitdb.saveSettings(settings);applyTheme(theme);syncThemeToNative(theme);}

loadTheme从数据库中读取已保存的主题，并应用到页面。applyTheme通过添加 CSS 类来切换主题。saveTheme保存主题选择并同步到原生侧。

document.addEventListener('DOMContentLoaded',()=>{loadTheme();document.querySelectorAll('input[name="theme"]').forEach((radio)=>{radio.addEventListener('change',(e)=>{saveTheme(e.target.value);});});});

在DOMContentLoaded时加载主题，并为单选按钮绑定变化事件。

四、通过 Cordova 同步主题到原生层

functionsyncThemeToNative(theme){if(!window.cordova){console.warn('[Theme] cordova not ready, skip native sync');return;}cordova.exec(()=>{console.info('[Theme] sync success');},(err)=>{console.error('[Theme] sync failed',err);},'WaterTrackerTheme','applyTheme',[{theme}]);}

syncThemeToNative将主题选择推送给 ArkTS 插件。

五、OpenHarmony ArkTS 插件与主题管理

// entry/src/main/ets/plugins/WaterTrackerThemePlugin.etsimportcommonfrom'@ohos.app.ability.common';exportinterfaceThemeData{theme:string;}exportclassThemeStore{privatestatic_currentTheme:string='dark';staticsetTheme(theme:string){this._currentTheme=theme;}staticgetcurrentTheme(){returnthis._currentTheme;}}exportdefaultclassWaterTrackerThemePlugin{context:common.UIAbilityContext;constructor(ctx:common.UIAbilityContext){this.context=ctx;}applyTheme(args:Array<Object>,callbackId:number){constdata=args[0]asThemeData;ThemeStore.setTheme(data.theme);console.info(`[ThemePlugin] theme applied:${data.theme}`);}}

ArkTS 侧的WaterTrackerThemePlugin插件接收主题数据，并通过ThemeStore缓存。

六、ArkUI 中应用主题

// entry/src/main/ets/pages/ThemePage.etsimport{ThemeStore}from'../plugins/WaterTrackerThemePlugin';@Componentstruct ThemeView{build(){consttheme=ThemeStore.currentTheme;Column(){Text('当前主题').fontSize(18).margin({bottom:8});Text(`${theme==='light'?'浅色':theme==='dark'?'深色':'自动'}主题`).fontSize(14);}.padding(16)}}

ThemeView组件在原生界面中展示当前主题。

七、小结

本篇文章从主题加载、主题切换、Cordova 桥接到 ArkTS 插件，完整演示了"主题与外观"在 Cordova&openharmony 混合应用中的实现路径。Web 层通过loadTheme加载主题，通过applyTheme应用主题，通过saveTheme保存主题；syncThemeToNative将主题推送给原生侧，ArkTS 侧通过ThemeStore和WaterTrackerThemePlugin缓存数据，ArkUI 组件ThemeView则提供原生展示入口。

通过"一段代码一段说明"的方式，我们把整个主题切换流程拆解得足够细致。你可以在此基础上进一步扩展，例如添加更多主题选项、自定义颜色等功能，让"主题与外观"真正成为用户个性化应用的重要组成部分.