Angular 4.3.7 Theming

Topic: Angular 4.3.7 Theming

andrewv pro asked 6 years ago

Hello,

I'm trying to figure out how to consistently apply a custom colour theme across my site, overriding the ones available in MDB.

Is there an example somewhere?

I can override some parts of the theme with this in a _custom.scss file:


@import "../../../scss/bootstrap/functions";

@import '../../../scss/bootstrap/variables';

@import '../../../scss/mdb/free/data/colors';

@import '../../../scss/mdb/free/data/variables';

@import '../../../scss/mdb/pro/variables-pro';
$primary-color: #659EC9;

$primary-color-dark: #3F81B3;

$secondary-color: #FFC825;

$secondary-color-dark: #AC8100;

$default-color: #216CA5;

$default-color-dark: #07426F;

But this leaves things like <a class='btn btn-primary'> still the default Bootstrap colour. How do I override them all to be consistent??

Add comment

Bartłomiej Malanowski staff answered 6 years ago

0 0 Best answer

It's because `_custom.scss` is added after buttons (such as btn-primary). Try to move `@import "mdb/custom";` to the first position in your mdb.scss. Then you should be able to overwrite the variables

andrewv pro commented 6 years ago

Doesn't seem to work. Started over with a fresh copy of mdb-angular-pro-4.3.7. npm install. Modified the mdb.scss to put mdb/custom at the top of the file. Added my set of colours as above (without imports) End result: all colours get overridden to default colours. Move _custom.scss back to where it was in the mdb.scss file - same result. It doesn't seem like the _custom.scss files in either the bootstrap or mdb folders actually *do* anything. Is there a clean way to do this?

Bartłomiej Malanowski staff commented 6 years ago

Please send me a message at b.malanowski@mdbootstrap.com. I'd like to take a look at your files

andrewv pro commented 6 years ago

Hello, I've sent you the project files etc but haven't gotten any reply. Any luck figuring out where/when we should put our custom colors? regards, Andrew

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: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

andrewv

Pro User 0Support score
2Questions 0Answers 0Snippets