我正在尝试使用 的值localStorage来显示两个 Twitter 提要之一，一个用于浅色模式主题，另一个用于深色模式。它可以工作，但我必须刷新网页才能使用正确的 CSS -twitter-dark-display-none或者twitter-light-display-none- 才能工作。
使用jQuery(document).ready(function ()没有帮助。
小提琴：https : //jsfiddle.net/zpsf5q3x/2/ 但是由于 JSFiddle 对显示第三方框架的限制，示例推文不会显示。而且，本地存储也可能无法在那里工作。
Fiddle 调用两个外部库：
https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css和https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js
HTML：
请注意data-theme="dark"第一个块中的 。
<div class="twitter-dark-display-none">
<a class="twitter-timeline" data-width="170" data-height="200" data-theme="dark"
data-tweet-limit="1" data-chrome="transparent nofooter noborders" href="https://twitter.com/StackOverflow?ref_src=twsrc%5Etfw">Tweets</a>
</div>
<div class="twitter-light-display-none">
<a class="twitter-timeline" data-width="170" data-height="200" data-tweet-limit="1" data-chrome="transparent nofooter noborders" href="https://twitter.com/StackOverflow?ref_src=twsrc%5Etfw">Tweets</a>
</div>
jQuery：
使用 localStorage 在暗模式和正常模式之间切换整个站点的整体功能。
$('body').toggleClass(localStorage.toggled);
function darkLight() {
if (localStorage.toggled != 'dark') {
$('body').toggleClass('dark', true);
localStorage.toggled = "dark";
} else {
$('body').toggleClass('dark', false);
localStorage.toggled = "";
}
}
我试图用来切换 CSS 的内容：
if (localStorage.toggled === 'dark') {
$('.twitter-light-display-none').addClass("display-none");
$('.twitter-dark-display-none').addClass("display-block");
} else {
$('.twitter-dark-display-none').addClass("display-none");
$('.twitter-light-display-none').addClass("display-block");
}
CSS：
.display-none {
display: none !important;
}
.display-block {
display: block !important;
}
2020 年 10 月 24 日编辑：
johannchopin's答案有效，并添加了$('body').toggleClass(localStorage.toggled);
我上面的原始代码。
但是。gitbrent与暗模式 JS 和 CSS库存在某种冲突，因此我切换到https://github.com/coliff/dark-mode-switch了一种更简单的方式来切换暗模式和使用 localstorage，此外还johannchopin提供了在 twitter 小部件 div 之间切换的功能：
<script>
(function() {
var darkSwitch = document.getElementById("darkSwitch");
if (darkSwitch) {
initTheme();
darkSwitch.addEventListener("change", function(event) {
resetTheme();
});
function initTheme() {
var darkThemeSelected =
localStorage.getItem("darkSwitch") !== null &&
localStorage.getItem("darkSwitch") === "dark";
darkSwitch.checked = darkThemeSelected;
darkThemeSelected
? document.body.setAttribute("data-theme", "dark")
: document.body.removeAttribute("data-theme");
}
function resetTheme() {
if (darkSwitch.checked) {
document.body.setAttribute("data-theme", "dark");
localStorage.setItem("darkSwitch", "dark");
} else {
document.body.removeAttribute("data-theme");
localStorage.removeItem("darkSwitch");
}
updatedarkSwitch();
}
}
})();
function updatedarkSwitch() {
if (localStorage.darkSwitch === 'dark') {
$('.twitter-light-display-none').addClass("display-none").removeClass('display-block');
$('.twitter-dark-display-none').addClass("display-block").removeClass('display-none');
} else {
$('.twitter-dark-display-none').addClass("display-none").removeClass('display-block');
$('.twitter-light-display-none').addClass("display-block").removeClass('display-none');
}
}
updatedarkSwitch()
</script>
然后在样式表中使用最基本的暗模式规则：
[data-theme="dark"] {
background-color: #000000 !important;
}
and also add any other more specific CSS rules needed, i.e.
[data-theme="dark"] .post-title{
color:#fff !important;
}