Topic: Angular Pro theme / scss theming
What is the proper procedure to theming using the Angular Pro theme? I am trying to import bootstrap and change styles in my style.css folder. I need to change the primary colors for my whole app.
This is the closest I've gotten, but it seems to break the MDB styles:
@import "../node_modules/ng-uikit-pro-standard/assets/scss/core/bootstrap/functions";
@import "../node_modules/ng-uikit-pro-standard/assets/scss/core/bootstrap/variables";
$theme-colors: (
primary: $red
);
/* finally, import Bootstrap */
@import "../node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss";
Damian Gemza staff answered 6 years ago
Dear tim2,
If you want to overwrite one of our MDB variables, you have to overwrite one of your desired variables (for example $primary-color: red
) and import core/bootstrap/functions
, core/bootstrap/variables
, core/colors
, core/mixins
, core/variables
, core/global
, core/helpers
and at the end file which you want to overwrite (for example buttons), free/buttons
in the styles.scss
file.
Here's the code which allow you to overwrite primary
class in buttons:
.scss:
$primary-color: red;
@import "~ng-uikit-pro-standard/assets/scss/core/bootstrap/functions";
@import "~ng-uikit-pro-standard/assets/scss/core/bootstrap/variables";
@import "~ng-uikit-pro-standard/assets/scss/core/colors";
@import "~ng-uikit-pro-standard/assets/scss/core/mixins";
@import "~ng-uikit-pro-standard/assets/scss/core/variables";
@import "~ng-uikit-pro-standard/assets/scss/core/global";
@import "~ng-uikit-pro-standard/src/lib/assets/scss/core/helpers";
@import "~ng-uikit-pro-standard/assets/scss/free/buttons";
Best Regards,
Damian
tim2 pro commented 6 years ago
_Edited_I've tried your code above. It doesn't seem to work unless i add: @import "~ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss"; at the very bottom (but then the mdb designs break).
tim2 pro commented 6 years ago
EDIT: Adding @import "~ng-uikit-pro-standard/assets/scss/mdb.scss"; fixes the overall mdb design. This still is not changing btn-primary though, but it does change link colors, text-primary, etc..
tim2 pro commented 6 years ago
EDIT: It looks like btn-primary color is coming from: $skins: () !default; $skins: map-merge(( "white": ( "skin-primary-color": #4285F4, "skin-navbar": $white, "skin-footer-color": #6f7178, "skin-accent": #4285F4, "skin-flat": #F9F9F9, "skin-sidenav-item": #4285F4, "skin-sidenav-item-hover": rgba($black-base, .05), "skin-gradient-start": #ababab, "skin-gradient-end": $white, "skin-mask-slight": rgba($white, .5), "skin-mask-light": rgba($white, .65), "skin-mask-strong": rgba($white, .8), "skin-sn-child": #4285F4, "skin-btn-primary": #4285F4, "skin-btn-secondary": #fc685f, "skin-btn-default": #454545, "skin-text": #424242 ),
tim2 pro commented 6 years ago
I was able to get it working by taking the entire $skins: map-merge((...)) and adding it in my style.css and then adding an the @import "~ng-uikit-pro-standard/assets/scss/mdb.scss"; at the end.
This takes up alot of space though... is there a way to cherry-pick what I need from skins?
Damian Gemza staff commented 6 years ago
Tim,
Unfortunately, there's no possibility to cherry-pick what you need from skins. You have to iterate through all of the skins.
Best Regards,
Damian
Vladislav Stoitsov answered 5 years ago
What if I want to overwrite globally?
Damian Gemza staff commented 5 years ago
Then you have to overwrite the variables in the global styles.scss
file.
Vladislav Stoitsov answered 5 years ago
This is part of angular.json
"styles": [
"node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
"node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
"node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
"node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
"node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss",
"node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss",
"src/assets/scss/styles.scss"
],
and I can override only some variables. For example I can override $theme-colors but I cannot override $breadcrumb-bg or $btn-box-shadow
Damian Gemza staff commented 5 years ago
Dear @Vladislav Stoitsov
To overwrite variables which are used in one of the components - for example, buttons, you have to import the buttons scss file in styles.scss
, and then overwrite the variables.
I described this in the previous answer (3 months ago).
Best Regards,
Damian
Maximiliano Cesán Herrera answered 4 years ago
What i do for override? I import all mdb.scss into my styles.scss Now i remove from angular.json the import of mdb (be sure u have styles.scss imported) Now Styles.scss is imported with mdb.scss now create new color.scss in src/scss and copy all core/color.scss to them. Now override styles.scss color import for your new color.scss. Now u can create safe new variables and modify themes
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.4.3
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No