# Implementing Dark mode with Bulma
A modern-day front-end developer is almost always expected to be able to implement User interfaces (UIs) into working code with a pixel-perfect standard. Over time there have been various CSS libraries that help us achieve this standard more efficiently and require much less code.
In this article, we would be paying attention to Bulma, a free, open-source CSS library that enables frontend developers to style their markup code, and how we can implement a dark mode feature with it.
### What is Bulma?
As mentioned earlier, Bulma is a CSS library built to help frontend developers better style their markup code and build responsive web layouts not only by providing utility classes that can be used on your frontend project for various effects but also by providing ready-to-use frontend components.
For more information on Bulma and how to get started, [click here](https://bulma.io/)
## Prerequisites
Although there is no required knowledge to get started with Bulma, there are a few things you should be expected to already know to follow along smoothly which include:
* HTML, CSS and JavaScript
* CSS preprocessor (Saas).
## Dark Mode with Bulma
Now we’ve been able to familiarize ourselves with what Bulma is and why we love and use it so much, let’s dive into how we can implement dark mode using Bulma using. To get started, first we need to:
### Setup your project with Bulma
For us to utilize the features of Bulma in our project, we have to install Bulma and set up our project file directory. There are various methods to install Bulma and get started which are:
* Using a CDN
* Download Bulma's official release file [here](https://github.com/jgthms/bulma/releases/download/0.9.4/bulma-0.9.4.zip)
* Install a package manager (npm or yarn)
For the sake of this article, we shall be downloading Bulma's official compiled file and embedding it in our project directory.
In the image above you will notice our Bulma file in our assets folder. Then we will import Bulma into our HTML file.
```
<!---index.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dark mode with Bulma!</title>
<link rel="stylesheet" href="/assets/bulma/css/bulma.css">
<link rel="stylesheet" href="/index.css">
</head>
<body class="">
<section class="section">
<div class="container">
<h1 class="title">
Hello World
</h1>
<p class="subtitle">
My first website with Bulma!
</p>
<button id='toggle'>
Toggle Theme
</button>
</div>
</section>
</body>
<script src="index.js"></script>
</html>
```
To learn more about other installation options for Bulma [click here](https://bulma.io/documentation/overview/start/)
### Customize both themes using Bulma's Sass variables
Now that we have Bulma available to us in our project, the next step is customizing each theme using Bulma’s Saas variables. Although this process is beginner-friendly, knowledge of [Saas](https://sass-lang.com/) will be required for easy follow-along.
* **Install and Setup Sass**
Since we will be writing styles in Sass, our first step would be to install and set up sass after which we can now create our .sass or .scss file.
If you are unfamiliar with the sass installation process, you can find out more [here](https://https://sass-lang.com/)
* **Import Bulma's variables into the Sass file**
Now that sass has been installed and set up in our project, we can now import Bulma’s sass file which has the variables we intend to customize and update.
```
//styles.scss
// Import Bulma sass file
@import "./assets/bulma/bulma.sass";
```
* **Updating Bulma Sass variables**
```
//styles.scss
body {
background-color: $light;
height: 100vh;
transition: all 0.4s ease;
}
// Some styling
body .subtitle,
body .title {
color: $dark;
}
body.dark {
background-color: $dark;
color: $light;
}
body.dark .subtitle,
body.dark .title {
color: $light;
}
.section {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
text-align: center;
}
button{
cursor: pointer;
border: none;
color: $light;
padding: .8rem;
background: $dark;
border-radius: 6px;
}
body.dark button {
background: $light;
color: $dark;
}
```
From the piece of code above you will notice we now have access to Bulma’s global variables and are updating them with our custom brand colors. We have also added some styling for both light and dark themes which is being distinguished by a .dark class.
### Some JavaScript to toggle themes
Congratulations, you have made it this far. At this point, we have both themes ready. We will be adding a button to toggle the themes once clicked using JavaScript.
```
//App.js
const body = document.querySelector('body');
const toggle = document.getElementById('toggle');
toggle.addEventListener("click", () => {
let bodyCheck = body.classList.contains('dark');
if (bodyCheck) {
body.className = ''
} else {
body.className = "dark"
}
})
```
If everything is done right, you should achieve a similar experience to this
## Conclusion
Congrats! You have made it to the end and I hope you were able to learn this awesome feature with Bulma. Take it up as a challenge and explore other wonderful features that come with Bulma and perhaps do something even more awesome with it.
## Resources
You can find the complete code for this on [GitHub](https://github.com/OkeOgbe/bulma-dark-mode)
The live demo can also be found [here](https://elegant-tartufo-bb0a67.netlify.app/)
Sign in with Wallet
Connect another wallet