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 Support
- Django Version (free product) - π Soft UI Dashboard
Dark Support
- Flask Version (free product) - π Soft Dashboard Generator - LIVE & Free Service
π 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
- 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
Top comments (0)