猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

我可以使用 JavaScript 切换暗模式吗？

我正在使用prefers-color-scheme: darkCSS 创建一个深色主题（它适用于macOS v10.14 (Mojave) 中的Safari ）。有没有办法强制页面在其他不支持它的浏览器上使用我的暗模式代码，如下所示？


document.querySelector('#toggleDarkMode').addEventListener('click', function () {

    -- Force page to use dark mode defined in CSS

})


萧十郎
浏览 180回答 3
3回答

开满天机

不。解决方法是将更改为自定义属性的每个属性移动。然后你可以做这样的事情：p {    color: var(--body-colour);}并将其与：/* default, light scheme */body {    --body-colour: black;}@media (prefers-color-scheme: dark) {    body {        --body-colour: white;    }}body.light-mode {    --body-colour: black;}body.dark-mode {    --body-colour: white;}然后你的 JavaScript 只需要向body 元素添加一个light-mode或dark-mode类来强制使用该模式（覆盖默认值（如果浏览器不支持该功能，或者它被设置为亮模式）或暗模式媒体版本）。
0

沧海一幻觉

我猜您正在使用媒体查询来了解浏览器/操作系统是否设置为暗模式。如果较旧的浏览器不理解媒体查询，他们将一起跳过它。这通常用于制作特定于浏览器的“黑客”。使其工作的一种方法是在可以添加到<body>标签的通用类中的查询之外设置 sass 代码。您可以将此预设存储在 localStorage 或 cookie 中，这样它就不会在页面重置时重置。关于 localStorage：https&nbsp;:&nbsp;//developer.mozilla.org/en-US/docs/Web/API/Window/localStorage我会让当前的 sass 代码成为一个 mixin，这样你就不需要第二次声明它并使你的代码更容易维护。有关它的更多信息：https&nbsp;:&nbsp;//sass-lang.com/documentation/at-rules/mixin
0

墨色风雨

您可以使用此代码<!doctype html><html><head>&nbsp; &nbsp; <meta charset="utf-8">&nbsp; &nbsp; <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">&nbsp; &nbsp; <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">&nbsp; &nbsp; <title>Dark & Light Mode</title>&nbsp; &nbsp; <link rel="stylesheet" href="style.css">&nbsp; &nbsp; <style type="text/css">&nbsp; &nbsp; &nbsp; &nbsp; @import url("https://fonts.googleapis.com/css?family=Fredoka+One&display=swap");&nbsp; &nbsp; &nbsp; &nbsp; html {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: var(--backg);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; --btn: #2ab1ce;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; --backg: #fff;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; --colorx: #232323;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 100vh;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: flex;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; align-items: center;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; html[data-theme='dartheme'] {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: var(--backg);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; --btn: #ea4b3c;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; --backg: #232323;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; --colorx: #fff;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; h1 {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-family: 'Fredoka One', cursive;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-weight: 300;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: var(--colorx);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; h2 {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-family: 'Fredoka One', cursive;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-weight: 100;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: var(--colorx);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; input[type=checkbox] {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; visibility: hidden;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 0;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; label {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0 auto;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: flex;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; align-items: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 100px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-indent: -9999px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 55px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 30px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: var(--btn);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; label:after {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 50%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content: '';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: #fff;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 20px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 20px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: 5px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 4px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transition: ease-in-out 200ms;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; input:checked + label {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: #ea4b3c;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; input:checked + label:after {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: calc(100% - 5px);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: translateX(-100%);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; html.transition,&nbsp; &nbsp; &nbsp; &nbsp; html.transition *,&nbsp; &nbsp; &nbsp; &nbsp; html.transition *:before,&nbsp; &nbsp; &nbsp; &nbsp; html.transition *:after {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transition: ease-in-out 200ms !important;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transition-delay: 0 !important;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </style></head><body>&nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; &nbsp; <h1>Light & Dark Mode</h1>&nbsp; &nbsp; &nbsp; &nbsp; <h2>Demo</h2>&nbsp; &nbsp; &nbsp; &nbsp; <input class="container_toggle" type="checkbox" id="switch" name="mode">&nbsp; &nbsp; &nbsp; &nbsp; <label for="switch">Toggle</label>&nbsp; &nbsp; </div>&nbsp; &nbsp; <script src="function.js"></script>&nbsp; &nbsp; <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>&nbsp; &nbsp; <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>&nbsp; &nbsp; <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>&nbsp; &nbsp; <script type="text/javascript">&nbsp; &nbsp; &nbsp;var checkbox = document.querySelector('input[name=mode]');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; checkbox.addEventListener('change', function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(this.checked) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; trans()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.documentElement.setAttribute('data-theme', 'dartheme')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; trans()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.documentElement.setAttribute('data-theme', 'lighttheme')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let trans = () => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.documentElement.classList.add('transition');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; window.setTimeout(() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.documentElement.classList.remove('transition');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, 1000)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </script></body></html>
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript