Soft UI Dashboard - Dark Mode Support (free sample)
Tags: webdev, dashboards, darkmode, opensource
Published: 2022-06-22 14:43:35

---
title: Soft UI Dashboard - Dark Mode Support (free sample)
published: true
description: Learn how the Dark Mode was implemented on top of Soft UI Dashboard, a popular open-source dashboard template
tags: webdev, dashboards, darkmode, opensource
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5io1xcpvrhzm7ugoa735.png
canonical_url: https://blog.appseed.us/soft-ui-dashboard-dark-mode-support/
---
Hello coders! 

This article provides a short explanation of the **dark mode** enhancement crafted on top of `Soft UI Dashboard`, a popular open-source template released by `Creative-Tim`. The project can be found on Github, and the [sources](https://github.com/app-generator/sample-bootstrap5-dark-mode), based on the permissive (MIT) license, can be used in commercial projects or eLearning activities. Thanks for reading!

> Enhanced version of the [original template](https://www.creative-tim.com/product/soft-ui-dashboard) with Dark Mode - [LIVE Demo](https://django-soft-ui-dashboard.appseed-srv1.com/)

- 👉 [Soft UI Dashboard](https://appseed.us/product/soft-ui-dashboard/django/) `Dark Support` - Django Version (free product)
- 👉 [Soft UI Dashboard](https://appseed.us/product/soft-ui-dashboard/flask/) `Dark Support` - Flask Version (free product)
- 🚀 [Soft Dashboard Generator](https://appseed.us/generator/soft-ui-dashboard/) - LIVE & Free Service

---

![Soft UI Dashboard - Dark Mode Support (animated presentation)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/15k2xs596pesno805f31.gif)

---

## 👉 How it works

This enhancement was made by coding the following steps:

- Create a new `JS` file that handles the user interactions
  - Source code: [dark-mode-handler.js](https://github.com/app-generator/sample-bootstrap5-dark-mode/blob/main/assets/js/dark-mode-handler.js)
- CSS/SCSS files for the style changes
  - Sources: [CSS](https://github.com/app-generator/sample-bootstrap5-dark-mode/blob/main/assets/css/dark-theme-core.css) and [SCSS](https://github.com/app-generator/sample-bootstrap5-dark-mode/blob/main/assets/scss/dark-theme-core.scss)
- Gulp scripts update to handle the new SCSS file

The new files (dark-mode-handler.js and dark-theme-core.css) are included in the pages. The CSS file goes to the header and the JS goes at the bottom, just before closing </body>.

On top of this, the dark mode is provided to be persistent and the current state of the theme (dark or light) is saved in the local storage on the browser.

---

### 👉 JS Code

Once the dark theme control is saved in the navigation bar, and a simple event listener is attached that handles the user interaction.

```javascript
const themeSwitch = document.getElementById("theme-switch");
const themeIndicator = document.getElementById("theme-indicator");
const page = document.body;

const themeStates = ["light", "dark"]      // here we manage the states
const indicators = ["fa-moon", "fa-sun"]   // here is managed the icon 
const pageClass = ["bg-gray-100", "dark-page"] // CSS class, where `bg-gray-100` was the original, light theme 

let currentTheme = localStorage.getItem("theme"); // Use the browser localStorage for persistence 

function setTheme(theme) {
    localStorage.setItem("theme", themeStates[theme])
}

function setIndicator(theme) {
    themeIndicator.classList.remove(indicators[0])
    themeIndicator.classList.remove(indicators[1])
    themeIndicator.classList.add(indicators[theme])
}

function setPage(theme) {
    page.classList.remove(pageClass[0])
    page.classList.remove(pageClass[1])
    page.classList.add(pageClass[theme])
}


if (currentTheme === null) {
    localStorage.setItem("theme", themeStates[0])
    setIndicator(0)
    setPage(0)
    themeSwitch.checked = true;
}
if (currentTheme === themeStates[0]) {
    setIndicator(0)
    setPage(0)
    themeSwitch.checked = true;

}
if (currentTheme === themeStates[1]) {
    setIndicator(1)
    setPage(1)
    themeSwitch.checked = false;
}

themeSwitch.addEventListener('change', function () {
    if (this.checked) {
        setTheme(0)
        setIndicator(0)
        setPage(0)
    } else {
        setTheme(1)
        setIndicator(1)
        setPage(1)
    }
});
```

---

### 👉 Dark Mode CSS File

Keep in mind the rules of specificity ([read more about](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)) it we start our SCSS file with the dark theme class selector for the body tag. We will write all our code inside this code block. The CSS rules are pretty straightforward.

The main thing to understand here is, that when the dark mode is toggled, our body element gets a class of dark-page otherwise, it has the default class of bg-gray-100
In our main code block, we targetted our “dark-page” class and all elements are inside this body class, thus we can easily write new styles for this.

> Tips To Easily Change Dark Mode Colors

In the dark mode, we are not overwriting every bit of the page. The accent colors will remain the same. For example, buttons, alerts, badges, icons, etc.
The things we need to take care of includes, background for body, cards, card headers, list items, navigation buttons, input elements, svg icons, fontawesome icons, switches, and tables.

---

In case this design is something that your next project might use, feel free to learn how to use `AppSeed` and generate full-stack starters in minutes using the [App Generator](https://appseed.us/generator/) (free service). The generated sources are saved under the MIT license on GitHub.

---

> Soft UI Dashboard - Generate a Flask Starter

{% embed https://www.youtube.com/watch?v=5eOj-xlgIMM %}

---

> React Soft UI Dashboard - Full-stack project with NodeJS Backend

{% embed https://www.youtube.com/watch?v=JD7m1aAiEaE %}

---

> `Thanks for reading!` For more resources and support, please access:

- ✨ More [Free Dashboards](https://appseed.us/admin-dashboards/open-source) crafted in Django, Flask, and [React](https://appseed.us/apps/react)
- ✨ More [Admin Dashboards](https://www.admin-dashboards.com/) - a huge index with products