这是我在这里的第一个问题。
我想创建一个小下拉列表来更改CSS文件中的:root元素。
function themechange(){
var sheet = document.styleSheets[0];
var theme = document.getElementById("theme-input").value;
if (theme == 'Dark'){
sheet.deleteRule(".root", 1);
sheet.insertRule(":root{--m-background: #262626; --m-fontcolor: #ffffff; --m-boxcolor: #404040}", 1);
}else{
if (theme == 'Light'){
sheet.deleteRule(".root", 1);
sheet.insertRule(":root{--m-background: #ffffff; --m-fontcolor: #000000; --m-boxcolor: #acacac}", 1);
}}
}:root{
--m-background: #ffffff;
--m-fontcolor: #000000;
--m-boxcolor: #acacac;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--m-background);
color: var(--m-fontcolor);
}
#box{
height: 10rem;
width: 15rem;
background-color: var(--m-boxcolor);
display: flex;
justify-content: center;
align-items: center;
}<html lang="en">
<head>
<title>Switch between Light- and Darktheme</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div id="box">
<label for="input">Choose your Theme: </label>
<select id="theme-input" onchange="themechange()">
<script src="/app.js"></script>
<datalist>
<option value="Light">Light</option>
<option value="Dark">Dark</option>
</datalist>
</select>
</div>
<span id="text">Text</span>
</body>
</html>如果您现在打开这些，第一个更改效果良好。但当你从"；深色"；至"；轻"；同样地；身体；只是被删除。其余的都很好。起初我认为这是因为body标记是一个名称，而不是div，因为#框也很好用(背景色，而不是字体色(。
我需要更改：root部分，因为我看不到主项目有不同的方式。
请帮帮我。谢谢
不要通过所有这些代码来直接修改：：root。只需通过Javascript向HTML元素添加一个属性。
如果是"；"已检查"；值"；深色"；被添加并且用于暗模式的CSS变量被获取。就这么简单。
//GET THE CHECKBOX
const getChk = document.querySelector('.theme-input input[type="checkbox"]');
//REMEMBER CAMELCASE
function themeChange(e) {
if (e.target.checked) {
//Adding "data-theme" attr
document.documentElement.setAttribute('data-theme', 'dark');
}
else {
document.documentElement.setAttribute('data-theme', 'light');
}
}
getChk.addEventListener('change', themeChange, false);:root {
--m-background: #ffffff;
--m-fontcolor: #000000;
--m-boxcolor: #acacac;
}
/*JUST ADD THE DARK MODE VARS*/
[data-theme="dark"] {
--m-background: #262626;
--m-fontcolor: #ffffff;
--m-boxcolor: #404040;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--m-background);
color: var(--m-fontcolor);
}
#box {
height: 10rem;
width: 15rem;
background-color: var(--m-boxcolor);
display: flex;
justify-content: center;
align-items: center;
}<html lang="en">
<head>
<title>Switch between Light- and Darktheme</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div id="box">
<label class="theme-input" for="checkbox">Dark Mode?
<input type="checkbox" id="checkbox" />
</label>
</div>
<span id="text">Text</span>
</body>
</html>这个版本的代码带有localStorage，可以在返回页面时检测并保存用户主题：
(出于安全原因，无法使用StackOverflow片段，但这是JSFiddle中的预览(。
//GET THE CHECKBOX
const getChk = document.querySelector('.theme-input input[type="checkbox"]');
//GET the current theme
const savedTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
// Check the user preference
if (savedTheme) {
document.documentElement.setAttribute('data-theme', savedTheme);
if (savedTheme === 'dark') {
getChk.checked = true;
}
}
//REMEMBER CAMELCASE
function themeChange(e) {
if (e.target.checked) {
//Adding "data-theme" attr
document.documentElement.setAttribute('data-theme', 'dark');
//NOW adding localStorage to store user preference
localStorage.setItem('theme', 'dark');
} else {
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light');
}
}
getChk.addEventListener('change', themeChange, false);:root {
--m-background: #ffffff;
--m-fontcolor: #000000;
--m-boxcolor: #acacac;
}
/*JUST ADD THE DARK MODE VARS*/
[data-theme="dark"] {
--m-background: #262626;
--m-fontcolor: #ffffff;
--m-boxcolor: #404040;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--m-background);
color: var(--m-fontcolor);
}
#box {
height: 10rem;
width: 15rem;
background-color: var(--m-boxcolor);
display: flex;
justify-content: center;
align-items: center;
}<html lang="en">
<head>
<title>Switch between Light- and Darktheme</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div id="box">
<label class="theme-input" for="checkbox">Dark Mode?
<input type="checkbox" id="checkbox" />
</label>
</div>
<span id="text">Text</span>
</body>
</html>