Question

我有3个样式表： -全球定位和东西 -深色模式颜色样式 -灯光模式的颜色样式

默认为“暗模式”，默认为“亮模式”，但是切换主题时，所有样式都会短暂消失。

我的第一种方法是直接加载两个样式表，并将disabled属性赋予第二个样式表。

<link rel="stylesheet" type="text/css" href="dark.css">
<link rel="stylesheet" type="text/css" href="light.css" disabled>

但是出于未知原因，添加或删除此属性时并没有切换。

所以我改变了这种技术：

<link rel="stylesheet" type="text/css" href="dark.css" id="theme">
<link rel="preload" href="light.css" as="style">

document.getElementById("toggle_button").addEventListener("click",function(){
  if(e.href.match("dark\.css")) {
    e.href = "light.css";
    this.innerText = "☾ Invert contrasts";
    this.setAttribute("aria-label", "Invert contrasts - White text, black background");
  } else {
    e.href = "dark.css";
    this.innerText = "☼ Invert contrasts";
    this.setAttribute("aria-label", "Invert contrasts - Black text, white backround");
  }
},false);

效果很好，但正如我所说，我们可以看到切换。在本地，没问题。因此，我认为样式表并未真正预加载。

我该怎么办？

谢谢：）

从样式表切换到另一个样式时，样式会短暂消失

0 个答案: