返回首页
最新
大家好，其实我是在2019年制作了这个库，并且从那时起一直在使用它，但由于转向更多使用Deno，我在改进这个库方面有些停滞。几天前，我对库进行了升级[1]，将CLI编译成了可执行文件[2]，并更新了网站[3]。
我知道语义版本控制（SemVer）是王道，但对我来说，ChronVer非常棒。几天前我才知道有日历版本控制（CalVer），所以知道自己并不孤单，感觉很好。哦，顺便说一下，我刚刚写了一篇简短的博客文章[4]。
---
[1]: [https://github.com/ChronVer/chronver](https://github.com/ChronVer/chronver)
[2]: [https://github.com/ChronVer/chronver/releases](https://github.com/ChronVer/chronver/releases)
[3]: [https://chronver.org](https://chronver.org)
[4]: [https://blog.webb.page/2025-07-25-chronver-chronologic-versioning.txt](https://blog.webb.page/2025-07-25-chronver-chronologic-versioning.txt)
我对深色模式的实现感到沮丧已经很多年了。每个解决方案都需要数百条手动的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种不同的测试场景，展示从基本用法到复杂配置的所有内容。您可以在几秒钟内在任何网站上看到它的工作效果。