Darkmode footer background color should be public

[bever1337]

Howdy,

How do y'all consider which styles are public and private?

Because the ".footer--dark" class uses a hard-coded color and the class will have high specificity, developers cannot easily align the footer component with their product's brand. Developers directly integrating infima, those manually constructing infima components, have an easier time applying their styles with the correct specificity. Docusaurus users swizzle the classic theme Footer/Layout component to apply styles with higher specificity.

Ideally, the footer classes inherit their colors from the default or developer-supplied color theme.

Thank you for the consideration.

https://github.com/facebookincubator/infima/blob/e947edceadc69fada6a62f70d7fa1af6204f11ec/packages/core/styles/components/footer.pcss#L31

Example developer workaround:

/* footer.module.css */
.footer {
  --ifm-footer-background-color: var(--ifm-color-emphasis-100);
}

[data-theme="dark"] .footer {
  --ifm-footer-background-color: var(--ifm-color-emphasis-100);
}

// footer.tsx
import classNames from "./footer.module.css";
const element = (<footer className={clsx("footer", classNames["footer"])}>);

[slorber]

Hey 👋

I won't be available in the following days to investigate, but I suspect this is related to an older issue that is probably not totally solved: https://github.com/facebook/docusaurus/issues/2692#issuecomment-1674724457

Can you confirm?

Also, if you have an idea how to fix it, and make it easier to override, I'll review it once I'm available again

Thanks

[bever1337]

@slorber Thanks for the reply. Yes, I can confirm this issue is the same as a comment from that thread: https://github.com/facebook/docusaurus/issues/2692#issuecomment-1646099964

I propose that Infima removes this hard-coded color and uses the same theme color for both light and dark modes. I believe Infima declares --ifm-color-emphasis-100, but I can quintuple-check before proceeding. The docusaurus classic theme should provide the blue background color to maintain functionality. Should we use #2692 to gauge interest?

#2692 shows several more workarounds I had not considered, mainly forcing the footer to lightmode to avoid the hard-coded styles. If the fix for #2692 is to make this color available to developers, then feel free to close this one as a duplicate. Thanks for your time.