DEV Community

Cover image for Soft UI Dashboard - Dark Mode Support (free sample)
Sm0ke
Sm0ke

Posted on • Originally published at blog.appseed.us

Soft UI Dashboard - Dark Mode Support (free sample)

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, based on the permissive (MIT) license, can be used in commercial projects or eLearning activities. Thanks for reading!

Enhanced version of the original template with Dark Mode - LIVE Demo


Soft UI Dashboard - Dark Mode Support (animated presentation)


👉 How it works

This enhancement was made by coding the following steps:

  • Create a new JS file that handles the user interactions
  • CSS/SCSS files for the style changes
  • 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

Discussion (0)