header text indistinguishable from background video when first displayed

[pleasantone]

Not sure if this is the same issue as #255 , but if you look at <gtj.netlify.app> when the header is first put up, the header background is transparent, and the text may get lost because it doesn't show up against the video background (see active page Home in header).

As soon as you start to scroll, the header background changes to the theme color background. Seems like this behavior was intentional, but then we might consider doing some vignetting around the header text?

[razonyang]

There is a color parameter on banner, which may not be documented yet.

---
header:
  banner:
    color: '#DD7815'
---

Actually, I cannot see the difference with the naked eye, even using slow 3G network (Chrome) for testing, do you have a better tool/way to see how it render obviously?

[pleasantone]

Can we make it follow the dark/light theme color?

…

On Feb 27, 2024 at 8:46 PM -0800, Razon Yang ***@***.***>, wrote: There is a color parameter on banner, which may not be documented yet. --- header: banner: color: '#DD7815' --- — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***>

[razonyang]

Can we make it follow the dark/light theme color?

I didn't get it, could you please provide a reproduce steps/screenshot to describe the issue in detail? Such as theme color, how to make this issue to be rendered more obviously.

The image below was captured from Chrome with slow 3g network, but I didn't see a problem.

[pleasantone]

The color parameter affects the text of the banner, and the header, until you scroll... different thing.
I'm talking about the background color of the header -- making it transparent, as it is now, is problematic for distinguishing text if the contrast between the text and the background image isn't high enough...

Current: "Home" (or "Blog") are obscured by lack of contrast:

Proposed: dark theme

Proposed: light theme

The proposed is exactly what you get once you begin to scroll down the page... I'm just advocating for the option to do that without the need to start scrolling.

[pleasantone]

FWIW, this is a non-issue if one changes to header/theme/pills, so low priority, but still a noted issue.

[razonyang]

I see, you mean always show the original background for header menus, it's not related to CLS, and it was by designed, which the video and image is the main concern on page wihtout scrolling (menus share the same background with image and video).

Anyway it make sense to add a parameter to use the original background all the time.