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, 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可定制黑暗模式切换开关组件的详细内容。