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

共计 1100 个字符，预计需要花费 3 分钟才能阅读完成。

一个用于 React 的可定制的黑暗模式切换开关组件。

npm install @anatoliygatt/dark-mode-toggle @emotion/react @emotion/styled

import {useState} from 'react';
import {DarkModeToggle} from '@anatoliygatt/dark-mode-toggle';

function Example() {const [mode, setMode] = useState('dark');
  return ( {setMode(mode);
      }}
    />
  );
}

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

阿里云 2 核 2G 服务器 3M 带宽 61 元 1 年，有高配

腾讯云新客低至 82 元 / 年，老客户 99 元 / 年

代金券：在阿里云专用满减优惠券