介绍Apple的深色模式带来全新的外观，可以放松您的眼睛并帮助您专注于工作。深色模式使用较深的配色方案，适用于整个系统。现在大部分网站也加入了深色模式，包括Tailwindcss、antddesign等都支持深色模式，所以我们的网站也要适配系统皮肤。传统上，深色模式的CSS实现是使用prefers-color-scheme媒体查询实现的，该媒体查询会在激活深色模式时重新应用一组样式。身体{颜色：黑色；背景：白色；}@media（首选颜色方案：深色）{主体{颜色：白色；背景：黑色；}}Reacthooks除了使用css实现前端页面外，还有很多大部分是使用JavaScript实现的，比如echarts图表等，这时候就需要JavaScript了，window.matchMedia[1]可用于获取肤色。我们可以将此逻辑编写为自定义钩子import{useEffect,useState}from"react"exporttypeThemeName="light"|"dark"functionuseTheme(){const[themeName,setThemeName]=useState("light")useEffect(()=>{//设置初始皮肤if(window.matchMedia("(prefers-color-scheme:dark)").matches){setThemeName("dark")}else{setThemeName("light")}//监听系统颜色切换窗口.matchMedia("(prefers-color-scheme:dark)").addEventListener("change",(event)=>{if(event.matches){setThemeName("dark")}else{setThemeName("light")}})},[])返回{themeName,isDarkMode:themeName==="dark",isLightMode:themeName==="light",}}exportdefaultuseTheme使用如下代码配合echartsuseimport'./styles.css'importReact,{useRef,useEffect}from'react'import*asechartsfrom'echarts'importuseThemefrom'./hooks/useTheme'exportdefaultfunctionApp(){constdomRef=useRef(null)const{isDarkMode}=useTheme()useEffect(()=>{varmyChart=echarts.init(domRef.current,isDarkMode?'dark':'light')varoption={xAxis:{type:'category',data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],},yAxis:{type:'value',},系列：[{数据：[820,932,901,934,1290,1330,1320],type:'line',smooth:true,},],}myChart.setOption(option)return()=>{myChart.dispose()}},[isDarkMode])return(

HelloCodeSandbox

开始编辑，看看神奇的发生！