Announcement banner does not stand out in dark mode

[asmeurer]

The announcement banner does not stand out very much in dark mode since everything else is also black.

You might consider using a different color scheme for the banner in dark mode so that it stands out as much as it does in light mode.

[ETA444]

I am quite new to Furo, but I have been exploring the docs, and I found something I think is relevant.

To change the colors you can override CSS elements using html_theme_options set in conf.py, like so:

html_theme_options = {
    "dark_css_variables": {  # custom colors for bar in dark mode
        "color-announcement-background": "#FEFA6D",  # soft yellow
        "color-announcement-text": "#000000"  # black
    },
    "light_css_variables": {  # custom colors for bar in light mode
        "color-announcement-background": "#0000b3 ",  # strong blue
        "color-announcement-text": "#FFFFFF"  # white
    },
}

sources:

• Customization - dark_css_variables/light_css_variable
• Changing Colors - Using your own colors

The element names for the color of the announcement bar background and text are found in the _colors.scss file:

// Announcements
  --color-announcement-background: #000000dd;
  --color-announcement-text: #eeebee;

(source: .../_colors.scss (line 25-27))

Hope this helps!

[asmeurer]

Yes I know that you can manually fix this but my point is that the defaults should perhaps be improved.

[ETA444]

Oh, fair enough, I misunderstood. Black is an interesting choice for a default for sure. Although it doesn't pop out, it has no implications. I think colors have different implications from a design POV, like is it a notice (yellow) or a warning (red), a feature release (blue?), so black seems the most "default" and universal to me. That's at least how I perceive colors.

[asmeurer]

The black default for the light theme seems reasonable. You can manually change that to a color if you feel it needs to be more prominent. But for the dark theme, it should probably invert to black on white.

[pradyunsg]

So, I ended up doing it this way for a few reasons:

• I wanted to have a neutral color, and this theme had started with only a light mode. So black was an easy choice.
• mkdocs-material uses this approach for announcements (i.e. not changing colors, as can be seen on https://squidfunk.github.io/mkdocs-material/getting-started/ -- you might need to clear cookies & site data). I did end up with the specific colors being used being different -- it doesn't have the same flaw of having ~no distinction via color, vs the regular content/sidebar/header.
• Personally, I don't want a bright banner on the top of a page in dark mode -- the contexts where I find myself using dark mode would mean that I would be annoyed by a banner of white/bright colors on top of the page.

I'd be fine to change the color, but a light banner is something I'm hesitant toward right now.