how to set mdb-theme correctly


Topic: how to set mdb-theme correctly

Lawman pro premium priority asked a year ago

Guys, please help me to set custom color variables in style.css correctly.

I have the code:

$ripplecolor:#cccccc;

$accordion-body-padding-x:0;
$accordion-body-padding-y:0;


$font-size-base:1.09rem;

$font-sizes: (
  1: $font-size-base*1.8,//26 h1
  2: $font-size-base*1.6,//24 h2
  3: $font-size-base*1.35,//22 h3
  4: $font-size-base*1.2, //20  h4
  5: $font-size-base*0.95,  //17  body
  6: $font-size-base*0.8,//14 muted text
);
.fs-7{
  font-size: 0.75rem;
}


//$link-color:#E94216;
$line-height-base:1.2;
//$font-family-sans-serif: Roboto,'Helvetica Neue', Arial,sans-serif;
$font-family-base: Inter, 'Helvetica neue', Arial, sans-serif;
//body {
//
//  font-family: 'Inter', sans-serif !important;
//
//}

$primary: #E94216;
$secondary: #f6b4a2;
//$secondary: #a6a6a6;
$success: #00b74a ;
$info: #39c0ed ;
$warning: #ffa900 ;
$danger: #f93154;
$light: #f1f1f1;
$dark: #252525;





@import 'mdb-angular-ui-kit/assets/scss/mdb.scss';
//@import 'node_modules/mdb-angular-ui-kit/assets/scss/mdb.scss';


$mdb-theme-light-background:#f7f5f5;

//Here need to put mdb variables!!!!!!!!!!!!

@import "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "node_modules/@fortawesome/fontawesome-free/scss/solid.scss";
@import "node_modules/@fortawesome/fontawesome-free/scss/regular.scss";
@import "node_modules/@fortawesome/fontawesome-free/scss/brands.scss";



@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$my-theme-primary: #E94216; // theme primary color, change this value to customize theme
$my-theme-secondary: #f6b4a2; // theme secondary color, change this value to customize theme



$my-theme: mdb-light-theme($my-theme-primary, $my-theme-secondary); // create the new theme using primary and secondary colors

// include theme styles
@include mdb-theme($my-theme);

//8c290d


$utilities: map-merge(
    $utilities,
    (
      "background-color": (
        property: background-color,
        class: bg,
        values: map-merge(
            $theme-colors,
            (
              //"lblue":#38B6FF,
              //"blue": #0A2B52,
              //"grey": #EEF5FF,
              "lighter": #f5f5f7,
              "red":#8c290d,
            )
        )
      ),
      //"viewport-height": (
      //  property: height,
      //  class: vh,
      //  values: (
      //    "100":100vh,
      //    "90":90vh,
      //    "80":80vh,
      //    "70":70vh,
      //    "60":60vh,
      //    "50":50vh,
      //    "40":40vh,
      //    "30":30vh,
      //    "20":20vh,
      //    "10":10vh,
      //  )
      //),
    )
);



$utilities: map-merge(
    $utilities,
    (
      "color": map-merge(
          map-get($utilities, "color"),
          (
            values: map-merge(
                map-get(map-get($utilities, "color"), "values"),
                (
                  "red":#8c290d,
                ),
            ),
          ),
      ),
    )
);

@import "bootstrap/scss/utilities/api";






.blk_90{
  border-color: #272626;
  color: #272626;
  //color: rgba(0,0,0,0.9);
}
.blk_60{
  color: #6E6E6E;
  border-color: #6E6E6E;
  //border-color: rgba(0,0,0,0.6);
  //color: rgba(0,0,0,0.6);
}
.blk_75{
  border-color: rgba(0,0,0,0.75);
  color: rgba(0,0,0,0.75);
}
.fw-semi{
  font-weight: 600;
}
.fw-m{
  font-weight: 500;
}

.mt-st{
  margin-top:120px;
}

.mt-ste{
  margin-top:160px;
}

.success-message, .error-message{
  font-size:0.75rem !important;
  top:auto !important;
}

.mdb-form-control input::placeholder {
  font-size: 0.75rem !important;
}
.form-outline, .form-control, .form-control-lg{
  font-size: 0.9rem !important;
  border-color: #86868B !important;
  //padding-top: 0.9rem !important;
  //padding-bottom: 0.9rem !important;
}
.form-check-label{
  font-size:0.9rem !important;
}
.toast-success{
  background-color: #d6f0e0 !important;
}
.toast-danger{
  background-color:#f9e1e5 !important; ;
}
.nav-pills{
  justify-content: center;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}
.stepper-head-text{
  font-size: 0.75rem !important;
}

.numb{
  font-family: Helvetica Now MT Disp W01 XBold,Arial,sans-serif;
  //font-weight: 400 !important;
}

.com{
  font-family: Quicksand,Arial,sans-serif;
  font-weight: 400 !important;
}
textarea ~.error-message{
  bottom: auto !important;
}

//body{
//  background-color: #f7f5f5;
//}
//.modal-content{
//  background-color: #f7f5f5 !important;
//}
.form-outline .form-control{
  background-color: white;
}

and when i have added an accordion - the accordion uses not my theme colors, but inside pro i have found that the accordion should uses $mdb-theme variables. (how to set mdb-theme-correctly?)

Please explain where i should to set mdb-theme-variables and NEED OR NOT a set of {$primary, $secondary, $info and etc} variables if we use $mdb-theme- variables.

Maybe you have a scheme in which order i should to set mdb imports and bootstrap imports. I tired every time ask you how to set up style.css correctly that all work.


r.seifert answered a year ago

Here are our docs about theming. Setting color variables like $danger or $warning should be done before importing MDB scss. Setting specific styles for certain components should be done by overwriting scss variables and css variables. To get list of these variables you can search in standard docs api sections of certain components (for example accordion). In the future we will include this also for angular docs. I've prepared a sample starting code with examples how you can set up your styles.

$success: #00b74a;
$info: #39c0ed;
$warning: #ffa900;
$danger: #f93154;
$light: #f1f1f1;
$dark: #252525;

@import "@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "@fortawesome/fontawesome-free/scss/solid.scss";
@import "@fortawesome/fontawesome-free/scss/regular.scss";
@import "@fortawesome/fontawesome-free/scss/brands.scss";
@import "mdb-angular-ui-kit/assets/scss/mdb.scss";
$my-theme-primary: #e94216; // theme primary color, change this value to customize theme
$my-theme-secondary: #f6b4a2; // theme secondary color, change this value to customize theme

$my-theme: mdb-light-theme(
  $my-theme-primary,
  $my-theme-secondary
); // create the new theme using primary and secondary colors

// include theme styles
@include mdb-theme($my-theme);

.accordion {
  $accordion-padding-y: 0rem;
  $accordion-padding-x: 0rem;
  $accordion-body-padding-y: $accordion-padding-y;
  $accordion-body-padding-x: $accordion-padding-x;
  --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
  --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
}

Lawman pro premium priority commented a year ago

A lot thanks! It was really useful!


waterandwind pro premium priority commented 7 months ago

Where are the docs they mention to set colors like:

$success: #00b74a; $info: #39c0ed; $warning: #ffa900; $danger: #f93154; $light: #f1f1f1; $dark: #252525;

?


Rafał Seifert commented 7 months ago

What exactly do you mean? Could you please state your question a bit more precisely? We have a general theming tutorial on https://mdbootstrap.com/docs/angular/content-styles/theme/


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
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 5.0.0
  • Device: Desctope
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No