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<ThemeName>("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 (
<div className='App'>
<h1>Hello CodeSandboxh1>
<h2>Start editing to see some magic happen!h2>
<div ref={domRef} style={{ height: 500 }}>div>
div>
)
}效果
代码示例
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
