React可定制黑暗模式切換開關(guān)組件

更新時(shí)間：2022年10月25日 17:03:39 作者：Jovie

這篇文章主要為大家介紹了React可定制黑暗模式切換開關(guān)組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

一個(gè)用于React的可定制的黑暗模式切換開關(guān)組件。

如何使用它。

1.安裝和下載

npm install @anatoliygatt/dark-mode-toggle @emotion/react @emotion/styled

2.導(dǎo)入DarkModeToggle組件

import { useState } from 'react';
import { DarkModeToggle } from '@anatoliygatt/dark-mode-toggle';

3.將黑暗模式切換添加到應(yīng)用程序中

function Example() {
  const [mode, setMode] = useState('dark');
  return (
    <DarkModeToggle
      mode={mode}
      dark="Dark"
      light="Light"
      size="lg"
      inactiveTrackColor="#e2e8f0"
      inactiveTrackColorOnHover="#f8fafc"
      inactiveTrackColorOnActive="#cbd5e1"
      activeTrackColor="#334155"
      activeTrackColorOnHover="#1e293b"
      activeTrackColorOnActive="#0f172a"
      inactiveThumbColor="#1e293b"
      activeThumbColor="#e2e8f0"
      ariaLabel="Toggle color scheme"
      onChange={(mode) => {
        setMode(mode);
      }}
    />
  );
}

4.默認(rèn)的組件道具

mode = 'dark',
dark,
light,
onChange,
size = 'sm', // lg, md
inactiveLabelColor = '#b9bdc1',
inactiveLabelColorOnHover = '#fcfefe',
inactiveLabelColorOnActive = '#cdd1d5',
activeLabelColor = '#5b5e62',
activeLabelColorOnHover = '#404346',
activeLabelColorOnActive = '#010101',
inactiveTrackColor = '#dce0e3',
inactiveTrackColorOnHover = '#fcfefe',
inactiveTrackColorOnActive = '#cdd1d5',
activeTrackColor = '#404346',
activeTrackColorOnHover = '#2d2f31',
activeTrackColorOnActive = '#141516',
inactiveThumbColor = '#2d2f31',
activeThumbColor = '#dce0e3',
focusRingColor = 'rgb(59 130 246 / 0.5)',
ariaLabel,

預(yù)覽

The postDark Mode Toggle Component For Reactappeared first onReactScript.

以上就是React可定制黑暗模式切換開關(guān)組件的詳細(xì)內(nèi)容，更多關(guān)于React 黑暗模式切換的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

在React項(xiàng)目中添加吸頂效果的代碼示例
在大型Web應(yīng)用中，一個(gè)常見的設(shè)計(jì)需求是讓某些組件具有吸頂效果，這意味著當(dāng)頁面向下滾動(dòng)時(shí)，該組件會(huì)保持在屏幕頂部，在本文中，我們將介紹如何在React項(xiàng)目中實(shí)現(xiàn)吸頂效果。我們將首先討論使用原生JavaScript領(lǐng)域的方法來實(shí)現(xiàn)，然后將這些方法與React結(jié)合起來
2023-06-06
React中使用ResizeObserver來觀察元素size變化的方法
在 React 中使用 ResizeObserver 來觀察元素的大小變化,可以通過創(chuàng)建一個(gè)自定義 Hook 來封裝 ResizeObserver 的邏輯,并在組件中使用這個(gè) Hook,以下是一個(gè)完整的示例,展示了如何在 React 中使用 ResizeObserver 來觀察元素的大小變化,需要的朋友可以參考下
2024-12-12
解決React報(bào)錯(cuò)React?Hook?useEffect?has?a?missing?dependency
這篇文章主要為大家介紹了解決React報(bào)錯(cuò)React?Hook?useEffect?has?a?missing?dependency，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
使用React封裝一個(gè)Tree樹形組件的實(shí)例代碼
這篇文章主要介紹了使用React封裝一個(gè)Tree樹形組件的實(shí)例,文中通過代碼示例講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2024-03-03
react子組件接收的props賦值給state的陷阱問題
這篇文章主要介紹了react子組件接收的props賦值給state的陷阱問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
React從命令式編程到聲明式編程的原理解析
這篇文章主要介紹了React從命令式編程到聲明式編程,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-09-09
react redux入門示例
本篇文章主要介紹了react redux入門示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-04-04
react-router實(shí)現(xiàn)跳轉(zhuǎn)傳值的方法示例
這篇文章主要給大家介紹了關(guān)于react-router實(shí)現(xiàn)跳轉(zhuǎn)傳值的相關(guān)資料，文中給出了詳細(xì)的示例代碼，對大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。
2017-05-05
react實(shí)現(xiàn)換膚功能的示例代碼
這篇文章主要介紹了react實(shí)現(xiàn)換膚功能的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-08-08
react組件基本用法示例小結(jié)
這篇文章主要介紹了react組件基本用法,結(jié)合實(shí)例形式分析了react組件傳值、生命周期、受控組件和非受控組件等相關(guān)操作技巧,需要的朋友可以參考下
2020-04-04