Footer color not changing with css?

[SDBonhof]

Hi,

I am customising my color scheme using the extra.css file as described here with the color tags as listed here. Changing many of there tags actually to change the look of the HTML pages, but the footer color (maybe others too, haven't tested all of them) doesn't want to change.

Inspecting it in HTML it says that the color with the tag --md-footer-bg-color is inherited by body. If I uncheck the color it changes to the color I want it to be as specified under inherited from HTML. Is there any way I can override this inheritance or should I report this as a bug?

EDIT: the same behavior is observed for --md-code-bg-color and --md-code-fg-color.

[squidfunk]

While the base colors are set on :root (which is html), the more concrete colors, like the footer colors, must be set on body. This Is because otherwise, they won't work with color schemes, as they are also set on the body. If you add a new declaration for the CSS variable on the body, there should be no problem.

If unsure, it's best to check the definitions.

[SDBonhof]

Thanks for the reply!

I'm not sure what you mean. In the definitions you linked, I only see the :root, and no :body variable. Wrapping the footer colors in :body{} doesn't solve it, neither does adding > * { like you did in the definitions (although I don't know what this means).

Is there anywhere else I have to add a body variable other than in the extra.css file?

[squidfunk]

Try this:

:root > * {
  --md-footer-bg-color: deeppink;
}

[SDBonhof]

Sorry for the late reply. Your suggestion works. However, what doesn't work for me is the syntax used in the definitions.

:root {
    --example-color: color;
 > * {
    --example-color-2: color;
 }
}

Doesn't work, while

:root {
    --example-color: color;
}
:root  > * {
    --example-color-2: color;
}

does.

I don't know whether that is an error in the definition or it is due to some configuration on my end, but I just wanted to point it out. Thanks for the help!

[squidfunk]

The original file is SCSS, which is compiled into CSS during the build step. The SCSS syntax is valid.