问题背景

大部分手机主题上会有深色模式和浅色模式之分，浅色模式个别都是“白底黑字”，深色模式则是“黑底白字”。下图是华为手机深色模式和浅色模式的界面成果：

图1 浅色模式

图2 深色模式

如何在快利用中实现不同主题模式的适配呢？目前有两种计划：

应用MediaQuery响应式布局能力，自动检测用户的设施的零碎主题模式，配置不同模式下的css款式。
应用device.getThemeSync，依据获取的后果抉择不同模式下的css款式。

解决方案

计划一：MediaQuery响应式布局（举荐）

华为快利用响应式布局中媒体特色（Media Feature）类型提供了prefers-color-scheme字段：检测用户的零碎主题，反对的属性值有light和dark模式，对应手机的浅色主题和深色主题。开发者只须要在代码中配置两种模式下的css款式即可，快利用引擎会依据零碎主题模式主动调用不同的css。具体实现代码如下：

<template>    <!-- Only one root node is allowed in template. -->    <div class="container">        <text class="title">            Hello {{title}}        </text>    </div></template> <style>    .container {        flex-direction: column;        justify-content: center;        align-content: center;        align-items: center;    }     .title {        font-size: 100px;    }     /**浅色主题css */    @media (prefers-color-scheme: light) {        .container {            flex-direction: column;            justify-content: center;            align-content: center;            align-items: center;          }         .title {            font-size: 100px;            color: #000000;        }    }     /**深色主题css*/    @media (prefers-color-scheme: dark) {        .container {            flex-direction: column;            justify-content: center;            align-content: center;            align-items: center;            background-color: #000000;        }        .title {            font-size: 100px;            color: #ffffff;        }    }</style> <script>    module.exports = {        data: {            title: 'World',            titleBar: ''        },        onInit: function () {            this.titleBar = this.titleBarText;            console.log("onInit titleBar= " + this.titleBar);            this.$page.setTitleBar({ text: this.titleBar });        },    }</script>

长处：实现简略，代码少，开发者只须要配置响应式布局中dark和light的css，无需手动管制调用不同主题模式下的css。

计划二：应用device.getThemeSync

步骤1：获取设施的主题模式

可应用device.getThemeSync接口返回值取得，举荐在全局app.ux中实现并将后果保留，对外提供getThemeMode()办法不便每个页面的ux获取主题后果。

app.ux代码如下：

  <script>  import device from '@system.device';  module.exports = {    data: {          thememode:''    },     onCreate () {      setTimeout(() => {         let theme=device.getThemeSync();      //{"darkMode":false,"title":"Painted Planet","titleCn":"大地彩绘","author":"EMUI","designer":"EMUI","version":"10.0.7","font":"Default","fontCn":"默认"}       console.info("onCreate theme="+JSON.stringify(theme));       if(theme.darkMode){         this.thememode='darkMode';       }else{         this.thememode='lightMode';       }      }, 100);    },    onDestroy() {      console.info('Application onDestroy');    },      getThemeMode(){          return this.thememode;      }  }</script>

步骤2：页面适配

页面须要实现深色和浅色主题模式下的css款式，依据步骤1返回的后果抉择不同的css款式。上面示例代码.container和.item是浅色主题下的css款式， . containerDarkMode和 . itemDarkMode 是深色主题下的css款式。页面在生命周期onInit()办法中依据获取到的设施主题模式抉择不同的css款式。代码如下：

<template>  <!-- Only one root node is allowed in template. -->  <div class="{{containercss}}">    <input class="{{itemcss}}" type="button" value="a组件切换页面" onclick="jumpApage" />    <input class="{{itemcss}}" type="button" value="router接口切换页面" onclick="jumpRouterPage" />  </div></template> <style>  .container {    flex-direction: column;    margin-top: 50px;    align-content: center;    align-items: center;  }   .containerDarkMode {    flex-direction: column;    margin-top: 50px;    align-content: center;    align-items: center;    background-color: #000000;  }   .item {    background-color: #00bfff;    color: #f8f8ff;    font-size: 37px;    width: 50%;    height: 100px;    margin-bottom: 20px;  }   .itemDarkMode {    background-color: #add8e6;    color: #f8f8ff;    font-size: 37px;    width: 50%;    height: 100px;    margin-bottom: 20px;  }</style> <script>  import router from '@system.router';  module.exports = {    data: {      title: 'World',      containercss: 'container',      itemcss: 'item'    },     onInit: function () {      console.info("onInit");      var thememode = this.$app.$def.getThemeMode();      console.info("onInit thememode=" + thememode);      if (thememode === 'darkMode') {        console.info("change dark mode");        this.containercss = 'containerDarkMode';        this.itemcss = 'itemDarkMode';      } else {        this.containercss = 'container';        this.itemcss = 'item';      }},     onDestroy: function () {      console.info("onDestroy");    },     jumpRouterPage: function () {      router.push({        uri: 'SwitchPage/Router',        params: { body: " test send message" },      })    },     jumpApage: function () {      router.push({        uri: 'SwitchPage/Apage',        params: { body: " test send message" },      })    },  }</script>

此计划绝对计划一略微简单一点，须要开发者本人去管制css款式抉择。

欲了解更多详情，请参见：

快利用开发领导文档：https://developer.huawei.com/consumer/cn/doc/development/quickApp-Guides/quickapp-whitepaper

原文链接：https://developer.huawei.com/consumer/cn/forum/topic/0201404994231590237?fid=18

原作者：Mayism