前言

10年積累的成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有江城免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

css 實(shí)現(xiàn)

暗模式傳統(tǒng)上是通過(guò)使用 prefers-color-scheme 媒體查詢來(lái)實(shí)現(xiàn)的，當(dāng)暗黑模式被激活時(shí)，它可以重新應(yīng)用一套樣式。

body {
  color: black;
  background: white;
}
@media (prefers-color-scheme: dark) {
  body {
    color: white;
    background: black;
  }
}

React hooks 實(shí)現(xiàn)

前端頁(yè)面中除了使用 css 實(shí)現(xiàn)外，還有很大部分是使用 JavaScript 實(shí)現(xiàn)的，比如 echarts 圖表等，這時(shí)就需要使用 JavaScript， 可以使用window.matchMedia[1] 來(lái)獲取皮膚顏色。我們可以把這個(gè)邏輯寫(xiě)成一個(gè)自定義 hooks

import { useEffect, useState } from "react"

export type ThemeName = "light" | "dark"

function useTheme() {
  const [themeName, setThemeName] = useState("light")
  useEffect(() => {
    // 設(shè)置初始皮膚
    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
      setThemeName("dark")
    } else {
      setThemeName("light")
    }
    // 監(jiān)聽(tīng)系統(tǒng)顏色切換
    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]

以上就是本文全部?jī)?nèi)容，希望這篇文章對(duì)大家有所幫助，也可以參考我往期的文章或者在評(píng)論區(qū)交流你的想法和心得，歡迎一起探索前端。

參考資料

[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

網(wǎng)站題目：使用 React hooks 監(jiān)聽(tīng)系統(tǒng)的暗黑模式
本文地址：http://m.fisionsoft.com.cn/article/cdsocsp.html