Topic: How to add dark-theme to an existing angular project

Lilcoder premium asked 3 weeks ago


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.


Rafał Seifert staff answered 3 weeks ago


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.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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