Quarto website: Custom title block banner text colour not applied to breadcrumb

[lizevons]

Description

Problem

I am creating a website that uses sidebar navigation with breadcrumbs. On some pages I would like to apply custom colours to the title block. I set these up in the yml header of the specific page where I would like the colours applied:

page.qmd

---
title: "Page with title-block-banner custom background"
title-block-banner: "#4097C2"
title-block-banner-color: white
---

The background colour is also applied to the breadcrumb section, however, the foreground (text colour) is not. I am not sure which css is applied to the breadcrumb text, but it seems to be the same as the body text, which is a dark colour on a light background. If you use a bright or dark banner background the breadcrumbs can be difficult to read.
Is it possible to either:

• Change the background of the breadcrumb to match the navbar
• Or change the text colour of the breadcrumb to match the title block banner text colour (title-block-banner-color)

The second would be my preferred option.
Here is how it renders:

I provide a reproducible example here

[mcanouil]

Use your favourite browser inspect/developer mode to identify the selector to use to define your CSS rule.

[lizevons]

Thank you for your answer. I don't have much css experience. From what I can tell from the inspect mode the text colour is derived from the text settings for the sidebar. How can I get it to match the settings for the title banner?

[mcanouil]

Here from the inspect/developer mode:

Then you create a CSS rule to overwrite (that's a quick and dirty CSS rule as the use of !important should be avoided in general)

---
title: "demo"
title-block-banner: "#4097C2"
title-block-banner-color: white
include-in-header:
  - text: |
      <style>
      @media (min-width: 992px) { /* because the bread crumbs are only on the banner on large screens */
        .breadcrumb li a {
          color: white !important;
        }
      }
      </style>
---

For more, I'm afraid you'll have to learn (S)CSS and how HTML works.

[cderv]

We can also probably try to do better and make breadcrumbs adapt to the banner color as Quarto is the one putting the breadcrumb inside the banner 🤔

it would make sense for us to improve our SCSS rules to handle this if possible.

[lizevons]

Thank you both! Mickaël's answer works for now. A solution where Quarto handles the breadcrumb color relative to the banner color would be great.