Adding colors to selection list

[cjc]

Add items to color select?

[printninja]

There’s no way to add additional colors to that drop down menu because those colors are Bootstrap utility classes (ex. .text-primary .text-secondary etc.) that are a part of the standard Bootstrap CSS. They can be changed by changing the theme.

The other option would be to create a Paragraph (or Heading) component and then add custom options for these colors. Basically you’d add the following to a custom CSS file…

.text-blue {
  color: var(--bs-blue);
}
.text-indigo {
  color: var(--bs-indigo);
}
.text-purple {
  color: var(--bs-purple);
}
.text-pink {
  color: var(--bs-pink);
}
.text-red {
  color: var(--bs-red);
}
.text-orange {
  color: var(--bs-orange);
}
.text-yellow {
  color: var(--bs-yellow);
}
.text-green {
  color: var(--bs-green);
}
.text-teal {
  color: var(--bs-teal);
}
.text-cyan {
  color: var(--bs-cyan);
}
.text-white {
  color: var(--bs-white);
}
.text-gray {
  color: var(--bs-gray);
}
.text-gray-dark {
  color: var(--bs-gray-dark);
}

Then add a Paragraph component, add custom options, and add all the color classes in a drop down using the color classes in your CSS file. Give them the same names as the Bootstrap variables and you’ll end up with something like this.

Save the Paragraph component in your Favorites, and now you’ve got all the colors you want.

[cjc]

Awesome solution @printninja !
Thank you! I’ll give it a go and let you know how it turns out.

[kuligaposten]

You have also Bootstrap Theme in the Appearance panel. There you can choose any color you want for the paragraph without to write css classes for every color you like