目录
  • 正文
  • 如何使用它。
    • 1.安装和下载
    • 2.导入DarkModeToggle组件
    • 3.将黑暗模式切换添加到应用程序中
    • 4.默认的组件道具
  • 预览

    正文

    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,

    预览

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

    The postDark Mode Toggle Component For Reactappeared first onReactScript.

    以上就是React可定制黑暗模式切换开关组件的详细内容，更多关于React 黑暗模式切换的资料请关注其它相关文章！

    声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。