时间戳

首页 > 解决方案 > 如何加快网站上的暗模式延迟？

javascript - 如何加快网站上的暗模式延迟？

问题描述

我想加快暗模式在我的网站上生效。当我当前加载页面时，页面加载和暗模式生效之间存在延迟。这是我的 jQuery.js 代码

onload = function () {
  if (localStorage.getItem("darkMode") === "true") {
    var mode = localStorage.getItem("darkMode");
    enableDarkMode();
  }
}

function enableDarkMode() {
  $("body").addClass("dark");
  $("nav").removeClass("navbar navbar-expand-md navbar-light");
  $("nav").addClass("navbar navbar-expand-md navbar-dark");
  $('.inner-switch').text("ON");
  var mode = localStorage.setItem("darkMode", "true");
}

function disableDarkMode() {
  $("body").removeClass("dark");
  $("nav").removeClass("navbar navbar-expand-md navbar-dark");
  $("nav").addClass("navbar navbar-expand-md navbar-light");
  $('.inner-switch').text("OFF");
  var mode = localStorage.setItem("darkMode", "false");
}

$('.inner-switch').on("click", function () {
  if ($("body").hasClass("dark")) {
    disableDarkMode();
  } else {
    enableDarkMode();
  }
});

标签： javascriptjqueryhtmlcss

解决方案

您可以使用Smarty之类的模板引擎，并在显示网站之前检查暗模式。然后，您可以分配一个 smarty 变量并在网站的 HTML 中构建一个 IF 语句。

例子：

<body {if darkMode} dark {/if}>

所以它会从一开始就加载暗模式。

推荐阅读