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.
Lilcoder pro premium commented 5 months ago
Thanks, when I am adding that code snippet to styles.scss, I get compiler error, I am using the Pro plan of MDBootstrap for Angular.
./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): 22.4px and 1rem have incompatible units. ╷ 1092 │ $nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ node_modules/mdb-angular-ui-kit/assets/scss/bootstrap/_variables.scss 1092:37 @import mdb-angular-ui-kit/assets/scss/mdb.scss 7:9 @import src/styles.scss 42:10 root stylesheet
./src/styles.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): 22.4px and 1rem have incompatible units. ╷ 1092 │ $nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ node_modules/mdb-angular-ui-kit/assets/scss/bootstrap/_variables.scss 1092:37 @import mdb-angular-ui-kit/assets/scss/mdb.scss 7:9 @import src/styles.scss 42:10 root stylesheet
✖ Failed to compile.
Arkadiusz Idzikowski staff commented 5 months ago
Does your styles.scss file only contain the code given in the answer above? Which MDB5 Angular and Angular versions do you use in your project?
Lilcoder pro premium commented 5 months ago
I use Angular 17 and MDB5 Angular pro VS 6.1.0 The 'styles.scss' also includes the following:
@import 'alerts', 'badges', 'buttons', 'cards', 'colors', 'dropdown', 'icons', 'inputs', 'labels', 'modal', 'pagination', 'popover', 'table', 'toastr';
@import 'app/_layout/header/header.component.scss'; @import './mdb-theme.scss';
Lilcoder pro premium commented 5 months ago
I got it to work, I just had to paste your code snippet above the other content, so it is read first
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- 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