模式切换开关组件示例可定制黑暗-江苏天煌照明集团有限公司 - 智慧路灯-智能路灯-江苏天煌照明集团有限公司

这篇文章主要为大家介绍了React可定制黑暗模式切换开关组件示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

正文

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 (     {         setMode(mode);      }}    />  );}

4.默认的组件道具

mode = 'dark',dark,light,onChange,size = 'sm', // lg, mdinactiveLabelColor = '#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,

预览

React可定制黑暗模式切换开关组件示例