Incorrect navbar style with light mode and dark navbar

[LoicPoullain]

🐛 Bug Report

I noticed some styling issues when using the dark navbar with the light mode. I don't know if some are on purpose.

Have you read the Contributing Guidelines on issues?

Yes.

To Reproduce

Use this configuration in docusaurus.config.js:

module.exports = {
  // ...
  themeConfig: {
    // ...
    colorMode: {
      defaultMode: 'light',
      disableSwitch: true,
      respectPrefersColorScheme: false,
    },
    navbar: {
      // ...
      style: 'dark',
    }
  }
}

Expected / Actual behaviors

Issue 1: navbar background color The navbar background color is not the same one that is being used in the dark mode. Is it on purpose?

Expected:

Expected color to be #242526 like --ifm-background-surface-color in dark mode.

Actual:

Current workaround in global CSS file:

.navbar--dark {
  --ifm-navbar-background-color: #242526;
}

Issue 2: bad link colors

Some links are not colored in white when browser the site with a small screen (mobile mode): the menu button and the version dropdown.

Your Environment

• Docusaurus version used: 2.0.0-alpha.70 (same issues with alpha.69)
• Environment name and version: Firefox 83.0, Node.js v12.19.1
• Operating system and version: Desktop

Reproducible Demo

Repo and directory: https://github.com/FoalTS/foal/tree/master/docs Online website: https://foalts.org

[LoicPoullain]

@slorber I tested the changes in beta.1.

The background color has been properly fixed, but the color of the links are still incorrect on mobile (black on black). Could we re-open the issue?

Thank you!

PS: docusaurus is great, keep it up 👍

[slorber]

Thanks,re-opened.

[lex111]

This is actually fixed, but not work since you specified own color for menu link in your custom styles.

https://github.com/FoalTS/foal/blob/4e755045f96219ff463cfd45038736208696443b/docs/src/css/custom.scss#L104

If you remove this CSS declaration, then link color is correct.

[slorber]

@LoicPoullain please try the solution mentioned by @lex111 , we'll re-open again if it still doesn't work but make sure to test with all your customizations removed to be sure it's a Docusaurus issue

[Josh-Cena]

This issue is not resolved. On a freshly installed site, the logo title on hover still becomes black, and the "back to main menu" is black as well:

[lex111]

Thanks for reporting this, will be fixed in https://github.com/facebookincubator/infima/pull/179