How to correctly build a custom theme?

Topic: How to correctly build a custom theme?

Laudick pro asked 6 years ago

Hey there, I already read some questions about how to change the primary color of elements and how to change the sidenav's background color etc. The solution that worked best for me until now is to edit the "_variables-pro.scss", copy one of the themes, change it's name and done. But there are 2 problems I see with this approach. First of all it isn't a very clean way to edit one of the files and changes can disappear after an update, it would be better to create a "theme.scss" in the root directory and load this into the page. The other problem is that the "mdb-tabset" doesn't use the themes primary color.

My Code: <mdb-tabset #staticTabs [buttonClass]="'nav-tabs tabs-primary'" [contentClass]="'card'">

.tabs-primary overwrites the default color with #4285F4 instead of using the one declared in the theme. What is the best way to create my own skin? I just want to set a primary color that's applied to all '*-primary' classes

Damian Gemza staff commented 6 years ago

Dear Laudick, The best way to create your custom skin is to copy whole code from one of our skins, create a new file called theme.scss or something else, paste there our code, and modify it with your styles. This probably is the best way to create your custom theme for our MDB Angular. Best Regards, Damian

Add comment

Laudick pro answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

Where can I find the whole sass code from one of your skins? I only found the variables set in _variables-pro.scss and _skins.scss where the skin gets generated.

And there is still the bug (if it’s a bug) that ‘.tabs-primary’ overwrites the skins primary color with #4285F4 instead of using the one declared in the theme, I tested it with ‘.white-skin’ applied to the body of my page.

Currently I am using .white-skin and copy the code that white-skin apllies from the browser developer tools to my own my-skin.scss to overwrite it but that doesn’t seem like the best solution.

Best Regards

Damian Gemza staff commented 6 years ago

You have to copy _skins.scss code and variables which you want to modify from _variables.scss and overwrite it. In future we'll write an tutorial, how to create custom skin. Best Regards, Damian

anuragd7 free commented 4 years ago

where can i find the _skins.scss file please?

Arkadiusz Idzikowski staff commented 4 years ago

Please take a look at our skins documentation. You can find there all information you need to use our skins or create new custom skin: https://mdbootstrap.com/docs/angular/css/skins/

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: Yes
Provided link: No

Laudick

Pro User 10Support score
2Questions 2Answers 0Snippets