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


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



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