React Darkreader
🌓 Một Hook React để thêm chế độ tối / đêm vào trang của bạn, được truy inspir bởi darkreader
Bắt đầu
Cài đặt bằng yarn
yarn add react-darkreader
Hoặc bạn có thể
npm install react-darkreader
Hoặc nhập mã vào trang của bạn thông qua jsdelivr CDN
<script src="https://cdn.jsdelivr.net/npm/react-darkreader@latest/dist/index.min.js"></script>
🚀 Sử dụng
Bạn có thể nhập darkmode như một thành phần react.
import React from 'react';
import Darkreader from 'react-darkreader';
export default () => <Darkreader />;
Bạn cũng có thể tạo darkmode bằng hook react useDarkreader
import React from 'react';
import { Switch, useDarkreader } from 'react-darkreader';
export default () => {
const [isDark, { toggle }] = useDarkreader(false);
return <Switch checked={isDark} onChange={toggle} />;
};
📔 API
Thành phần
<Darkreader
defaultDarken
theme={/** Theme options **/}
fixes={/** Contains fixes for the generated theme **/}
onChange={isDark => {
/** Callback for change **/
}}
/>
Hook
const [isDark, { toggle, collectCSS }] = useDarkreader(defaultDarken, theme?, fixes?)
với nút chuyển đổi như giao diện người dùng.
<Switch checked={isDark} onChange={toggle} />
Kết quả
| Tham số | Mô tả | Loại |
|---|---|---|
| isDark | Trạng thái của darkmode hiện tại, hỗ trợ true, false |
boolean |
| toggle | Hàm để chuyển đổi darkmode. | () => void |
| collectCSS | Hàm bất đồng bộ để thu thập css của darkmode. | async () => Promise<string> |
Tham số
| Tham số | Mô tả | Loại | Mặc định |
|---|---|---|---|
| defaultDarken | Trạng thái mặc định của darkreader | boolean |
false |
| theme | Các tùy chọn của darkreader Theme refered to index.d.ts → | Partial<Theme> |
– |
| fixes | Chứa các sửa lỗi cho theme tạo ra refered to index.d.ts → | DynamicThemeFix |
– |
🔢 Sắp Ra Mắt
- thêm kiểu thiết kế vật liệu vào công tắc
- followSystemColorScheme
- localstorge
- sân chơi để chỉnh sửa cấu hình trực tuyến
🔨 Đóng góp
Cài đặt các phụ thuộc,
$ npm i
Khởi chạy máy chủ dev,
$ npm start
Xây dựng tài liệu,
$ npm run docs:build
Xây dựng thư viện thông qua father-build,
$ npm run build
🥇 Ai đang sử dụng
| Ant Design Pro Components Light | Ant Design Pro Components Dark |
|---|---|
 |
 |
More here → Xin chào mừng đến với sự đóng góp.
Demo Trực Tiếp ✨ https://react-darkreader.vercel.app
Chi tiết tải xuống:
Tác giả: Turkyden
Nguồn: https://github.com/Turkyden/react-darkreader
Giấy phép: MIT license
