1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Angular Pro theme / scss theming

tim2 pro asked 5 years ago

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";

Maximiliano Cesán Herrera free 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

Vladislav Stoitsov free 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

Vladislav Stoitsov free 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.

Damian Gemza staff answered 5 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 5 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 5 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 5 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 5 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 5 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
Write
Create snippet
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: 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
Tags
About author
tim2
Pro User 10Support score
2Questions 0Answers 0Snippets