要实现暗模式可用但打开网页时默认模式不是暗模式的解决方法,可以使用JavaScript和CSS来实现。以下是一个示例代码:
HTML部分:
暗模式可用
暗模式可用!
CSS部分(styles.css):
body {
background-color: white;
color: black;
}
.dark-mode body {
background-color: black;
color: white;
}
JavaScript部分(script.js):
function toggleDarkMode() {
var body = document.querySelector('body');
var style = document.querySelector('#dark-mode-style');
if (body.classList.contains('dark-mode')) {
body.classList.remove('dark-mode');
style.setAttribute('href', '');
} else {
body.classList.add('dark-mode');
style.setAttribute('href', 'dark-mode.css');
}
}
以上代码的作用是,在切换模式按钮被点击时,通过添加或移除dark-mode
类来切换暗模式和默认模式。通过修改style
标签的href
属性来切换样式表。
注意,上述代码中的dark-mode.css
是一个额外的CSS文件,用于定义暗模式下的样式。你可以根据需要创建一个名为dark-mode.css
的文件,并在其中定义暗模式下的样式。
这样,当用户打开网页时,默认模式将是默认的明亮模式。点击“切换模式”按钮后,将切换到暗模式,并且将在dark-mode.css
中定义的样式应用到网页中。
上一篇:暗模式开关CSS未显示
下一篇:按模式匹配向量