油猴脚本-微信文章dark模式影响阅读

d发现微信公众号文章一到晚上就是dark模式，阅读太讨厌了，很不舒服，没有阅读的兴致。

想着写个油猴处理一下。

1. 把浏览器的主题改成了浅色主题。

2. 针对页面看下到底是哪些样式导致的。

看到了 prefer-color-scheme的媒体查询，以及 [data-weui-theme=dark] 的属性选择器。

关于prefer-color-scheme，这里有介绍说明：CSS color-scheme 和夜间模式 - 掘金

这个更多的是通过css来给用户提供dark模式，我前面都把浏览器主题改成浅色了，怎么还会匹配上dark呢？找了几篇文章不得其解，后来看了下mac系统设置，我在外观上选了自动。原来小丑竟是我自己，选“浅色”就正常了。

但这不是我想要的结果，说好的写脚本呢，系统的配置我还是保留，既然prefer-color-scheme我们搞不了，那且浅看下[data-weui-theme=dark]这个属性选择器。

其实呢，默认情况下，body是不会带这个属性的。

但是通过手动给它加上属性并设置成light，大部分样式都恢复到浅色了【注意是大部分】

有些块好像自带了js_darkmode__x的样式，暂时不清楚怎么回事，那就先手动移除吧。

于是脚本的基本逻辑也就清晰了：

页面加载->给body添加data-weui-theme: light -> 把带js_darkmode__1的移除掉样式->搞定

为了减少白天重复劳作，再加个判断是否在dark模式：

function isDarkMode(){
 return window.matchMedia('(prefers-color-scheme: dark)').matches;
}

 脚本很简单，如下：当然对于js_darkmode__xxx那块不深究处理了。

// ==UserScript==
// @name         wechat article for light
// @namespace    http://tampermonkey.net/
// @version      2024-04-11
// @description  try to take over the world!
// @author       You
// @match        https://mp.weixin.qq.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=weixin.qq.com
// @grant        none
// ==/UserScript==
function change2Light(){
  document.querySelector('body').setAttribute('data-weui-theme', 'light');
  [].map.call(document.querySelectorAll('.js_darkmode__1'), $dom=>{
   $dom.classList.remove('js_darkmode__1');
  })
}
function isDarkMode(){
 return window.matchMedia('(prefers-color-scheme: dark)').matches;
}
(function() {
    'use strict';
    if(isDarkMode()){
        change2Light();
    }
})();

补充：对于js_darkmode__的处理也很简单：

[].map.call(document.querySelectorAll('[class^="js_darkmode__"]'), $dom=>{
   const cls = $dom.classList.value.replace(/js_darkmode__/g, "r_js_darkmode__")
   $dom.classList = cls;
  })