浏览器主题切换工具DarkReader

小迪dj

已于 2023-09-05 15:54:13 修改

阅读量904

点赞数

文章标签：前端

于 2023-09-05 15:40:58 首次发布

本文链接：https://blog.csdn.net/qq_62291805/article/details/132692844

版权

相信很多小伙伴在开发过程中，难免会遇到给项目添加暗色主题的需求。（呜呜呜我就是那个手敲css一个多月改主题的怨种。）

那么，有没有一款工具能够自动给浏览器批量设置主题风格呢？当然！那就是Darkreader插件了。

直接在微软插件商店搜索安装即可。安装之后可以自己配置风格。

那么如何把这个插件应用到我们的项目中呢？npm官网地址如下

darkreader - npm (npmjs.com)

在这里有详细的安装教程。大致分为以下几步：

1、安装darkreader包

npm install darkreader

或者

yarn add darkreader

2、在项目中引入模块

import {
  enable as enableDarkMode,
  disable as disableDarkMode,
  auto as followSystemColorScheme,
  exportGeneratedCSS as collectCSS,
  isEnabled as isDarkReaderEnabled,
  setFetchMethod as setDarkReaderFetchMethod,
} from 'darkreader';

3、启用暗色主题，参数对应亮度，饱和度，色调，可以自行调节（个人感觉默认参数最好看）。

enableDarkMode({
      //亮度
      brightness: 100,
      //饱和度
      contrast: 90,
      //色调
      sepia: 10,
    });

4、关闭暗色主题。

disableDarkMode();

5、在启用暗色时，打开控制台会发现报错了。如下图

这个错误通常是由于跨域资源共享（CORS）策略引起的。浏览器会限制从一个源（网站）加载的Web页面或脚本如何与来自不同源的资源进行交互。在这种情况下，DarkReader无法访问来自不同源的资源，因此会报错。设置 fetch 方法可以解决这个问题。

我们可以使用darkreader包中的setFetchMethod方法解决这个报错。

import {
    enable as enableDarkMode,
    disable as disableDarkMode,
    setFetchMethod as setDarkReaderFetchMethod,//新增
} from 'darkreader';

然后在加载暗色主题代码前方设置一下即可。

//解决跨域报错
 setDarkReaderFetchMethod(window.fetch);
  enableDarkMode({
    //亮度
    brightness: 100,
    //饱和度
    contrast: 90,
    //色调
    sepia: 10,
  });

这样控制台就不会出现报错啦！

有什么问题可以卸载评论区哦！大家共同讨论！