Along with the Dark mode trend, this article will help you put in your blog / website the dark mode toggle button. Not only turn on and off manually, but also automatically turn on and off according to certain hours. This automatic feature currently I have not seen any blog / website including Youtube or Twitter. In addition, these settings are saved on the browser and when the user visits the next time, the dark mode remains the same as before shutting down the browser. This means that the user is left to darken and manually then turn on the browser next time it is still dark mode.
Select the time to switch to dark mode (default is from 10pm to 7pm) then press Get code. From
Insert the above code after the tag <body>.
Insert the following code where you want to display the dark mode toggle button:
<div class = 'dark-mode'>
<button class = 'toggle' onclick = 'toggle ()' type = 'button' />
<button class = 'mode' onclick = 'mode ()' type = 'button' />
</div>
The last step, also the most time consuming one: design a dark theme for your blog / website. Because it is a color, we are interested in background color (background-color), text color (color), border-color ... Suppose blog / website has class header declared as follows:
.header {
background-color: # ddd ;
Color: # 000 ;
}
Then we will add the dark class with the background color and the font color tends to reverse the original color as follows:
.header {
background-color: # ddd ;
Color: # 000 ;
}
.dark .header {
background-color: # 444 ;
color: # eee ;
}
After successful implementation, now your blog / website has up to 2 interfaces to "change the wind", and most of all, it is gentle when in the night mode.