如何修复灯光主题的闪烁？

【问题标题】：How do I fix the blink of an light theme?如何修复灯光主题的闪烁？
【发布时间】：2020-01-07 12:28:57
【问题描述】：

我有一个暗/亮开关。我使用 cookie 让用户保持深色/浅色偏好。所以当他们再次访问时，他们会看到他们喜欢的主题。但是有一个烦人的问题。每次我刷新页面时，页面都会在短时间内显示浅色主题，然后再次呈现深色主题。如何解决这个问题？

const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');

function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
		localStorage.setItem('theme', 'dark'); //add this
    }
    else {
        document.documentElement.setAttribute('data-theme', 'light');
		localStorage.setItem('theme', 'light'); //add this
    }    
}

toggleSwitch.addEventListener('change', switchTheme, false);

const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;

if (currentTheme) {
    document.documentElement.setAttribute('data-theme', currentTheme);

    if (currentTheme === 'dark') {
        toggleSwitch.checked = true;
    }
}
:root {
    --bg-color: #fff;
    --panel-bg: #fff;
    --panel-bg-hover: #dcd8d8;
    --panel-border: #22a7f0;
    --panel-title-color: #22a7f0;
    --panel-title-hover: #0072b1;
    --panel-subtitle-color: #ffa500;
    --panel-text-color: #000000;
    --panel-button-bg: #dc4a4a;
    --panel-button-hover-bg: #d83535;
    --panel-button-text-color: #ffd7f8;
    --panel-button-text-hover-color: #ffd7f8;
    --input-bg: #e6e6e6;
    --input-border-color: #ff0000;
    --input-label-color: #ff0000;
    --input-label-color-focus: #ff0000;
    --input-text-color: #000000;
    --search-input-bg: #fff;
    --table-shorting: #22a7f0;
    --table-text-color-1: #417d9e;
    --table-text-color-2: #ff0000;
    --table-text-color-3: #008000;
    --table-text-color-4: #b17b17;
    --table-text-color-5: rgb(87, 89, 146);
    --table-options-color: #22a7f0;
    --table-options-hover-color: #e6e6e6;
    --dropdown-line-hover: #ddd;
    --active-color: #87D37C;
    --passive-color: #E74C3C;
}
[data-theme="dark"] {
    --bg-color: #2f2f2f;
    --panel-bg: #1e262c;
    --panel-bg-hover: #2f3a42;
    --panel-border: #ffa500;
    --panel-title-color: #ffa500;
    --panel-title-hover: #ffffffc2;
    --panel-subtitle-color: #c3c6ce;
    --panel-text-color: #ffffff;
    --panel-button-bg: #dc4a4a;
    --panel-button-hover-bg: #d83535;
    --panel-button-text-color: #ffd7f8;
    --panel-button-text-hover-color: #ffd7f8;
    --input-bg: #1a2025;
    --input-border-color: #3694ff;
    --input-label-color: #cad1ff4d;
    --input-label-color-focus: #3694ff;
    --input-text-color: white;
    --search-input-bg: #1e262c;
    --table-shorting: #ffa500;
    --table-text-color-1: #417d9e;
    --table-text-color-2: #ff6262;
    --table-text-color-3: #358e65;
    --table-text-color-4: #3eafa4;
    --table-text-color-5: #40c57b;
    --table-options-color: #ffa500;
    --table-options-hover-color: #ffa50042;
    --dropdown-line-hover: #634747;
    --active-color: #0f980f;
    --passive-color: #bf1e0e;
}

body {
  background-color: var(--bg-color);
}
.squares { display: inline-block; margin-top: 30px;}
.square1 {display: inline-block; width: 100px; height: 100px; background-color: var(--table-text-color-1); margin-right: 20px;}
.square2 {display: inline-block;  width: 100px; height: 100px; background-color: var(--table-text-color-2); margin-right: 20px;}
.square3 {display: inline-block;  width: 100px; height: 100px; background-color: var(--table-text-color-3); margin-right: 20px;}
.square4 {display: inline-block;  width: 100px; height: 100px; background-color: var(--table-text-color-4); margin-right: 20px;}

