darkmode.js: 实现网站一键深色模式的神器-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00647/article/details/141347464

darkmode.js: 实现网站一键深色模式的神器

darkmode.js🌒 Lightweight and powerful library that add dark theme to website based on user's time & OS appearance项目地址:https://gitcode.com/gh_mirrors/dar/darkmode.js

项目介绍

darkmode.js 是一个由 Sandoche 开发并维护的开源JavaScript库，旨在帮助开发者轻松地为其网站添加深色模式功能。这个轻量级的解决方案允许用户通过简单的配置和集成，使得访客能够根据自己的偏好切换界面主题。它在GitHub上可以找到完整的源码和更新记录，确保了开源社区的透明性和持续改进。

项目快速启动

要迅速启用 darkmode.js 功能，首先需要将其加入你的项目中。以下是基本步骤：

步骤一：引入脚本

在您的网站的 <head> 或 <body> 部分添加以下CDN链接或本地文件路径：

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@latest/lib/darkmode-js.min.js"></script>

步骤二：初始化Darkmode.js

紧接着，在你的JavaScript代码中创建一个新的Darkmode实例并展示小部件：

new Darkmode().showWidget();

这将在网页的角落自动放置一个深色模式切换按钮，用户点击即可切换主题。

应用案例和最佳实践

在实装 darkmode.js 时，充分利用其自定义选项来匹配网站的现有设计风格是关键。例如，设置个性化的切换按钮位置、颜色过渡时间以及活跃状态下的样式类等。以下是一个定制化配置的例子：

var options = {
    bottom: '64px',
    right: 'unset',
    left: '32px',
    time: '0.5s',
    mixColor: '#fff',
    backgroundColor: '#363636',
    buttonColorDark: '#363636',
    buttonColorLight: '#fff',
    saveInCookies: true,
    label: '',
    autoMatchOsTheme: true
};

const darkmode = new Darkmode(options);
darkmode.showWidget();

这样做可以让深色模式更好地融入你的网站设计之中。