FOUC 开启灯光模式-解网

问：

我的网站上出现了一些无样式（FOUC）内容的问题。我有一个按钮可以在深色和浅色模式之间切换，默认为深色模式。

因此，在浅色模式下刷新页面时，您可以在应用浅色模式之前看到深色模式的 FOUC......我想知道如何阻止这种情况发生。

$(function() {
  var switched = $('#mode');

  switched.on("change", function() {
    if (switched.is(':checked')) {
      $('html').removeClass('dark');
      $('html').addClass('light');
      localStorage.setItem('mode', 'light');

    } else {
      $('html').removeClass('light');
      $('html').addClass('dark');
      localStorage.setItem('mode', 'dark');

    }
  });

  var mode = localStorage.getItem('mode');
  if (mode == 'dark') {
    switched.prop("checked", false);
    $('html').removeClass("light");
    $('html').addClass("dark");
  }
  if (mode == 'light') {
    switched.prop("checked", true);
    $('html').removeClass("dark");
    $('html').addClass("light");
  }

});

:root,
:root.dark {
  --color-bg: #2B2531;
  --color-fg: #FAE5C4;
}

:root.light {
  --color-bg: #DED8F0;
  --color-fg: #2F2131;
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
  <!--CSS then scripts are written here-->
</head>

<body>
  <div class="boutonmode">
    <div class="darklightmode">
      <input type="checkbox" id="mode">
      <label for="mode" class="form-check-label">Mode</label>
    </div>
  </div>
  <h1>test</h1>
</body>

</html>

JavaScript HTML CSS 暗模式

FOUC 开启灯光模式

FOUC on light mode

评论