How can I add a new color to _variables_project.scss

[rkranendonk]

I worked out how to redefine one of the existing colors by adding a line like $orange: #fe5400;.
But how can I define a new color? I tried adding $newcolor: #E4C1F9; to _variables_project.scss, but if I then use that in _index.md, e.g. {{% blocks/lead color="newcolor" %}} it just defaults to white/none.
What step am I missing here?

[fekete-robert]

I haven't actually tried it, but I think it should work like this: https://getbootstrap.com/docs/5.0/customize/sass/#maps-and-loops
(see the add to map section)

[rkranendonk]

Thanks, tried it right away with the example provided:

// Create your own map
$custom-colors: (
"custom-color": #900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

This generates an error: Undefined variable: "$theme-colors"

[fekete-robert]

Okay, so, after quick test it seems that if I add the bootstrap example to assets/scss/_styles_project.scss it doesn't generate an error, but the block shortcodes don't pick up the right color.

If I manually add a style like this to the assets/scss/_styles_project.scss file it works, and can change the value of the new color from the variables file:

.td-box--custom-color {
  background-color: $custom-color;
}

So the problem is probably that even though the new map is added to the theme-colors map, the related classes for the new colors are not generated. Unfortunately I don't know bootstrap enough to solve this, but hopefully someone else will be able to help you.

[rkranendonk]

Thanks again!

Do you think I should create an Issue for this on the Docsy git?

[fekete-robert]

I'm not sure, maybe @chalin or @deining know more about bootstrap and can help you.

[chalin]

Hi @rkranendonk - I've created an issue to track this problem:

• Support adding theme colors #1845

In the meantime, you'll need to patch Docsy as explained in #1845 (comment).

[rkranendonk]

Thanks for recognising the need for simpler colour management. Also – I don't know if this has the same root cause – I've noticed some strange behaviour with bocks/cover and blocks/link-down when choosing colours.

For instance, the code below renders a white title and white down arrow:
{{< blocks/cover title="The Canvas Method" color="black" image_anchor="top" height="full" >}}
<p> <h3> <mark> Doing Security Together </mark> </h3> </p>
{{< blocks/link-down color="blue" >}}

If I change the color of /cover to "indigo" I get a black title and a blue down arrow.

[chalin]

A PR has landed, see:

• Support for adding and modifying theme colors #1893