Topic: how to set mdb-theme correctly

Lawman priority asked 10 months 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.


Rafał Seifert staff answered 10 months 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 priority commented 10 months ago

A lot thanks! It was really useful!


waterandwind priority commented 1 month 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 staff commented 1 month 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

  • ForumUser: Priority
  • 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