Angular Pro theme / scss theming

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

Add comment

Maximiliano Cesán Herrera free answered 4 years ago

0 0 Best answer

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

Add comment

Vladislav Stoitsov free answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

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

Add comment

Vladislav Stoitsov free answered 5 years ago

0 0 Best answer

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.

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

Dear tim2,

If you want to overwrite one of our MDB variables, you have to overwrite one of your desired variables (for example <code>$primary-color: red</code>) and import <code>core/bootstrap/functions</code>, <code>core/bootstrap/variables</code>, <code>core/colors</code>, <code>core/mixins</code>, <code>core/variables</code>, <code>core/global</code>, <code>core/helpers</code> and at the end file which you want to overwrite (for example buttons), <code>free/buttons</code> in the <code>styles.scss</code> file.

Here's the code which allow you to overwrite <code>primary</code> class in buttons:

.scss:

<pre class="prettyprint"><code>$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";
</code></pre>

Best Regards,

Damian

Please insert min. 20 characters.

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 ),

Please insert min. 15 characters.

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

Add comment

Write

Create snippet

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

tim2

Pro User 10Support score
2Questions 0Answers 0Snippets