.theme-switch-wrapper {
    display: flex;
    align-items: center;
    position: -webkit-sticky;
    position: sticky;
    top: 10px;
}
.theme-switch {
    display: inline-block;
    height: 26px;
    position: relative;
    width: 52px;
}
.theme-switch input {
    display:none;
}
.slider {
    background-color: #ccc0;
    border: 3px solid #a5a4a4;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
}
.slider:before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: #a5a4a4;
    bottom: 1.8px;
    left: 3px;
    transform: rotate(-45deg);
    transition: .4s;
    border-radius: 100%;
}
#darklightswitch:checked + .slider {
    border: 3px solid #3694ff;
}
#darklightswitch:checked + .slider:before {
    box-shadow: 5px 5px 0 0 #3694ff;
    background: 0 0;
    left: 21.1px;
}
.slider.round {
    border-radius: 34px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="theme-switch-wrapper">
		<label class="theme-switch" for="darklightswitch">
			<input type="checkbox" id="darklightswitch" />
			<div class="slider round"></div>
		</label>
	</div>
  <div class="squares">
  <div class="square1"></div>
  <div class="square2"></div>
  <div class="square3"></div>
  <div class="square4"></div>
  </div>
</body>

我的来源：https://dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8

笔：https://codepen.io/lastofdead/pen/dyPdPWY

编辑：

我的真实索引页；

<html>
<head>
    <meta charset="UTF-8">
    <meta name="robots" content="noindex, nofollow">
    <!-- JS -->
    <script src="js/sweetalert2.all.js"></script>
    <script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.maskedinput.js?ver=1" type="text/javascript"></script>

    <!-- CSS -->
    <link href="css/darklight.css?ver=2.01" rel="stylesheet" type="text/css" />
    <link href="css/style.css?ver=2.02" rel="stylesheet" type="text/css" />
    <link href="css/print.css?ver=2.00" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="theme-switch-wrapper">
        <label class="theme-switch" for="darklightswitch">
            <input type="checkbox" id="darklightswitch" />
            <div class="slider round"></div>
        </label>
    </div>



    <!-- some divs -->



    <script src="js/darklightswitch.js?ver=2.04" type="text/javascript"></script>
    <script src="js/dropdown-responsive.js?ver=2.00"></script>
    <script src='js/jquery.dataTables.min.js?ver=2.00' type="text/javascript"></script>
    <script src="js/input.js" type="text/javascript"></script>
    <script src="js/sweet-js.js?ver=2.00"></script>
</body>
</html>

编辑 2

这是最后一个。我仍然遇到同样的问题。

<html>
<head>
    <meta charset="UTF-8">
    <meta name="robots" content="noindex, nofollow">
    <!-- JS -->
    <script src="js/sweetalert2.all.js"></script>
    <script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.maskedinput.js?ver=1" type="text/javascript"></script>
    <script type="text/javascript">
        const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
        function switchTheme(e) {
            if (e.target.checked) {
                document.documentElement.setAttribute('data-theme', 'dark');
                localStorage.setItem('theme', 'dark'); //add this
            }
            else {
                document.documentElement.setAttribute('data-theme', 'light');
                localStorage.setItem('theme', 'light'); //add this
            }    
        }
        toggleSwitch.addEventListener('change', switchTheme, false);
        /* çerezleme */
        const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
        if (currentTheme) {
            document.documentElement.setAttribute('data-theme', currentTheme);
            if (currentTheme === 'dark') {
                toggleSwitch.checked = true;
            }
        }
    </script>
    <!-- CSS -->
    <style>
        :root {
            --bg-color: #2f2f2f;
            --panel-bg: #fff;
            --panel-bg-hover: #dcd8d8;
            --panel-border: #22a7f0;
            --panel-title-color: #22a7f0;
            --panel-title-hover: #0072b1;
            --panel-subtitle-color: #ffa500;
            --panel-text-color: #000000;
            --panel-button-bg: #dc4a4a;
            --panel-button-hover-bg: #d83535;
            --panel-button-text-color: #ffd7f8;
            --panel-button-text-hover-color: #ffd7f8;
            --input-bg: #e6e6e6;
            --input-border-color: #ff0000;
            --input-label-color: #ff0000;
            --input-label-color-focus: #ff0000;
            --input-text-color: #000000;
            --search-input-bg: #fff;
            --table-shorting: #22a7f0;
            --table-text-color-1: #417d9e;
            --table-text-color-2: #ff0000;
            --table-text-color-3: #008000;
            --table-text-color-4: #b17b17;
            --table-text-color-5: rgb(87, 89, 146);
            --table-options-color: #22a7f0;
            --table-options-hover-color: #e6e6e6;
            --dropdown-line-hover: #ddd;
            --active-color: #87D37C;
            --passive-color: #E74C3C;
        }
        [data-theme="dark"] {
            --bg-color: #2f2f2f;
            --panel-bg: #1e262c;
            --panel-bg-hover: #2f3a42;
            --panel-border: #ffa500;
            --panel-title-color: #ffa500;
            --panel-title-hover: #ffffffc2;
            --panel-subtitle-color: #c3c6ce;
            --panel-text-color: #ffffff;
            --panel-button-bg: #dc4a4a;
            --panel-button-hover-bg: #d83535;
            --panel-button-text-color: #ffd7f8;
            --panel-button-text-hover-color: #ffd7f8;
            --input-bg: #1a2025;
            --input-border-color: #3694ff;
            --input-label-color: #cad1ff4d;
            --input-label-color-focus: #3694ff;
            --input-text-color: white;
            --search-input-bg: #1e262c;
            --table-shorting: #ffa500;
            --table-text-color-1: #417d9e;
            --table-text-color-2: #ff6262;
            --table-text-color-3: #358e65;
            --table-text-color-4: #3eafa4;
            --table-text-color-5: #40c57b;
            --table-options-color: #ffa500;
            --table-options-hover-color: #ffa50042;
            --dropdown-line-hover: #634747;
            --active-color: #0f980f;
            --passive-color: #bf1e0e;
        }
    </style>
    <link href="css/style.css?ver=2.02" rel="stylesheet" type="text/css" />
    <link href="css/print.css?ver=2.00" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="theme-switch-wrapper">
        <label class="theme-switch" for="darklightswitch">
            <input type="checkbox" id="darklightswitch" />
            <div class="slider round"></div>
        </label>
    </div>



    <!-- some divs -->



    <script src="js/dropdown-responsive.js?ver=2.00"></script>
    <script src='js/jquery.dataTables.min.js?ver=2.00' type="text/javascript"></script>
    <script src="js/input.js" type="text/javascript"></script>
    <script src="js/sweet-js.js?ver=2.00"></script>
</body>
</html>

【问题讨论】：

  • 这是因为您的css 在页面加载时首先应用，然后您的javascript 加载然后转换为深色主题。
  • 所以我只需要把css移到js吗？
  • 如果你能从服务器端这样做会更好
  • 服务器端；在将页面发送给用户之前，使用 php 在服务器上生成页面。所以将这部分&lt;script src="js/darklightswitch.js?ver=2.04" type="text/javascript"&gt;&lt;/script&gt; 移动到head 标签中的&lt;!-- JS --&gt; 部分下没有用？尝试添加内联代码，而不是链接到文档。
  • 一个干净的解决方案是使用装载机。显示加载器，直到 JS 被加载，然后显示站点。

标签： javascript html css


【解决方案1】：

这不是一个典型的解决方案，但我想它可以解决问题并尽可能减少加载时间。

您的结构应如下所示：

<html>
<head>
<!-- -->
<style>/* INLINE CSS */</style>
<!-- OTHER CSS STYLESHEETS -->
</head>
<body>

<!-- CONTENT -->

<!-- INLINE JS -->
<!-- OTHER DEFERRED JS SCRIPTS -->
</body>
</html>

在你的例子中：

<head>
<!-- meta -->
<style>
/* Inline critical CSS */
/* Define style directly, no need for root */
[data-theme="light"] {
  --bg-color: #fff;
  --panel-bg: #fff;
  --panel-bg-hover: #dcd8d8;
  --panel-border: #22a7f0;
  --panel-title-color: #22a7f0;
  --panel-title-hover: #0072b1;
  --panel-subtitle-color: #ffa500;
  --panel-text-color: #000000;
  --panel-button-bg: #dc4a4a;
  --panel-button-hover-bg: #d83535;
  --panel-button-text-color: #ffd7f8;
  --panel-button-text-hover-color: #ffd7f8;
  --input-bg: #e6e6e6;
  --input-border-color: #ff0000;
  --input-label-color: #ff0000;
  --input-label-color-focus: #ff0000;
  --input-text-color: #000000;
  --search-input-bg: #fff;
  --table-shorting: #22a7f0;
  --table-text-color-1: #417d9e;
  --table-text-color-2: #ff0000;
  --table-text-color-3: #008000;
  --table-text-color-4: #b17b17;
  --table-text-color-5: rgb(87, 89, 146);
  --table-options-color: #22a7f0;
  --table-options-hover-color: #e6e6e6;
  --dropdown-line-hover: #ddd;
  --active-color: #87D37C;
  --passive-color: #E74C3C;
}

[data-theme="dark"] {
  --bg-color: #2f2f2f;
  --panel-bg: #1e262c;
  --panel-bg-hover: #2f3a42;
  --panel-border: #ffa500;
  --panel-title-color: #ffa500;
  --panel-title-hover: #ffffffc2;
  --panel-subtitle-color: #c3c6ce;
  --panel-text-color: #ffffff;
  --panel-button-bg: #dc4a4a;
  --panel-button-hover-bg: #d83535;
  --panel-button-text-color: #ffd7f8;
  --panel-button-text-hover-color: #ffd7f8;
  --input-bg: #1a2025;
  --input-border-color: #3694ff;
  --input-label-color: #cad1ff4d;
  --input-label-color-focus: #3694ff;
  --input-text-color: white;
  --search-input-bg: #1e262c;
  --table-shorting: #ffa500;
  --table-text-color-1: #417d9e;
  --table-text-color-2: #ff6262;
  --table-text-color-3: #358e65;
  --table-text-color-4: #3eafa4;
  --table-text-color-5: #40c57b;
  --table-options-color: #ffa500;
  --table-options-hover-color: #ffa50042;
  --dropdown-line-hover: #634747;
  --active-color: #0f980f;
  --passive-color: #bf1e0e;
}

body {
  background-color: var(--bg-color);
}

.theme-switch-wrapper {
  display: flex;
  align-items: center;
  position: -webkit-sticky;
  position: sticky;
  top: 10px;
}

.theme-switch {
  display: inline-block;
  height: 26px;
  position: relative;
  width: 52px;
}

.theme-switch input {
  display: none;
}

.slider {
  background-color: #ccc0;
  border: 3px solid #a5a4a4;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
}

.slider:before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: #a5a4a4;
  bottom: 1.8px;
  left: 3px;
  transform: rotate(-45deg);
  transition: .4s;
  border-radius: 100%;
}

