Background color in dark mode is is not applied

[qui8t]

I am trying to set the background color for dark mode, and I'm following this documentation:

https://docusaurus.io/docs/styling-layout#styling-your-site-with-infima

I assume you can set the background color using:

--ifm-background-color: #000000;

This setting works fine for:

:root {
  --ifm-background-color: #ebebeb;
}

on the Docusarus documentation also works fine for:

[data-theme='dark'] {
  --ifm-color-primary-lightest: #000000;
}

Light theme works fine my website, but dark theme does not work on my website. Basically, the background of the dark theme, regardless of the color I set, is always set to the default color.

[slorber]

Please create a repro, it's really hard to help without it

[clpacheco90]

I got this in the documentation:

Here's an example from the Docusaurus codebase, we can see from the list below that the footer uses various --ifm-footer-* variables. If you wanted to change the background color of the footer, you would set the --ifm-footer-background-color variable in your CSS like this, at least that's the theory:

:root {
  --ifm-footer-background-color: #303846;
}

Seems clear enough. However that bit of CSS will not work as expected. The footer is styled using the .footer or .footer-dark classes, so you need to set the variable like this:

.footer {
  --ifm-footer-background-color: #303846;
}

or like this:

.footer-dark {
  --ifm-footer-background-color: #303846;
}

Inspecting the styles in your browser's dev tools can help you identify the correct class to target if your variable overrides are not working as expected.

https://docusaurus.community/knowledge/design/css/variables/

This not make sense for me but works:

.footer {
  --ifm-footer-background-color: #04eb36;
}

but it is better, for me, to use native CSS:

.footer {
background-color: #101010;
} 

Here is for your background:

main {
  background-color: #04eb36;
}
or
html[data-theme='dark'] {
  --ifm-background-color: #232333 !important;
}