Topic: How use sass to costumize the css!

Guilherme Nascimento priority asked 2 years ago


Hello guys, I'm new here and new at css and sass...

How can I use sass to costumize my mdb css, like reduce the shaddow for the components, change the theme colors, add some more theme colors.

If some one has a good material to read or watch I appreciate, if has any specific material for mdb I appreciate to!

Thanks!


Krzysztof Wilk staff answered 2 years ago


Hi!

The SCSS guide you can find here: https://mdbootstrap.com/docs/b5/react/content-styles/theme/. After doing steps from the "How to start" section you can freely change the variables and other styles. If you would like to create your own theme - just check other sections in this tutorial.

If you have more questions - feel free to ask :)

Keep coding!


Guilherme Nascimento priority commented 2 years ago

Ok, so Can I use the same scss variables from bootstrap to modify? Like adding all colors and etc?

Other question, is possible to add 1 or more color to theme, link, primary, secondary, tertiary?


Krzysztof Wilk staff commented 2 years ago

Hi!

I'm not sure if it is possible to add a color for the theme, but you can achieve everything just by editing the source scss code. So yes - it is possible :)


Two Aow priority commented 2 years ago

I changed the colors by editing /src/scss/free/_variables.scss. starting about about line 283. Like this...

// Theme colors $primary: #1266f1 !default; $secondary: #b23cfd !default; $success: #00b74a !default; $info: #39c0ed !default; $warning: #ffa900 !default; $danger: #f93154 !default; $light: #f9f9f9 !default; $dark: $gray-900 !default; $sean: #0a6e49 !default; $wolvesGreen: #0e4f63 !default; $wolvesYellow: #ffb627 !default; $glossyGrape: #9C89B8 !default; $kobiPink: #F0A6CA !default;

// scss-docs-start theme-colors-map $theme-colors: ( // 'primary': $primary, // 'secondary': $secondary, 'primary': $glossyGrape, 'secondary': $kobiPink, 'success': $success, 'info': $info, 'warning': $warning, 'danger': $danger, 'light': $light, 'dark': $dark, 'white': $white, 'black': $black, ) !default; // scss-docs-end theme-colors-map



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 React
  • MDB Version: MDB5 3.0.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No