https://github.com/app-generator/sample-bootstrap5-dark-mode

Soft UI Dashboard - Dark Mode Support | AppSeed
https://github.com/app-generator/sample-bootstrap5-dark-mode

appseed creative-tim soft-ui-dashboard

Last synced: 13 days ago
JSON representation

Soft UI Dashboard - Dark Mode Support | AppSeed

• Host: GitHub
• URL: https://github.com/app-generator/sample-bootstrap5-dark-mode
• Owner: app-generator
• License: mit
• Created: 2022-06-18T05:37:55.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-06-22T14:28:31.000Z (over 2 years ago)
• Last Synced: 2024-12-15T21:18:59.734Z (18 days ago)
• Topics: appseed, creative-tim, soft-ui-dashboard
• Language: SCSS
• Homepage: https://appseed.us/product/soft-ui-dashboard/
• Size: 27.8 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Soft UI Dashboard - `Dark Mode` Support

Soft UI Dashboard is built with over 70 frontend individual elements, like buttons, inputs, navbars, navtabs, cards or alerts, giving you the freedom of choosing and combining. All components can take variations in colour, that you can easily modify using SASS files and classes.




> **Enhanced version** of the [original version](https://www.creative-tim.com/product/soft-ui-dashboard?AFFILIATE=128200) 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 Enhancement](https://user-images.githubusercontent.com/51070104/174716339-53c95c87-3842-4878-aef8-a675b0eca5b1.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 `