返回首页
最新
我对深色模式的实现感到沮丧已经很多年了。每个解决方案都需要数百条手动的CSS规则，破坏可访问性，或者看起来很糟糕。因此，我构建了*BlackMagic-js*——第一个能够自动将任何网站转换为深色模式而不破坏设计的框架。
## 问题
传统的深色模式是一场噩梦：
- 每个元素都需要手动定义颜色
- 对比度比例破坏（可访问性违规）
- 丢失品牌颜色和视觉层次
- 为基本功能进行数周的CSS调整
## 解决方案
BlackMagic分析您现有的颜色并自动：
- *使用色彩科学计算最佳深色替代方案*
- *确保符合WCAG 2.1标准*（4.5:1的对比度比例）
- *在保持可读性的同时保留品牌形象*
- *零配置即可瞬间生效*
## 工作原理
```javascript
// 传统方法：500多行CSS
.dark-mode .button { color: #fff; background: #333; }
.dark-mode .text { color: #e0e0e0; }
// ... 无尽的手动定义
// BlackMagic方法：3行
const blackMagic = new BlackMagic();
blackMagic.toggle(); // 一切正常工作
```
*技术魔法：*
- *HSL色彩空间操作*（而非RGB）以实现自然过渡
- *亮度计算*并进行伽马校正以确保适当对比
- *DOM树遍历*以检测继承的背景颜色
- *双重存储*（cookies + localStorage）以保持持久性
## 实际性能
在50多个网站上测试：
- *98.7%的WCAG合规性*自动实现
- *<50ms*的颜色计算时间
- *8KB压缩*且无依赖
- *100%持久性*跨浏览器会话
## 快速开始
```bash
npm install blackmagic-js
```
```javascript
import BlackMagic from 'blackmagic-js';
const darkMode = new BlackMagic({
backgroundColor: '#1a1a1a',
factor: 0.4 // 调整强度
});
// 添加到任何按钮
button.addEventListener('click', () => darkMode.toggle());
```
CDN版本：
```html
<script src="https://cdn.jsdelivr.net/npm/blackmagic-js@latest"></script>
```
## 为什么这很重要
深色模式现在对以下情况是*必不可少*的：
- *70%以上的开发者*偏好深色界面
- *OLED节电*（最多节省40%的电量）
- *为光敏用户提供可访问性*
- *专业外观*——用户期待这种设计
BlackMagic使得实现变得如此简单，以至于没有理由不提供它。
## 高级功能
对于高级用户：
```javascript
const blackMagic = new BlackMagic({
themeClass: 'custom-dark', // 使用CSS类
factor: 0.6, // 更强的调整
cookieDuration: 365, // 持续1年
autoSwitch: true // 加载时应用保存的主题
});
```
## 浏览器支持
- Chrome 60+、Firefox 60+、Safari 12+、Edge 79+
- 支持file:// URLs（非常适合测试）
- 当localStorage不可用时优雅回退
## 开源与测试
- *GitHub*: [https://github.com/LucAngevare/BlackMagic-js](https://github.com/LucAngevare/BlackMagic-js)
- *NPM*: [https://www.npmjs.com/package/blackmagic-js](https://www.npmjs.com/package/blackmagic-js)
- *MIT许可证*，附带全面示例
- *每个功能和边缘案例的互动演示*
该仓库包括9种不同的测试场景，展示从基本用法到复杂配置的所有内容。您可以在几秒钟内在任何网站上看到它的工作效果。
Autark构建系统直接从项目的源代码自我引导，只需`sh`和一个`C`编译器。
大家好，
我在企业IT领域工作，处理来自各种系统/API的多样化数据导出。
我感到沮丧的原因有：
1. 根据文件格式需要使用不同的工具。
2. 缺乏能够快速理解数据的优化工具。
3. 杂乱的文件在使用前往往需要清理。
因此，我作为一个副项目，构建了自己的解决方案，同时也是学习React和Tailwind的一种有趣方式。
也许这对其他人也有帮助。
这个工具旨在做到：
- 简单：只需拖放文件，它会自动检测编码、分隔符、表头等。
- 强大：可以运行任意JavaScript来大规模过滤和转换数据。
欢迎试用： [https://www.fileglance.info/](https://www.fileglance.info/)
源代码：[https://github.com/dell-mic/file-glance](https://github.com/dell-mic/file-glance)
我很想听听你们的反馈！