Theme: Twentynineteen // How to exclude cookie-control triangle and star svg from being overwridden by theme css "svg { fill: currentColor; }"

Dropping this line of code in my twentynineteen-child theme’s style.css fixed the issue:

button#ccc-icon *:not(g) {
  fill: inherit;
}

Explanation:

Line 6353, in style.css of the twentynineteen (parent) theme, i. e.

svg {
transition: fill 120ms ease-in-out;
fill: currentColor;
}

overrides the cookie-control module’s css for the button that opens and closes the module. The html in question is:

<button id="ccc-icon" aria-label="Cookie Control" aria-controls="ccc-module" accesskey="c">
    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 72.5 72.5" enable-background="new 0 0 72.5 72.5" xml:space="preserve">
        <title>Cookie Control Icon</title>
        <g id="triangle">
            <path d="M72.5,72.5H0L72.5,0V72.5z"></path>
        </g>
        <g id="star">
            <path d="here goes the code of the svg icon"></path>
        </g>
    </svg>
</button>

Please note that this behaviour does not occur with the twentytwenty theme active (this is an example, I did not test any other themes).

I noticed that when setting the initial state of the cookie-control module to “OPEN”, this results in a drop in performance (webpagetest lighthouse) of approximately 6%. The initial state can be set in the configuration file or in settings of the plugin, available from the WordPress plugin directory (please do not confuse with the initial consent state that can be set to “ON” and “OFF”).

Related Posts: