React可定制黑暗模式切換開關組件
正文
一個用於React的可定制的黑暗模式切換開關組件。
如何使用它。
1.安裝和下載
npm install @anatoliygatt/dark-mode-toggle @emotion/react @emotion/styled
2.導入DarkModeToggle組件
import { useState } from 'react'; import { DarkModeToggle } from '@anatoliygatt/dark-mode-toggle';
3.將黑暗模式切換添加到應用程序中
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.默認的組件道具
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,
預覽
The postDark Mode Toggle Component For Reactappeared first onReactScript.
以上就是React可定制黑暗模式切換開關組件的詳細內容,更多關於React 黑暗模式切換的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- react純函數組件setState更新頁面不刷新的解決
- 可定制react18 input otp 一次性密碼輸入組件
- React編程中需要註意的兩個錯誤
- React全局狀態管理的三種底層機制探究
- 解析React中useMemo與useCallback的區別