React Darkreader
🌓 Một React Hook để thêm chế độ tối/đêm vào trang web của bạn, được truyền cảm hứng từ 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 chèn mã vào trang của bạn bằng cách 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 chế độ tối 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 chế độ tối bằng React Hook 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 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 hiện tại của chế độ tối, hỗ trợ true, false |
boolean |
| toggle | Hàm để chuyển đổi chế độ tối. | () => void |
| collectCSS | Hàm bất đồng bộ để thu thập CSS của chế độ tối. | 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 | Tùy chọn của chế độ tối darkreader refered to index.d.ts → | Partial<Theme> |
– |
| fixes | Chứa các sửa lỗi cho chế độ tối được tạo ra refered to index.d.ts → | DynamicThemeFix |
– |
🔢 Sắp có
- thêm thiết kế theo hướng dẫn vật liệu vào công tắc
- theo dõi Chế độ màu hệ thống
- 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 động máy chủ phát triển,
$ 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 → Chào mừng đóng góp.
Trình diễn trực tiếp ✨ https://react-darkreader.vercel.app
Chi tiết tải về:
Tác giả: Turkyden
Nguồn: https://github.com/Turkyden/react-darkreader
Giấy phép: MIT license
