React可定制黑暗模式切换开关组件
目录
正文
如何使用它。
1.安装和下载
2.导入DarkModeToggle组件
3.将黑暗模式切换添加到应用程序中
4.默认的组件道具
预览
正文
一个用于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 黑暗模式切换的资料请关注软件开发网其它相关文章！
相关文章
Yasmin
2021-05-01
Autumn
2020-04-29
Oria
2023-05-16
Victoria
2023-05-16
Anna
2023-05-16
Jacinthe
2023-05-16
Elita
2023-05-17
Tani
2023-05-18
Viveka
2023-05-18
Karli
2023-05-18
Tia
2023-05-18
Jacinda
2023-07-20
Nova
2023-07-20
Beth
2023-07-20
Viridis
2023-07-20
Georgia
2023-07-20
Shaine
2023-07-20
Isleta
2023-07-20