网页语言：vue
代码示例：vue+iOS
WKwebview
H5的暗色模式都是基于CSS样式的修改来适配web内容,主要方式有以下两种
一、动态改变css样式
以适配div字体颜色为例，代码如下：
HTML代码
<div id="app">
4.选择配置，看个人项目需求
注意，空格键是选中与取消，A键是全选
TypeScript 支持使用 TypeScript 书写源码
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router 。
Vuex 支持 vuex 。
CSS Pre-processors 支持 CSS 预处理器。
Linter / Formatter 支持代码风格检查和格式化。
Unit Testing 支持单元测试。
E2E Testing 支持 E2E 测试
</div>
css代码
@media (prefers-color-scheme: dark) {
:root {
--post-app-color: #42b983;
--post-body-color: yellow;
}
}
@media (prefers-color-scheme: light) {
:root {
--post-app-color: black;
--post-body-color:white;
}
}
#app {
color: var(--post-app-color);
}
body{
background-color:var(--post-body-color);
}
由代码可知，首先使用prefers-color-scheme声明两种模式的css，然后动态为div字体颜色赋值。即可完成html网页适配。
注：此方案虽然简单但是此种方法只适用于苹果的webview对于安卓的webview却不起任何作用.
二、直接使用两套css
1、先在网页加载完成的回调中或模式切换的监听方法中告诉JS当前处于什么模式，代码如下：
OC与JS交互
#pragma OC调用JS的方法 str：true/false（是否为暗色模式）
- (void)ocTakeJsMethodWithStr:(NSString*)str
{
//OC调js的方法告诉网页当前处于什么模式
NSString *isDarkMode = [NSString stringWithFormat:@"isDarkMode('%@')",str];
NSLog(@"模式：：：%@",isDarkMode);
[self.webView evaluateJavaScript:isDarkMode completionHandler:^(id _Nullable name, NSError * _Nullable error) {
NSLog(@"模式方法调用完成回调---%@---%@",name,error);
}];
}
2、H5 根据当前的模式来选择使用那一套css
HTML代码
<div>
<div v-if="this.isDark" class="currentMode-Dark" >{{mes}}</div>
<div v-else class="currentMode-light">{{mes}}</div>
</div>
JS代码
<script>
var page;
export default {
data() {
return {
isDark:false,
mes:"和就的啦啦啦啦啦啦啦啦啦啦啦啦"
}
},
created(){
page = this;
window.isDarkMode = this.isDarkMode ;
},
methods: {
isDarkMode(v){
if (v == "true") {
page.isDark = true;
page.mes = "当前模式为暗色模式"
}else{
page.isDark = false;
page.mes = "当前模式为亮色模式"
}
}
},
}
</script>
css代码
<style lang="less">
.currentMode-Dark{
background-color: red;
}
.currentMode-light{
background-color: indigo;
}
</style>
网友评论