Generate a dark theme and add a toggle switch to your website in 10 minutes with pure CSS / JavaScript
Aqeel Akber
Post started 25 September 2018
PGP Verified Post HistoryClick the following icon and this website will change dramatically right before your eyes. Because I'm lazy I used the excellent browser plugin Dark Reader on the light theme of my website to generate the dark theme. Using its static theme engine, I copied the CSS dark reader generates and ordinarily injects into the page. I'm now hosting that on my server and with a bit of JavaScript attached to the moon icon, readers can now enjoy a beautiful dark theme without having to install a plugin.
Toggle between night / day mode from any page using the moon / sun icon in the header from any page.
Generate the dark theme
Install Dark Reader Browse to your website. Toggle Dark Reader on, your
website should now be dark themed. Under the extensions more tab change the
filter to static. Press F12 to inspect your page's HTML and unfold the
<head>
tag. Toggle the plugin on/off look for the extension injecting a
<style>
tag. Expand this, copy the content and save it as dark.css to be
hosted on your web server, follow the prior link to see mine. Tweak manually
if necessary.
Add a toggle switch
Include the dark style sheet along side your main theme but add the disabled
flag and an id
so we have a way of finding the element.
<head> ... <link rel="stylesheet" href="/css/main.css"/> <link disabled id="dark-reader" rel="stylesheet" href="/css/dark.css"> ... </head>
The following JavaScript function toggles the disabled
flag and stores the
status so that the users choice is persistent across the website. I am using a
slightly more complex version of this function that also sets attributes of
the toggle icon. You can find my code current to this post in this file/commit.
function dark_toggle() { var el1 = document.getElementById("dark-reader"); if(el1.disabled) { el1.disabled = false; localStorage.setItem("darkreader", "enabled"); } else { el1.disabled = true; localStorage.setItem("darkreader", "disabled"); } }
Then in HTML we can create a link that on click calls the above JavaScript function.
<a href="javascript:void(0)" onclick="dark_toggle();return false;" title="Toggle night mode"> Some text, button or image that on click toggles the dark theme for this website. I use font awesome icons. </a>
However, as it stands even though we're storing the users theme choice we're not applying it on load of a page. To do this, we need to execute a bit of code as soon as the page loads. Add the following to somewhere near the top of your HTML but after including the dark theme.
<script> if (localStorage.getItem("darkreader") == "enabled") { document.getElementById("dark-reader").disabled = false; } else { document.getElementById("dark-reader").disabled = true; } </script>
Again, my code has a bit more to it just to animate icons on click too. You can find my version current of this post in this file/commit.
Conclusions
With nothing but simple CSS and JavaScript you can provide quite a pleasant experience for readers of your blog / website. There's no need for bloat or black box plugins into your websites CMS. By actually inspecting and what Dark Reader was doing to the website behind the scenes, I was able to come up with this simple yet effective hack.
Please let me know how it goes for your website.
Acknowledgements
Kudos to all the contributors to Dark Reader for making a great piece of software: https://github.com/darkreader/darkreader