乐趣区

关于android:教你实现华为快应用深色主题适配

jiezi

问题背景

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

  • 图 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

退出移动版