BioforestChain / dweb_browser

BioforestChain Infrastructure
https://docs.dweb-browser.org
MIT License
11 stars 4 forks source link

为dwebview实现强制的暗色模式 #96

Open Gaubee opened 6 months ago

Gaubee commented 6 months ago
  1. window 属性中需要新增一个字段:colorSchemeRenderer:ColorSchemeRenderer.Auto|ColorSchemeRenderer.Custom 来配置 ColorScheme 对应的渲染器,默认为 Auto
    1. ColorSchemeRenderer.Auto: 默认的渲染器,通过算法支持亮色和暗色模式。
      1. 算法暗色:DWebView 在该模式下,会使用 filter: invert(1) hue-rotate(166deg);做整体强制的颜色反转。img 元素会保持原色,但是会调暗图片颜色 filter: brightness(0.5);; 同时会给出一个特定的 cssName 来让开发者可以避免特定元素的颜色内容被反转
      2. 亮色算法:filter: invert(1) hue-rotate(180deg);
      3. 有可能网站本身提供的就是暗色模式,所以我们应该要求开发者提供 supportColorSchemes?: [ColorScheme.Dark, ColorScheme.Light] 这个字段.
        1. 如果该字段为 null,就当网站只提供了单配色支持,那么首先我们要判断网页支持的是亮色还是暗色。在进行切换的时候,获取当前网页的亮暗程度作为参考依据。这需要 dwebview 增加接口来实现明度的判断:dwebview.isBrightness (截图然后快速计算亮度)
        2. 对于无法截图的平台,有一种取舍的实现方法,就是遍历document.styleSheets[].rules[].conditionText === '(prefers-color-scheme: dark)'来判断项目是否有暗色模式代码的支持。缺点是 CSSStyleSheet 如果是跨域,那么 rules 是拿不到的,所以也不能完全判断出来;或者即便找到代码了,也可能误判,因为可能是死代码。
          function* allRules() {
          for (const ss of document.styleSheets) {
          try {
            for (const r of ss.rules) {
              yield r;
            }
          } catch (_e) {}
          }
          }
          for (const r of allRules()) {
          if (r.conditionText === "(prefers-color-scheme: dark)") {
          console.log(r);// can be break
          }
          }
    2. ColorSchemeRenderer.Custom: 可有通过 window.std.dweb 接口来修改成自定义渲染器,那么窗口内容的配色不会做任何自适应的变化,dwebview 则只是将 css 的 env 属性进行修改 (dwebview.setPrefersColorScheme(WebColorScheme.Dark/Light))。