Today, Xiaoma SEO will share with you how to manually add a night mode to your website, hoping to help you. Please pay more attention to Xiaoma SEO blog.
First, we need to open the“footer.php”Files, in“</body></html>”Add the following code before:
<script type="text/javascript">function switchNightMode(){var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';if(night == '0'){document.body.classList.add('night');document.cookie = "night=1;path=/"Console. log ('night mode on ');}else{document.body.classList.remove('night');document.cookie = "night=0;path=/"Console. log ('night mode off ');}}</script>
Save the file and refresh it.
If you want to achieveAutomatically switch to night mode，The following codes(Copy directly):
22 and 5 in the code start at 22:00 p.m. and end at 5:00 the next day. In fact, this code is not rigorous. Why do you say that?This code is effective for websites that do not record cookies. Once the night mode is manually turned on or off, it will automatically fail. In short, there is no way to perfectly fit the cookies in the browser unless the cookies are cleared (my technology is not good). In fact, we can make a judgment in js, that is, whether the cookies are in the night mode at 22:00 every day,If not, a dialog box will pop up asking whether to enable night mode. If yes, there will be no prompt.
Then open the "header. php" file of the website. We need to fill in a button for the website to manually turn on and off the night mode:
Copy the above code, place it where you think it is appropriate, then save it, log in to the background, clear the theme template cache, compile, open the home page, and test whether the night mode is effective.
In fact, the tutorial is generally completed until now, because you will find in the process of testing that turning on the night mode has no effect,,,, and yes, because you do not have css that can adapt to the night mode, this tutorial cannot be written, because the div framework and css names of each theme template are different and cannot be unified, so you need to find the corresponding class class by yourself,Then add the style of night mode, for example:
Body.night DIV name{background-color: #263238;color: #aaa; }
In this way, the background of the night mode will be changed to black, and the font will be white. If there are too many css frameworks on the website, I believe this is definitely a big hole. Oh, yes, to prevent overlapping css styles, it is recommended to adapt the code of night mode at the bottom of the css style sheet.
After all these configurations are completed, the front desk will check the home page, and you will find that the flash screen will appear in the night mode. That is, the moment you open a page, it is the normal mode, and then it will switch to the night mode after 1 second (when the computer speed is slow, it can be more than 1 second). Wow, it is simply blind?Don't worry. I'll teach you a way. Open it“header.php”Files, in<body>Add the following code on:（This code is only applicable to Z-Blog）
This solves the flash screen bug. When the cookie related fields are detected, directly output the body's class as night, which can prevent the page from flashing.Henan SEO reminds everyone here that you should make a backup before modifying the code, just in case.
