The Power of currentColor

Within BookStack I wanted to allow customizability of the theme colors in a few cases. These are often applied to things like buttons or links, an element may utilise that theme color in a few different shades.

My first thought was to dynamically generate out the CSS styles for such elements, so the custom color could be added to the page. This meant maintaining a set of color-specific styles outside of the core CSS so wasn't ideal. Then I learnt of currentColor.

currentColor is a valid CSS color value which will refer to the text color of the current element. It's well supported, down to IE9. Using this you could set borders, shadows, backgrounds, or anything that takes a color value, to use the current text color of the element.

Below is an example of a themed button. Only a single color is set on this element, found inline, otherwise the border color, SVG icon fill color & background color all make use of currentColor. The color picker will auto-change the single text-color CSS on the element, nothing else, but everything will match thanks to currentColor!

Using this approach, you wouldn't need to have different button styles defined in your CSS for different colors, you could make a generic currentColor button then apply colors using some text-color utility classes. If targeting modern browsers then CSS variables are an alternative solution, depending on use-case. You could even combine those options, using CSS variables to set the main text color then use currentColor to syle related components of the element.

Demo

#example-button {
    color: #4f53bf;
    border: 2px solid currentColor;
    padding: .5rem 1rem;
    background-color: transparent;
    font-weight: bold;
    position: relative;
}
#example-button::before {
    background-color: currentColor;
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.15;
}
#example-button svg {
    fill: currentColor;
}