#darklightswitch:checked+.slider {
  border: 3px solid #3694ff;
}

#darklightswitch:checked+.slider:before {
  box-shadow: 5px 5px 0 0 #3694ff;
  background: 0 0;
  left: 21.1px;
}

.slider.round {
  border-radius: 34px;
}
</style>

<!-- LINK OTHER CSS STYLESHEETS -->
</head>

<body>

<!-- CONTENT HERE -->

<script>
  // Pure JS not need for jQuery
  // getElementById will save you some Millisecond
  const toggleSwitch = document.getElementById('darklightswitch'); 
  // First thing first check for saved value
  const currentTheme = localStorage.getItem("theme") || null;
  if (currentTheme) {
    document.body.setAttribute("data-theme", currentTheme);
    if (currentTheme === "dark") toggleSwitch.checked = true
  }
  // If not for some reasons set a fallback
  else {
    document.body.setAttribute("data-theme", "light");
  }

  toggleSwitch.addEventListener("change", e => {
    if (e.target.checked) {
      document.body.setAttribute("data-theme", "dark");
      localStorage.setItem("theme", "dark");
    } else {
      document.body.setAttribute("data-theme", "light");
      localStorage.setItem("theme", "light");
    }
  });
</script>
<!-- OTHER JS SCRIPTS Add defer tag to all -->
<script src="js/jquery-3.3.1.min.js" type="text/javascript" defer></script>
<script src="js/sweetalert2.all.js" defer></script>
<script src="js/jquery.maskedinput.js?ver=1" type="text/javascript" defer></script> 

