Supporting dark mode now becomes an industry standard, I also received several requests from my viewers/readers recently thus I decided to add this feature. First thing in my mind is a plugin, I found WP Dark Mode, it’s feature rich and kind of worked until someone told me it didn’t work with cached pages. Then I found Darkmode.js, there’re several plugin versions but I decided to use the plain js version. It’s simple but makes the job done. There are only a few options you can play with, like the position, size, color and emoji of the icon, that’s it. Here’s mine.
Put the following code in header.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script> <script> const options = { bottom: '48px', // default: '32px' right: '12px', // default: '32px' left: 'unset', // default: 'unset' time: '0.3s', // default: '0.3s' mixColor: '#ddd', // default: '#fff' reduce contrast and lower the brightness. backgroundColor: '#fff', // default: '#fff' buttonColorDark: '#100f2c', // default: '#100f2c' buttonColorLight: '#fff', // default: '#fff' saveInCookies: true, // default: true, label: '🌓', // default: '' autoMatchOsTheme: true // default: true } function addDarkmodeWidget() { new Darkmode(options).showWidget(); } addDarkmodeWidget(); // No delays. </script> |
Basically, it adds an overlay layer that applies a revert color filter (white -> black, blue -> yellow, etc) to ALL the content including images and iframes as well as syntax-highlighted code which I decided to ignore later on.
To ignore a few types of content, add the following code to header.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> .darkmode-layer, .darkmode-toggle { z-index: 500; } .darkmode--activated img { filter: invert(1); } .darkmode--activated iframe { filter: invert(1); } .darkmode--activated .crayon-syntax { filter: invert(1); } </style> |
The next thing is to apply a different color theme for code under darkmode. I plan to use classic for day-mode and sublime-text for darkmode. Although the author says the persistent darkmode setting is in cookies, but turns out it’s in localstorage. There are two scenarios we need to handle. 1) page loads with darkmode on, 2) user click button to toggle darkmode. We need to change the class for code blocks accordingly.
Put the following code in the footer.php, since we need to let the syntax-highlighter do the work first.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script> var darkMode = localStorage.getItem("darkmode") == "true"; if (darkMode) { updateCrayonTheme(darkMode); } var button = document.getElementsByClassName("darkmode-toggle")[0]; button.addEventListener("click", () => { darkMode = localStorage.getItem("darkmode") == "true"; updateCrayonTheme(darkMode); }); function updateCrayonTheme(darkMode) { var x = document.getElementsByClassName("crayon-syntax"); for (var i = 0; i < x.length; i++) { x[i].classList.remove("crayon-theme-classic"); x[i].classList.remove("crayon-theme-sublime-text"); x[i].classList.add(darkMode ? "crayon-theme-sublime-text" : "crayon-theme-classic"); } } </script> |
Or don’t forget to preload the darkmode theme since only the default theme will be loaded to reduce requests and bandwidth.
Put the following code in the header.php <head> section, replace with your domain and plugin version.
|
1 |
<link rel="stylesheet" id="crayon-theme-sublime-text-css" href="https://example.com/wp-content/plugins/crayon-syntax-highlighter-2.8.6/themes/sublime-text/sublime-text.css?ver=_2.7.2_beta" type="text/css" media="all"> |
Finally it looks like below, not perfect but pretty good and easy to config. I hope wordpress could officially add dark mode in the future release such that all the themes and plugins could implement that (more work though).
