Implement Dark Mode without any Library or Utility
You won’t believe how simple it is
Introduction
Dark mode was becoming a trend nowadays. The trend came out when Apple adopted dark mode in the latest iOS and then the Android phone also came along. Dark mode is a must have feature on nowadays’s websites, almost every website that I visit has a dark mode feature. But still some people don’t know how to implement the right way, so sometimes they prefer to install a new library. Today I want to show you how simple it is to implement dark mode without any library.
Deep dive to code Example
This is just an example body html. I put a checkbox in the top of the page for toggling the dark mode feature. I use the “onClick” as an example toggling the dark mode. For each content I give these CSS class names to help you differentiate and see the result.
The magic and tricks come in these CSS files. You can see above I use :root selector, CSS Variables and Data Attributes. The :root selector matches the document’s root element. It can be really useful for declaring global CSS Variables. HTML5 data Attributes is a HTML5 feature to allow us to store extra information on our DOM.
First, in the :root selector, I define all the default (Light Mode) background colour and text colour into a variable. After that, I also create new CSS selector using Data Attributes. The name I gave is Theme, and the value is dark. Inside the selector, I define all the background colour and text colour for the dark mode.
Lastly, I write all the text and background colour variables to the CSS class that I expect will change when I toggle the dark mode.
Finally, the JavaScript code, first, I initiate the “currentTheme” variable as “light” for default, and then I get a checkbox, info and body DOM preparing for DOM manipulation.
The “changeTheme” function is called when you toggle the checkbox DOM. Basically, this function is used for toggling the “currentTheme” and set the data attribute in the body tag. After toggling the body should be like this below.
<body data-theme="dark"></body>And then CSS will automatically override the default colour variable that we define in :root to the [data-theme=”dark”] selector.
Demo Example
Bonus tips
You can save the user preference with local storage, so when a user visits your website for the second time, the theme will automatically adjust the last time the user picks it.
// define localStorage key
const localStorageThemeKey = "localStorageThemeKey"// Getting the currentTheme from localStorage, when the localStorage return undefined will automatically set to light
const getCurrentTheme =
localStorage.getItem(localStorageThemeKey) || "light"// Save user input to the localStorage with localStorage key and currentTheme right now
localStorage.setItem(localStorageThemeKey, currentTheme);
Conclusion
Dark mode is very simple, and you don’t need a library to implement that.
That’s it and if you found this article helpful, let us know in the comments. You can also follow me on Medium and LinkedIn
