Topic: Trying to change primary color

BradleyByerly04 priority asked 4 months ago


Trying to change colors in the mdb.min.css but any changes I make don't seem to change anything, even after compiling


Grzegorz Bujański staff answered 4 months ago


What is the goal? Do you want to change the default primary color that we use in various places (buttons, color of pills, tabs, etc.)? If so, you should use some bundler, import the scss files, and modify the $primary scss variable.

Describe exactly what you want to achieve and how you are trying to do it. This will make it easier for us to help you with your problem.


BradleyByerly04 priority commented 4 months ago

Exactly that, I've imported the file using npm and then when I edit mdb.min.css I use an SCSS compiler on it, similar to how it's done with BS5 but it never changes the primary and secondary colors.


Grzegorz Bujański staff commented 4 months ago

Try to do the same, but using scss files. In the scss/free/_variable.scss file, find the $primary variable, overwrite it, and recompile the files.


BradleyByerly04 priority commented 4 months ago

I'm not seeing any scss files, where exactly would I find these and/or import them?


Grzegorz Bujański staff commented 4 months ago

@import '~mdb-ui-kit/src/scss/mdb.pro.scss'; or @import '~mdb-ui-kit/src/mdb/scss/mdb.pro.scss'; if you use advanced pack.


BradleyByerly04 priority commented 4 months ago

And that goes in? Not familiar with using @


MDBootstrap staff commented 4 months ago

It's a way of linking stylesheets alternative to linking multiple files in the HTML.


BradleyByerly04 priority commented 4 months ago

It goes in CSS then?


Mateusz Lazaru staff commented 4 months ago

Not exactly. Normal CSS will not be able to read this file. You must have SCSS file and import it inside this file. To make your file able to read SCSS, you'll need an additional library, like sass to compile it to normal CSS at the endpoint.

Are you using any bundler like webpack, vite, parcel or other in your project?


BradleyByerly04 priority commented 4 months ago

No, I'm not. Should I be for this process?


Mateusz Lazaru staff commented 4 months ago

Yes. We have a tutorial how to create a project with a bundler, which already has sass included. For example: https://mdbootstrap.com/docs/standard/getting-started/vite-integration/



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: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 7.0.0
  • Device: PC
  • Browser: Opera GX 104.0.4944.80
  • OS: Windows 11
  • Provided sample code: No
  • Provided link: No