深色模式演示页面

这是一个演示页面,用来展示深色模式切换脚本的效果。点击右上角的那个按钮试试看!

深色模式会自动检测你的系统设置,如果你系统开启了深色模式,页面也会默认变成深色。

使用方法

在你想开启深色模式的 HTML 页面中,在 </body> 标签前面加上这行代码:

<script src="dark-mode.js"></script>

脚本功能

功能 说明
一键切换 页面右上角出现一个按钮,点击即可切换
自动检测 首次访问时自动跟随系统深色模式设置
记忆偏好 切换后会保存到浏览器本地存储,下次访问保持你的选择
全局覆盖 自动处理背景、文字、链接、代码块、表格等常见元素

一段示例代码

function hello() {
    console.log("深色模式下代码块也会自动适配!");
}

更多详情可以查看 Git 操作手册