js-dome
/
切换主题黑白.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        /* 全局样式 */
        *,
        *::before,
        *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 属性选择器 */
        [data-theme="light"] {
            --bg-color: #fff;
            --text-color: #333;
            background-color: #fff;
        }


        [data-theme="dark"] {
            --bg-color: #000;
            --text-color: #fff;
            /* 解决 在dark模式下，刷新先白屏在变暗问题，加个默认色 */
            background-color: #000;
        }


        body {
            background-color: var(--bg-color);
            color: var(--text-color);
        }

        .container {
            width: 100%;
            height: 100vh;
        }

        /* 开关样式 */
        .switch {
            font-size: 17px;
            position: fixed;
            right: 40px;
            top: 25px;
            display: inline-block;
            width: 64px;
            height: 34px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #73c0fc;
            transition: 0.4s;
            border-radius: 30px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 30px;
            width: 30px;
            border-radius: 20px;
            left: 2px;
            bottom: 2px;
            z-index: 2;
            background-color: #e8e8e8;
            transition: 0.4s;
        }

        .sun svg {
            position: absolute;
            top: 6px;
            left: 36px;
            z-index: 1;
            width: 24px;
            height: 24px;
        }

        .moon svg {
            fill: #73c0fc;
            position: absolute;
            top: 5px;
            left: 5px;
            z-index: 1;
            width: 24px;
            height: 24px;
        }

        .input:checked+.slider {
            background-color: #183153;
        }

        .input:focus+.slider {
            box-shadow: 0 0 1px #183153;
        }

        .input:checked+.slider:before {
            transform: translateX(30px);
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <label class="switch">
            <!-- 太阳 -->
            <span class="sun"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <g fill="#ffd43b">
                        <circle r="5" cy="12" cx="12"></circle>
                        <path
                            d="m21 13h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2zm-17 0h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2zm13.66-5.66a1 1 0 0 1 -.66-.29 1 1 0 0 1 0-1.41l.71-.71a1 1 0 1 1 1.41 1.41l-.71.71a1 1 0 0 1 -.75.29zm-12.02 12.02a1 1 0 0 1 -.71-.29 1 1 0 0 1 0-1.41l.71-.66a1 1 0 0 1 1.41 1.41l-.71.71a1 1 0 0 1 -.7.24zm6.36-14.36a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1zm0 17a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1zm-5.66-14.66a1 1 0 0 1 -.7-.29l-.71-.71a1 1 0 0 1 1.41-1.41l.71.71a1 1 0 0 1 0 1.41 1 1 0 0 1 -.71.29zm12.02 12.02a1 1 0 0 1 -.7-.29l-.66-.71a1 1 0 0 1 1.36-1.36l.71.71a1 1 0 0 1 0 1.41 1 1 0 0 1 -.71.24z">
                        </path>
                    </g>
                </svg></span>
            <!-- 月亮 -->
            <span class="moon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
                    <path
                        d="m223.5 32c-123.5 0-223.5 100.3-223.5 224s100 224 223.5 224c60.6 0 115.5-24.2 155.8-63.4 5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6-96.9 0-175.5-78.8-175.5-176 0-65.8 36-123.1 89.3-153.3 6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z">
                    </path>
                </svg>
            </span>


            <input type="checkbox" class="input" />
            <span class="slider"></span>
        </label>

    </div>
    <div class="container">
        <img src="https://pic1.58cdn.com.cn/anjuke_58/337f2d80b07ba0b29f667c29536fb775" style="width: 500px" />
        我是一个测试文字
    </div>

    <script>
        // 获取input元素
        const toggleSwitch = document.querySelector(".input");

        // 手动切换主题
        function switchTheme(event) {
            if (event.target.checked) {
                // 设置css变量
                document.documentElement.setAttribute("data-theme", "dark");
                //  存入本地
                localStorage.setItem("theme", "dark");
            } else {
                document.documentElement.setAttribute("data-theme", "light");
                localStorage.setItem("theme", "light");
            }
        }
        // 监听input元素
        toggleSwitch.addEventListener("change", switchTheme, false);

        /**
          * 默认展示 light
          *`DOMContentLoaded` 事件在 HTML 文档解析完成后就会触发，不用等待图片和其他资源都加载完成。
          *而 `window.onload` 事件会在整个页面及其包含的所有资源（如图片、样式表等）都加载完成后才会触发。
          *因此，`DOMContentLoaded` 事件触发的时机早于 `window.onload`，可以在一些不需要等待所有资源加载完成的场景下使用。
          *`window.onload` 适用于需要等页面包括所有图片、样式表等资源都加载完成后再执行的情况。
          *!!! 如果 JavaScript 代码依赖于页面上的资源，请使用 load 事件；如果不依赖于资源，请使用 DOMContentLoaded 事件。
          * @lastFixDate 2023/06/13 17:42:35
        */
        window.addEventListener("DOMContentLoaded", function () {
            // 获取本地存储的主题
            const currentTheme = localStorage.getItem("theme");
            // 如果有本地存储的主题，则设置为当前主题
            if (currentTheme) {
                document.documentElement.setAttribute("data-theme", currentTheme);
                // 如果是 dark 主题，则将 switch 开关设置为 checked 状态
                if (currentTheme === "dark") {
                    toggleSwitch.checked = true;
                }
            } else {
                // 如果没有本地存储的主题，则设置 dark 模式
                document.documentElement.setAttribute("data-theme", "dark");
                toggleSwitch.checked = true;
            }
            // 隐藏加载提示，显示页面内容
            document.querySelector(".loading").style.display = "none";
            container.style.display = "block";
        });

    </script>
</body>

</html>