The problem background
Most mobile themes have dark mode and light mode. Light mode is usually “black text on a white background”, and dark mode is “white text on a black background”. The following is the interface effect of huawei mobile phone in dark mode and light mode:
- Figure 1 Light-colored pattern
- Figure 2. Dark mode
How to achieve the adaptation of different theme modes in fast application? There are currently two options:
-
Use MediaQuery responsive layout capabilities to automatically detect system theme patterns for users’ devices and configure CSS styles for different patterns.
-
Use device.getthemesync to select CSS styles in different modes based on the results obtained.
The solution
Solution 1: MediaQuery Responsive Layout (recommended)
The Media Feature in the responsive layout of Huawei Quick Applications provides the PREFERent-color-scheme field: Detects the user’s system theme. The supported values include light and Dark modes, and corresponds to the light and dark themes of the mobile phone. Developers only need to configure CSS styles in the two modes in the code, and the fast application engine will automatically call different CSS styles according to the system theme mode. The specific implementation code is as follows:
<template> <! -- Only one root node is allowed in template. --> <divclass="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;
}
/** Light-colored theme 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; }}/** Dark theme 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>
Copy the codeAdvantages: simple implementation, less code, developers only need to configure dark and light CSS in responsive layout, no need to manually control the invocation of CSS in different theme modes.
Solution 2: Use device.getThemeSync
Step 1: Get the theme mode of the device
GetThemeSync interface return value, it is recommended to implement in global app.ux and save the result, external provide getThemeMode() method to facilitate the UX of each page to obtain the topic result.
The code for app.ux is as follows:
<script>
import device from '@system.device';
module.exports = {
data: {
thememode:' '
},
onCreate () {
setTimeout(() => {
let theme=device.getThemeSync();
//{"darkMode":false,"title":"Painted TitleCn Planet ", "" :" the painted ", "author" : "EMUI", "designer" : "EMUI", "version" : "10.0.7", "the font" : "Default", "fontCn" : "Default"}
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>
Copy the codeStep 2: Page adaptation
The page needs to implement CSS styles in dark and light theme modes. Select different CSS styles based on the result returned in Step 1. Container and. Item are CSS styles with a light theme,.containerDarkMode and.itemDarkMode are CSS styles with a dark theme. The page selects different CSS styles in the lifecycle onInit() method, based on the device theme mode obtained. The code is as follows:
<template> <! -- Only one root node is allowed in template. --> <divclass="{{containercss}}">
<input class="{{itemcss}}" type="button" value="A Component Switching page" onclick="jumpApage" />
<input class="{{itemcss}}" type="button" value="Router Interface Switching Page" 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>
Copy the codeThis solution is slightly more complex than solution 1, and requires the developer to control the CSS style selection.
For more details, see:
Faster application development guide: developer.huawei.com/consumer/cn…
The original link: developer.huawei.com/consumer/cn…
Original author: Mayism