Dark Mode Switch 开源项目教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01135/article/details/141349834

Dark Mode Switch 开源项目教程

dark-mode-switchAdd a dark-mode theme toggle with a Bootstrap Custom Switch项目地址:https://gitcode.com/gh_mirrors/da/dark-mode-switch

1. 项目的目录结构及介绍

Dark Mode Switch 项目的目录结构相对简单，主要包含以下几个部分：

dark-mode-switch/
├── css/
│   └── dark-mode.css
├── js/
│   └── dark-mode-switch.min.js
├── index.html
└── README.md

目录结构说明：

css/: 包含用于实现暗模式的样式文件 dark-mode.css。
js/: 包含用于切换暗模式的 JavaScript 文件 dark-mode-switch.min.js。
index.html: 示例页面，展示了如何使用暗模式切换功能。
README.md: 项目的说明文档，包含项目的基本信息和使用指南。

2. 项目的启动文件介绍

项目的启动文件是 index.html，它是一个示例页面，展示了如何集成和使用暗模式切换功能。

index.html 文件内容概览：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark Mode Switch</title>
    <link rel="stylesheet" href="css/dark-mode.css">
</head>
<body>
    <h1>Dark Mode Switch</h1>
    <label class="dark-mode-switch">
        <input type="checkbox">
        <span class="slider"></span>
    </label>
    <script src="js/dark-mode-switch.min.js"></script>
</body>
</html>

启动文件说明：

<link rel="stylesheet" href="css/dark-mode.css">: 引入暗模式的样式文件。
<script src="js/dark-mode-switch.min.js"></script>: 引入用于切换暗模式的 JavaScript 文件。
<label class="dark-mode-switch">: 定义了一个切换按钮，用于切换暗模式。

3. 项目的配置文件介绍

Dark Mode Switch 项目没有显式的配置文件，其功能主要通过 HTML 和 JavaScript 实现。

JavaScript 文件 `dark-mode-switch.min.js` 内容概览：

(function() {
    var darkSwitch = document.getElementById("darkSwitch");
    if (darkSwitch) {
        initTheme();
        darkSwitch.addEventListener("change", function() {
            resetTheme();
        });

        function initTheme() {
            var darkThemeSelected = localStorage.getItem("darkSwitch") !== null && localStorage.getItem("darkSwitch") === "dark";
            darkSwitch.checked = darkThemeSelected;
            darkThemeSelected ? document.body.setAttribute("data-theme", "dark") : document.body.removeAttribute("data-theme");
        }

        function resetTheme() {
            if (darkSwitch.checked) {
                document.body.setAttribute("data-theme", "dark");
                localStorage.setItem("darkSwitch", "dark");
            } else {
                document.body.removeAttribute("data-theme");
                localStorage.removeItem("darkSwitch");
            }
        }
    }
})();