Bootstrap theming how to set colors

95 Views Asked by At

I am attempting to build a theme in Bootstrap. Here is my custom .scss file. I want the color of the entry in a text box to change to the $textColor.

I was using this documentation as an example. I have the data-bs-theme="corporate" in my html element.

I want to use a variable for my color vs hard-coding. Is that possible?

The reason is that I want to have shading based on that color and that color is not set by the marketing department yet.

$header-blue:  #1D46F3;
$textColor: #002579;

[data-bs-theme="corporate"] {
  --bs-body-color: #{to-rgb($textColor)};  /* This line does not work */
  --bs-body-color: $textColor;  /* This line does not work */
  --bs-body-color: #002579;  /* This line does work */

  --bs-body-color-rgb: #{to-rgb($white)};
  --bs-body-bg: var(--bs-white);
  --bs-body-bg-rgb: #{to-rgb($white)};
  --bs-emphasis-color:#{to-rgb($textColor)};
  --bs-table-color:#{to-rgb($textColor)};
  --bs-table-color-state:#{to-rgb($textColor)};
}
0

There are 0 best solutions below