记一次darkreader不生效问题排查

项目中需要使用多种样式，如下图

使用darkreader插件切换浅色和深色

样式请求跨域问题解决

import { setFetch } from 'darkreader';
setFetch((url) => {
const headers = new Headers();
headers.append('Access-Control-Allow-Origin', '*');
    return window.fetch(url, {
      headers,
      method: 'GET',
      mode: 'cors',
    });
});

解决safari上样式跨域问题

<link
  id="compactcss"
  rel="stylesheet"
  crossorigin="anonymous"
  href="..."
/>

解决在紧凑和宽松模式下切换时darkreader覆盖导致不生效问题

最开始是使用link 标签的 disable enable 属性来控制样式是否生效（MDN）

发现disabled的时候，浏览器并不会去加载css资源，导致darkreader没有生成对应的样式，但是切换的时后发现浏览器时发出请求的，但是darkreader一直收不到样式的onload事件，几经排查，确定disable和enable切换的时候，onload事件时监听不到的（包括修改src也是），导致darkreader一直没有重新生成对应的文件

浏览器 link标签切换 disable的时候会自动发请求

darkreader 监听的 link的onload 事件，但是disable的切换时 onload 事件是无法监听到的，所以一直处于waiting状态，导致无法插入对应的深色模式代码

最后解决方法，通过调整 style的位置（css样式总是同优先级时，总是后面的生效）达到生效的结果

const normal = document.getElementById('normalcss');
const compact = document.getElementById('compactcss');
if (modeValue === 2) {
  compact.after(normal);
} else {
  normal.after(compact);
}