使用纯 JavaScript 的 HTML 暗模式
[英]HTML Dark Mode With Pure JavaScript
问题描述
I'd like to add dark mode to my website with javascript.
我想使用 javascript 向我的网站添加暗模式。 It works technically, but not the way I wanted it to.它在技术上有效，但不是我想要的方式。 It only set the body color to black.它仅将主体颜色设置为黑色。 But the challange is to set color to the "< div >" tags.但挑战是为“< div >”标签设置颜色。 Honestly I don't really know JavaScript, so I don't know how to do it.老实说，我真的不知道 JavaScript，所以我不知道该怎么做。 Here is my code:这是我的代码：
document.body.style.backgroundColor = sessionStorage.getItem('bg'); document.body.style.color = sessionStorage.getItem('cc'); document.div.style.backgroundColor = sessionStorage.getItem('cardbg'); document.div.style.color = sessionStorage.getItem('cardcc'); function darker() { if ( sessionStorage.getItem('bg') === 'rgb(241, 241, 241)') { sessionStorage.setItem('bg', 'rgb(6, 23, 37)'); sessionStorage.setItem('cc', '#fff'); sessionStorage.setItem('cardbg', 'rgb(5, 15, 36)'); sessionStorage.setItem('cardcc', '#fff'); } else if (sessionStorage.getItem('bg') == null || undefined) { sessionStorage.setItem('bg', 'rgb(6, 23, 37)'); sessionStorage.setItem('cc', '#000'); sessionStorage.setItem('cardbg', 'rgb(5, 15, 36)'); sessionStorage.setItem('cardcc', '#fff'); } else if( sessionStorage.getItem('bg') === 'rgb(6, 23, 37)') { sessionStorage.setItem('bg', 'rgb(241, 241, 241)'); sessionStorage.setItem('cc', '#000'); sessionStorage.setItem('cardbg', 'rgb(5, 15, 36)'); sessionStorage.setItem('cardcc', '#fff'); } document.body.style.backgroundColor = sessionStorage.getItem('bg'); document.body.style.color = sessionStorage.getItem('cc'); document.div.style.backgroundColor = sessionStorage.getItem('cardbg'); document.div.style.color = sessionStorage.getItem('cardcc'); }
<html> <head> <style> body { background-color: #f1f1f1; color: #000; } .card { background-color: red; color: black; } </style> </head> <body> <div class="card"> <h5>Title</h5> <p>Some text...</p> <p>Another text..</p> </div> </body> <script src="assets/js/darker.js"></script> </html>
1 个解决方案
解决方案1
0 已采纳 2020-08-28 09:21:55
You could store your themes in an object and switch them during runtime using document.documentElement.style.setProperty()您可以将主题存储在一个对象中，并在运行时使用document.documentElement.style.setProperty()切换它们
Example:例子：
const dark = {
'background-color': '#FFFFFF'
}
const light = {
'background-color': '#000000'
}
In your CSS (Note: to only style div's use body > div )在您的 CSS 中（注意：仅样式 div 的使用body > div ）
--background-color: #000000 // this is the default
body > div {
background-color: var(--background-color);
}
And finally if you need to switch the theme you can do:最后，如果您需要切换主题，您可以执行以下操作：
function setTheme(a_oTheme) {
Object.keys(a_oTheme).forEach(k =>
document.documentElement.style.setProperty(`--${k}`, a_oTheme[k])
);
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.