Soft UI Dashboard - Dark Mode Support (free sample)

#webdev #dashboards #darkmode #opensource

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
- Sources: CSS and 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

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.