相关疑难解决方法(0)

问题是，当启用深色模式并且由于某种原因重新加载页面时，页面上会出现闪烁的白色背景，然后才变成深色。它停留了不到一秒。只是看起来不专业。我知道我已经尝试过类似的答案，但那个答案并不能解决我的问题。

正如你在 gif闪烁中看到的那样

超文本标记语言

 <header class="header" id="header">
            <nav class="nav container">
                <a href="#home" class="nav__logo smooth">
                    <svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 106.08 30" style="enable-background:new 0 0 106.08 30;" xml:space="preserve">
                        <g id="logo_x5F_brand">
                            <g>
                                <g>
                                    <polygon class="st0" points="34.39,7.99 34.39,22.01 33.05,22.78 30.35,24.34 29,25.12 27.65,25.9 26.31,26.68 24.96,27.45 
                                    23.61,28.23 22.26,29.01 20.91,28.23 19.56,27.45 18.22,26.68 16.87,25.9 15.52,25.12 14.17,24.34 11.48,22.78 10.13,22.01 
                                    10.13,7.99 11.48,7.22 12.82,6.44 14.17,5.66 15.52,4.88 16.87,4.1 18.22,3.32 20.91,1.77 22.26,0.99 23.61,1.77 26.31,3.32 
                                    27.65,4.1 29,4.88 30.35,5.66 31.7,6.44 33.05,7.22           " />
                                </g>
                            </g>
                            <g>
                                <g>
                                    <path class="st1" …

我想在白色圆圈内放置一个图标来表示切换是什么，但我无法让图标显示在正确的位置，更不用说跟随圆圈的位置了。我一直在尝试使用 Font Awesome 图标。

我想要的是

其中任何一个都是我的最终目标，但我仍然很难弄清楚如何使其发挥作用。

我现有的代码

如果有帮助的话，这就是我正在开发的网站。

这是CSS

/* Toggle Styles */
.toggle-container {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px
}

.toggle {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  border-radius: 34px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px; …