前端深色模式，浅色模式

深藏阁楼爱情的钟 2022-12-19 09:28 127阅读 0赞

### 代码 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
        <meta charset="UTF-8">
        <title>Title</title>
        <style> *{ margin: 0; padding: 0; } html,body{ width: 100%; height: 100%; } body{ width: 100vw; height: 100vh; } @media (prefers-color-scheme: dark) { body { background: black; } .bg{ color: white; } } @media (prefers-color-scheme: light) { body { background: white; } .bg{ color: #65a9e5; } } </style>
    </head>
    <body>
        <div class="bg" id="bg">123</div>
        <button id="dark-mode-toggle">toggle</button>
    <script> var dynamicLoading = { css: function(path){ if(!path || path.length === 0){ throw new Error('argument "path" is required !'); } var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.href = path; link.rel = 'stylesheet'; link.type = 'text/css'; head.appendChild(link); }, js: function(path){ if(!path || path.length === 0){ throw new Error('argument "path" is required !'); } var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.src = path; script.type = 'text/javascript'; head.appendChild(script); } } const toggleButton = document.querySelector("#dark-mode-toggle") let darkMode = localStorage.getItem("theme") if (darkMode === "dark") enableDarkMode() toggleButton.addEventListener("click", e => { darkMode = localStorage.getItem("theme") if (darkMode === "dark") { disableDarkMode() } else { enableDarkMode() } }) function enableDarkMode() { document.body.classList.add("dark-mode") localStorage.setItem("theme", "dark") alert('dark') dynamicLoading.css('dark.css') // dark.css为深色模式css文件 } function disableDarkMode() { document.body.classList.remove("dark-mode") localStorage.setItem("theme", "light") alert('light') dynamicLoading.css('light.css') // light.css为浅色模式css文件 } window .matchMedia("(prefers-color-scheme: dark)") .addListener(e => (e.matches ? enableDarkMode() : disableDarkMode())) </script>
    </body>
    </html>

参考：[https://juejin.im/post/6891623236145496071][https_juejin.im_post_6891623236145496071]

[https_juejin.im_post_6891623236145496071]: https://juejin.im/post/6891623236145496071