内容摘要：前言苹果的“暗黑模式”带来了全然一新的外观，它能使您的眼睛放松，并有助于您专心工作。暗黑模式使用一种较深的配色方案，这种配色作用于整个系统，现在大部分网站也加入了暗黑模式，包括

前言

苹果的使用式“暗黑模式”带来了全然一新的外观，它能使您的监听眼睛放松，并有助于您专心工作。系统暗黑模式使用一种较深的黑模配色方案，这种配色作用于整个系统，使用式现在大部分网站也加入了暗黑模式，监听包括 Tailwindcss、系统antd design 等都支持了暗黑模式，云服务器提供商黑模因此我们的使用式网站也要适配系统皮肤。

css 实现

暗模式传统上是监听通过使用 prefers-color-scheme 媒体查询来实现的，当暗黑模式被激活时，系统它可以重新应用一套样式。黑模

body {

color: black;

background: white;

}

@media (prefers-color-scheme: dark) {

body {

color: white;

background: black;

}

}

React hooks 实现

前端页面中除了使用 css 实现外，使用式还有很大部分是监听使用 JavaScript 实现的，服务器租用比如 echarts 图表等，系统这时就需要使用 JavaScript， 可以使用window.matchMedia[1] 来获取皮肤颜色。我们可以把这个逻辑写成一个自定义 hooks

import { useEffect, useState } from "react"

export type ThemeName = "light" | "dark"

function useTheme() {

const [themeName, setThemeName] = useState("light")

useEffect(() => {

// 设置初始皮肤

if (window.matchMedia("(prefers-color-scheme: dark)").matches) {

setThemeName("dark")

} else {

setThemeName("light")

}

// 监听系统颜色切换

window

.matchMedia("(prefers-color-scheme: dark)")

.addEventListener("change", (event) => {

if (event.matches) {

setThemeName("dark")

} else {

setThemeName("light")

}

})

}, [])

return {

themeName,

isDarkMode: themeName === "dark",

isLightMode: themeName === "light",

}

}

export default useTheme

使用

下面代码是配合 echarts 使用

import ./styles.css

import React, { useRef, useEffect } from react

import * as echarts from echarts

import useTheme from ./hooks/useTheme

export default function App() {

const domRef = useRef(null)

const { isDarkMode } = useTheme()

useEffect(() => {

var myChart = echarts.init(domRef.current, isDarkMode ? dark : light)

var option = {

xAxis: {

type: category,

data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun],

},

yAxis: {

type: value,

},

series: [

{

data: [820, 932, 901, 934, 1290, 1330, 1320],

type: line,

smooth: true,

},

],

}

myChart.setOption(option)

return () => {

myChart.dispose()

}

}, [isDarkMode])

return (

Hello CodeSandbox

Start editing to see some magic happen!

)

}

效果

代码示例

codesandbox[2]

以上就是本文全部内容，希望这篇文章对大家有所帮助，也可以参考我往期的文章或者在评论区交流你的想法和心得，欢迎一起探索前端。亿华云计算

参考资料

[1]window.matchMedia: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/matchMedia

[2]codesandbox: https://codesandbox.io/s/usetheme-jcm9n?file=/src/hooks/useTheme.js