# 問題背景
大部分手機主題上會有深色模式和淺色模式之分，淺色模式一般都是“白底黑字”，深色模式則是“黑底白字”。下圖是華為手機深色模式和淺色模式的介面效果：

- 圖1 淺色模式

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210209142006114.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

- 圖2  深色模式

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210209142018406.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

如何在快應用中實現不同主題模式的適配呢？目前有兩種方案：

- 使用MediaQuery響應式佈局能力，自動檢測使用者的裝置的系統主題模式，配置不同模式下的css樣式。

- 使用device.getThemeSync，根據獲取的結果選擇不同模式下的css樣式。

# 解決方案
## 方案一：MediaQuery響應式佈局（推薦）

華為快應用[響應式佈局](https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-common-settings)中媒體特徵（Media Feature）型別提供了prefers-color-scheme欄位：檢測使用者的系統主題，支援的屬性值有light和dark模式，對應手機的淺色主題和深色主題。開發者只需要在程式碼中配置兩種模式下的css樣式即可，快應用引擎會根據系統主題模式自動呼叫不同的css。具體實現程式碼如下：

```java
<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>
 
<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>

教你實現華為快應用深色主題適配

相關文章