Question

我的网站上已有夜间模式功能了一段时间。起初，我遇到了这个奇怪的错误。当我打开它，然后刷新页面时，它会瞬间变成白色，就好像它已关闭一样，然后又变黑。到目前为止，它已经运行了大约一年了，这很奇怪。我什至没有编辑文件中的任何内容。

我有本地存储，请记住页面加载时应该是浅色还是深色。当您通过javascript单击某些文本时，这种情况会发生变化。在我的CSS中，我对所有处于亮模式的样式都具有样式，然后在处于黑暗模式时，它会使用javascript向所有内容添加类。在css中，它使事情变暗了。

这是HTML：

<html>  
    <head>
        <meta charset="utf-8"/>
        <title>Test</title>

        <link rel="stylesheet" href="css/style.css" type="text/css">
        <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto' type='text/css'>

    </head>

    <body>

        <nav id="nav">
            <h1>Test Page</h1>
            <p id="lightSwitchOn">Turn on Night Mode</p>
            <p id="lightSwitchOff">Turn off Night Mode</p>
        </nav>
        <div id="mainContent">
            <p>This is a test for nightmode</p>
        </div>
    </body>
    <script src="scripts/lightSwitch.js">
</html>

这是CSS：

html {
    animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes color {
    from { color: inherit; }
    to { color: #3CB371; }
}

body {
    font-family: 'Roboto';
    font-size: 22px;
    color: #1C1C1C;
    background-color: #3fcbff;
    margin: 0 0 100px;
    padding: 25px;
}

body.dark {
    color: #FFF;
    background-color: black;
}

nav {
    background-color: #00aced;
    padding-top: 10px;
    padding-bottom: 20px;
    margin-bottom: 10px;
}

nav.dark {
    background-color: #1C1C1C;
}

/*Links*/
a {
    color: #1C1C1C;
    text-decoration: none;
}

a.dark {
    color: #FFF;
}

a:hover {
    animation: color .5s;
    color: #3CB371;
}

#lightSwitchOn {
    display: inline;
    position: absolute;
    top: 40px;
    right: 30px;
    margin-right: 10px;
    margin-bottom: 10px;
    font-size: 40px;
}

#lightSwitchOn.dark {
    display: none;
}

#lightSwitchOff {
    display: none;
    position: absolute;
    top: 40px;
    right: 30px;
    margin-right: 10px;
    font-size: 40px;
}

#lightSwitchOff.dark {
    display: inline;
}

#mainContent {
    padding: 10px;
    background-color: #00aced;
    margin-top: 10px;
    display: flex;
    justify-content: space-around; 
    flex-wrap: wrap;
}

#mainContent.dark {
        background-color: #1C1C1C;
}

这是JavaScript：

document.addEventListener("DOMContentLoaded", handleDocumentLoad);

function handleDocumentLoad() {

  var offSwitch = document.getElementById("lightSwitchOff");
  var onSwitch = document.getElementById("lightSwitchOn");

  if (offSwitch == null) {
      //Do Nothing
  } else {
      offSwitch.addEventListener('click', lightsOn);
  }

  if (onSwitch == null) {
      //Do Nothing
  } else {
      onSwitch.addEventListener('click', lightsOff);
  }

  function lightsOff() {
    localStorage.setItem('lights', 'off');

    document.body.classList.add('dark');
    for(i = 0; i < document.links.length; i++) {
        document.links[i].classList.add('dark');
    }

    document.getElementById("nav").classList.add('dark');

    document.getElementById("mainContent").classList.add('dark');

    document.getElementById("lightSwitchOff").classList.add('dark');

    document.getElementById("lightSwitchOn").classList.add('dark');
  }

  function lightsOn() {
    localStorage.setItem('lights', 'on');

    document.body.classList.remove('dark');
    for(i = 0; i < document.links.length; i++) {
        document.links[i].classList.remove('dark');
    }

    document.getElementById("nav").classList.remove('dark');

    document.getElementById("mainContent").classList.remove('dark');

    document.getElementById("lightSwitchOff").classList.remove('dark');

    document.getElementById("lightSwitchOn").classList.remove('dark');
  }

  if(localStorage.getItem('lights') === 'off') {
      lightsOff();
  } else {
      lightsOn();
  }
}

为什么屏幕在夜间模式下闪烁白色然后变黑？

0 个答案: