Before you go, check out these stories!

Hackernoon logoImplement Themes/Dark Mode in Your Front-End in 5 Minutes by@bearded-impala

Implement Themes/Dark Mode in Your Front-End in 5 Minutes

Author profile picture

@bearded-impalaSiddhesh More

Full Spectrum Developer. Solution Designer.

No matter if you write your own CSS or use frameworks such as Semantic or Bootstrap, implementing dark mode is often the most procrastinated feature

Let’s cut to the chase:

1. Write a CSS mixin containing classes of the DOM elements we want to style as a part of our theme

.theme(@bg-color,@font-color,@menu,@card-bg) {
  background-color: @bg-color;
  color: @font-color;
  .menu {
    background-color: @menu;
    .menu.transition.visible {
      background-color: @menu;
  .text {
    color: @font-color;
  .ui.card {
    background-color: @card-bg;
    .meta {
      color: @font-color;

2. Including our mixin in the style-sheet meant to be imported in the entry javascript(index.js) or the topmost component(App.js)

@import "./Theme.less";

@dark-font: #333;
@light-font: rgba(255, 255, 255, 0.9);

@algae-bg: rgb(191, 211, 206);
@algae-menu: #116466;
@algae-card: rgba(140, 170, 150, 0.7);
body.algae {

@charcoal-bg: #373737;
@charcoal-menu: #272727;
@charcoal-card: #1b1c1d;
body.charcoal {

@lavender-bg: rgb(224, 191, 224);
@lavender-menu: rgb(180, 140, 180);
@lavender-card: rgba(219, 212, 196, 0.699);
body.lavender {

@paper-bg: #f4f4f4;
@paper-menu: rgba(110, 110, 110, 1);
@paper-card: #fff;
body.paper {

3. Write your code to allow the user to change the class of the <body> element. In my case, I have provided a drop-down.

setTheme(themeName) {
  document.getElementById("body").className = themeName;
  localStorage.setItem("theme", themeName);
<Dropdown text="Select Theme" item>
     onClick={() => this.setTheme("algae")}
     onClick={() => this.setTheme("charcoal")}
     onClick={() => this.setTheme("lavender")}
     onClick={() => this.setTheme("paper")}

Now depending on whether you want a light switch to go dark or a dropdown to select from multiple themes (I’m using a DropDown from Semantic UI), you can have the same setTheme method for the onChange event.

4. Everything should work now unless the user refreshes. The setTheme method already sets the body class and stores user’s selection to localStorage, but we need to read that on a page load or refresh. Place the following script in your app’s entry point, either index.html or index.js, preferably the latter.

window.onload = function () {
  if (localStorage.getItem("theme")) {
    document.getElementById("body").className = localStorage.getItem("theme") || "paper";

All done !!

And the GitHub page of that repository,

Thanks for reading.


Join Hacker Noon

Create your free account to unlock your custom reading experience.