Dark Mode is just better (plus how to code your own with Bulma CSS, the lazy way)

Ever since getting into the programming game and spending hours upon hours in front of my rectangular screen, I quickly learnt how much strain a bright screen can put on my eyes.

Thankfully upon following advice from fellow coders, dark themes on my text editors seems to be the way to go as it's a lot easier on your eyes.

And since then, pretty much everything I use, I aim to use a dark version if possible.

MacOS have a dark menu bar and dock (more Dark Mode features announced for MacOS Mojave).
Screen-Shot-2018-06-10-at-18.03.50
Telegram have Dark Mode on both the iOS version and MacOS version.
My favourite text-editors Visual Code, Sublime Text and PyCharm all have dark mode by default - made by coders for coders.
Twitter also got us covered!

Actually there's a really cool site made by Andrey Azimov called Dark Mode List, which displays a bunch of software that supports dark mode.

And now even my own personal website got a little dark mode to it (still need adapt the blog). Nothing major but I gave it a little experiment last night and it appears to be doing the job.

So how did I do it?

Instead of rewriting all the CSS, I made use of the Bulma CSS Framework. For those unfamiliar it can be compared to Bootstrap, but its a bit more lightweight and doesn't include any Javascript.

For my homepage, I decided to keep it as simple as possible and basically only using Bulma stuff and not too much custom CSS - at least nothing that involves custom colours. It was a bit of a mindshift for me as I usually go all out with my CSS customisation.

I made use of the "is-dark" class provided by Bulma, which basically makes the background dark and the text, etc inside of it light.
Perfect - this will be my site by default being the Dark Mode fan that I am. They also have an "is-light" which gives the opposite effect.
Screen-Shot-2018-06-10-at-18.23.37

While I probably could've just left it like this, I decided to make it a bit more interactive and give the users (like 5 of them, I'm not famous) the option to toggle Dark Mode and Light Mode.

In my HTML simply added 2 FontAwesome icons that will be clickable, each with it's own div's and one of them hidden by default, like so:

<div id="lightmode" class="is-size-5 lmode"><i class="far fa-lightbulb"></i></div>
<div id="nightmode" style="display:none;" class="is-size-5 nmode"><i class="far fa-moon"></i></div>

Okay sweet. Note the extra #id's (lightmode and nightmode) and .classes (lmode and nmode) that I created, which will be used in my Javascript.. Well jQuery to be exact.

If you're not familiar with jQuery, I recommend you give it a crash course. The code should be pretty readable though - it's quite straight forward. I'm basically just adding and removing classes from the specific elements.

$("#lightmode").click(function(){
    $('#bulmahero').removeClass('is-dark');
    $('#bulmahero').addClass('is-light');
    $("#lightmode").hide();
    $('#nightmode').show();
  });
  $("#nightmode").click(function(){
  $('#bulmahero').removeClass('is-light');
  $('#bulmahero').addClass('is-dark');
  $('#nightmode').hide();
  $('#lightmode').show();
})

If you've done it correctly, you should have a fully working dark and light mode toggle.

There's probably a lot better ways of writing this JS, like using the .toggle() function of jQuery, but for this, I decided to declare everything.

dark

If you have questions, please tweet them to me, would love to hear from you!

Show Comments