为什么 JavaScript 不能使用深色模式?
why doesn't JavaScript work with dark mode?
我希望当你点击它时,暗模式按钮变为css,在等待模式下按钮是暗的,在暗模式下按钮是亮的!
var toggleButton = document.getElementById('mode-toggle')
var isDarkMode = false;
function myFunction() {
isDarkMode = !isDarkMode;
document.querySelectorAll('div.scrollseite,div.scrollseite2').forEach(e => e.classList.toggle('dark-mode'))
document.querySelectorAll('div.btndarkmode').forEach(e => e.classList.toggle('btnwhitemode'))
toggleButton.innerHTML = isDarkMode ? 'Light mode' : 'Dark mode'
}
.btndarkmode {
background-color: #36393F;
text-align: center;
cursor: pointer;
display: inline-block;
font-size: 100%;
font-weight: bold;
position: fixed;
}
.btndarkmode:hover {
background-color: #32353B;
color: gray;
}
.btnwhitemode {
background-color: white;
text-align: center;
cursor: pointer;
display: inline-block;
font-size: 100%;
font-weight: bold;
position: fixed;
}
.btnwhitemode:hover {
background-color: white;
color: gray;
}
.dark-mode {
background-color: #36393F !important;
color: white !important;
}
<button onclick="myFunction()" class="btndarkmode" id="mode-toggle">Dark mode</button>
我在代码中添加了注释。代码是不言自明的,我只是检查按钮是处于暗模式还是亮模式。如果是深色模式,将文本内容更改为浅色模式,背景颜色也更改为浅色模式,反之亦然
var toggleButton = document.getElementById('mode-toggle')
function myFunction() {
// To Check if element is in Darkmode
if(toggleButton.textContent === "Dark mode") {
toggleButton.textContent = "Light mode"
toggleButton.style.background = "#eee"
return
}
// To Check if element is in Lightmode
if(toggleButton.textContent === "Light mode") {
toggleButton.textContent = "Dark mode"
toggleButton.style.background = "#333"
return
}
}
.btndarkmode {
background-color: #36393F;
text-align: center;
cursor: pointer;
display: inline-block;
font-size: 100%;
font-weight: bold;
position: fixed;
}
.btndarkmode:hover {
background-color: #32353B;
color: gray;
}
.btnwhitemode {
background-color: white;
text-align: center;
cursor: pointer;
display: inline-block;
font-size: 100%;
font-weight: bold;
position: fixed;
}
.btnwhitemode:hover {
background-color: white;
color: gray;
}
.dark-mode {
background-color: #36393F !important;
color: white !important;
}
<button onclick="myFunction()" class="btndarkmode" id="mode-toggle">Dark mode</button>
我希望当你点击它时,暗模式按钮变为css,在等待模式下按钮是暗的,在暗模式下按钮是亮的!
var toggleButton = document.getElementById('mode-toggle')
var isDarkMode = false;
function myFunction() {
isDarkMode = !isDarkMode;
document.querySelectorAll('div.scrollseite,div.scrollseite2').forEach(e => e.classList.toggle('dark-mode'))
document.querySelectorAll('div.btndarkmode').forEach(e => e.classList.toggle('btnwhitemode'))
toggleButton.innerHTML = isDarkMode ? 'Light mode' : 'Dark mode'
}
.btndarkmode {
background-color: #36393F;
text-align: center;
cursor: pointer;
display: inline-block;
font-size: 100%;
font-weight: bold;
position: fixed;
}
.btndarkmode:hover {
background-color: #32353B;
color: gray;
}
.btnwhitemode {
background-color: white;
text-align: center;
cursor: pointer;
display: inline-block;
font-size: 100%;
font-weight: bold;
position: fixed;
}
.btnwhitemode:hover {
background-color: white;
color: gray;
}
.dark-mode {
background-color: #36393F !important;
color: white !important;
}
<button onclick="myFunction()" class="btndarkmode" id="mode-toggle">Dark mode</button>
我在代码中添加了注释。代码是不言自明的,我只是检查按钮是处于暗模式还是亮模式。如果是深色模式,将文本内容更改为浅色模式,背景颜色也更改为浅色模式,反之亦然
var toggleButton = document.getElementById('mode-toggle')
function myFunction() {
// To Check if element is in Darkmode
if(toggleButton.textContent === "Dark mode") {
toggleButton.textContent = "Light mode"
toggleButton.style.background = "#eee"
return
}
// To Check if element is in Lightmode
if(toggleButton.textContent === "Light mode") {
toggleButton.textContent = "Dark mode"
toggleButton.style.background = "#333"
return
}
}
.btndarkmode {
background-color: #36393F;
text-align: center;
cursor: pointer;
display: inline-block;
font-size: 100%;
font-weight: bold;
position: fixed;
}
.btndarkmode:hover {
background-color: #32353B;
color: gray;
}
.btnwhitemode {
background-color: white;
text-align: center;
cursor: pointer;
display: inline-block;
font-size: 100%;
font-weight: bold;
position: fixed;
}
.btnwhitemode:hover {
background-color: white;
color: gray;
}
.dark-mode {
background-color: #36393F !important;
color: white !important;
}
<button onclick="myFunction()" class="btndarkmode" id="mode-toggle">Dark mode</button>