Have you ever wondered how to make a dark theme for a website? If you have, then this is right, because in order for the user to stay on your website even at night and continue reading the content, you need to create all the conditions for him. Imagine a situation, there is a light-colored website, it is convenient for reading during the day, but at night in the dark, its lightness eats out the eyes, this is the main problem that creates discomfort at night, today we will try to solve this problem and create all the conditions for comfortable reading of the site even at night.

The solution that we will use is not a clutter for the site code, just a few lines of styles, a small script and a button to turn on / off the dark version.

Installing the Dark version for the site will consist of 3 steps:

1. Set the following styles in the CSS style sheet:

html .dark * {
background-color: #1d1c1c !important;
color: #fff!important;
}

2. Install in the global block at the bottom of the site or just before the </body> tag the script:

<script type="text/javascript">
$(function(){
var gun = localStorage.getItem('name') === null || localStorage.getItem('name') === 'false' ? false : true;
$("body").toggleClass("dark", gun);
$(".change").on("click", function() {
$("body").toggleClass("dark");
var gun = $('body').is('.dark');
localStorage.setItem('name', gun);
});});
</script>

3. The last point is to set up a button to turn on/off the dark version, set up the button in a convenient place in the template:

<a type="btn" class="change"><img src="/img/darkthem1.png" alt="Dark theme for the site" title="Dark theme for the site" style="max-width: 20px; margin-top: -3px; cursor: pointer;"></a>

That's it, there's nothing complicated about it, just change the background to dark and make the text white. You can see the result of the dark theme by clicking on the light bulb or crescent icon in the site header.

source of information