Topic: How use sass to costumize the css!
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!
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 1 year 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 1 year 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 1 year 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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