</body>

您可以测试现场示例 Here

【讨论】：

  • 优秀。一切正常。谢谢你的帮助。
【解决方案2】：

您要做的是在打开body标签后立即调用javascript函数。然后在函数中获取主题类型是深色还是浅色并将该类添加到正文。

为此，您的 css 必须像我的那样具有结构。

这种方式你不需要加载或后端来处理它

div, p{
  width: 200px;
  height: 200px;
  color: red;
}
body.dark div, body.dark p{
  background: black;
}

body.light div, body.light p{
  background: grey;
}

body.dark .heading{
  font-size: 6em;
}

body.light .heading{
  font-size: 1.7em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  function changeTheme(){
    var themeClassName = "dark"; // get it from cookie
    $("body").addClass(themeClassName);
  }
</script>

<body>
  <script>changeTheme()</script>
  
  <div>
    hello
  </div>
  <p class="heading">
    world
  </p>

</body>

【讨论】：

  • 这可能是另一种解决方案。但我花了很多时间。
  • 如果您有两个单独的 css 文件用于您的主题，那么重组它不会花费很多时间。否则，是的。你需要时间来制作两个主题
【解决方案3】：

我为自己找到了完美的解决方案。 @awran5 的解决方案效果很好。但对于缓慢的互联网和电脑来说，这就像地狱一样。因为该网站是一块一块地打开的。那看起来也不是很好。我正在为其他寻求者写这篇文章。

我的解决方案是数据库。

首先，我从数据库中获取人物的主题选择。

$getheme = mysql_query("SELECT theme FROM accounts WHERE id='$accountid'");
$pull = mysql_fetch_array($getheme);
$currentheme = $pull['theme'];

(我知道，mysql_很老了，我会尽快换成mysqli_的。)

我将这个添加到正文中。

<body data-theme="<?php echo $currentheme ?>">

我给输入一个名字。

<input type="checkbox" id="darklightswitch"  name="darklightswitch" />

Switch 需要知道我们所处的主题。

const toggleSwitch = document.querySelector('input[name="darklightswitch"]');
const currentTheme = "<?php echo $currentheme; ?>";
if (currentTheme === 'dark') {
    toggleSwitch.checked = true;
}

最后，当我们更改 Switch 时，新的主题值应该会进入数据库。

$('input[name=darklightswitch]').click(function(){
    var id = $(this).attr('id');

    if($("#darklightswitch").prop('checked') == true) {
        var theme = "dark";
    } else if ($("#darklightswitch").prop('checked') == false) {
        var theme = "light";
    }

    $.ajax({
        type:'POST',
        url:'themeswitch.php',
        data: {aid: <?php echo $accountid; ?>, theme: theme},
        success:function(result){
            location.reload();
        }
    });

});

主题开关.php

$account_id = htmlspecialchars($_POST["aid"]);
$theme = htmlspecialchars($_POST["theme"]);

mysql_query("UPDATE accounts SET theme = '$theme' WHERE id='$account_id'");

最终内容；

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="robots" content="noindex, nofollow">
    <style type="text/css">
        [data-theme="light"] {
            --bg-color: #2f2f2f;
            --panel-bg: #fff;
            --panel-bg-hover: #dcd8d8;
            --panel-border: #22a7f0;
            --panel-title-color: #22a7f0;
            --panel-title-hover: #0072b1;
            --panel-subtitle-color: #ffa500;
            --panel-subtitle-color-hover: #22a7f0;
            --panel-text-color: #000000;
            --panel-button-bg: #dc4a4a;
            --panel-button-hover-bg: #d83535;
            --panel-button-text-color: #ffd7f8;
            --panel-button-text-hover-color: #ffd7f8;
            --input-bg: #e6e6e6;
            --input-border-color: #ff0000;
            --input-label-color: #ff0000;
            --input-label-color-focus: #ff0000;
            --input-text-color: #000000;
            --search-input-bg: #fff;
            --table-shorting: #22a7f0;
            --table-text-color-1: #417d9e;
            --table-text-color-2: #ff0000;
            --table-text-color-3: #008000;
            --table-text-color-4: #b17b17;
            --table-text-color-5: rgb(87, 89, 146);
            --table-options-color: #22a7f0;
            --table-options-hover-color: #e6e6e6;
            --dropdown-line-hover: #ddd;
            --active-color: #87D37C;
            --passive-color: #E74C3C;
        }
        [data-theme="dark"] {
            --bg-color: #2f2f2f;
            --panel-bg: #1e262c;
            --panel-bg-hover: #2f3a42;
            --panel-border: #ffa500;
            --panel-title-color: #ffa500;
            --panel-title-hover: #ffffffc2;
            --panel-subtitle-color: #c3c6ce;
            --panel-subtitle-color-hover: #ffa500;
            --panel-text-color: #ffffff;
            --panel-button-bg: #dc4a4a;
            --panel-button-hover-bg: #d83535;
            --panel-button-text-color: #ffd7f8;
            --panel-button-text-hover-color: #ffd7f8;
            --input-bg: #1a2025;
            --input-border-color: #3694ff;
            --input-label-color: #cad1ff4d;
            --input-label-color-focus: #3694ff;
            --input-text-color: white;
            --search-input-bg: #1e262c;
            --table-shorting: #ffa500;
            --table-text-color-1: #417d9e;
            --table-text-color-2: #ff6262;
            --table-text-color-3: #358e65;
            --table-text-color-4: #3eafa4;
            --table-text-color-5: #40c57b;
            --table-options-color: #ffa500;
            --table-options-hover-color: #ffa50042;
            --dropdown-line-hover: #634747;
            --active-color: #0f980f;
            --passive-color: #bf1e0e;
        }
    </style>
    <!-- FONT -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet prefetch">
    <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
    <link rel='stylesheet' href='https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css'>
    <!-- JS -->
    <script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
    <!-- CSS -->    
    <link href="css/style.css?ver=22" rel="stylesheet" type="text/css" />
</head>
<?php
$getheme = mysql_query("SELECT theme FROM accounts WHERE id='$accountid'");
$pull = mysql_fetch_array($getheme);
$currentheme = $pull['theme'];
?>
<body data-theme="<?php echo $currentheme ?>">
    <div class="theme-switch-wrapper">
        <label class="theme-switch" for="darklightswitch">
            <input type="checkbox" id="darklightswitch" name="darklightswitch" />
            <div class="slider round"></div>
        </label>
    </div>
    <script type="text/javascript">
        $('input[name=darklightswitch]').click(function(){
            var id = $(this).attr('id');

            if($("#darklightswitch").prop('checked') == true) {
                var theme = "dark";
            } else if ($("#darklightswitch").prop('checked') == false) {
                var theme = "light";
            }

            $.ajax({
                type:'POST',
                url:'themeswitch.php',
                data: {aid: <?php echo $accountid; ?>, theme: theme},
                success:function(result){
                    location.reload();
                }
            });

        });
    </script>





    // some content





    <script type="text/javascript">
        const toggleSwitch = document.querySelector('input[name="darklightswitch"]');
        const currentTheme = "<?php echo $currentheme; ?>";
        if (currentTheme === 'dark') {
            toggleSwitch.checked = true;
        }
    </script>
    <script src='js/jquery.dataTables.min.js?ver=2.00' type="text/javascript"></script>
</body>
</html>

【讨论】：

  • 你不需要js来更新开关。你可以把它全部放在服务器端
【解决方案4】：

您还可以添加在 js 加载时显示的 Loading Splash。

【讨论】：

  • 好吧...有人可以在 cmets 上向下滚动，或者他们可以向下滚动并轻松找到添加飞溅的解决方案。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-06-08
  • 2018-12-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode