H5 暗色模式的适配方案

网页语言：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>

最后编辑于：2020.02.25 18:09:58