Topic: How to add dark-theme to an existing angular project
I'm currently working on an Angular project and would like to integrate a dark mode option into the user interface. Despite going through your documentation, I've found the steps provided to be somewhat unclear. Would you be able to provide more details on how to add the dark mode feature to our existing Angular project?
Also, if possible, it would be immensely helpful if you could offer a downloadable Angular project with dark mode already implemented. This would allow us to better understand how it should be set up and integrated within our project.
Basic styles.scss structure should look like this:
@import '@fortawesome/fontawesome-free/css/all.css';
@import 'mdb-angular-ui-kit/assets/scss/mdb.scss';
$my-theme-primary: #1266f1;
$my-theme-secondary: #b23cfd;
$my-dark-theme: mdb-dark-theme($my-theme-primary, $my-theme-secondary);
.dark {
@include mdb-theme($my-dark-theme);
}
Toggling class .dark on body element will toggle theme. In the skin toggler example is a simple implementation of such feature.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Premium
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 6.0.0
- Device: Desktop
- Browser: Chrome
- OS: MacOS
- Provided sample code: No
- Provided link: Yes