Headings not visible in reading mode when clicking link to heading

[shiny.zone]

I have customised my notes with a css snippet to have a white backround with black headings and text, whilst in dark mode. I apply that with a css class called “light” on a per note basis.

Everything works ok except in Reading mode, when I click links to a heading in the Outline or from a TOC. The heading becomes invisible for a couple seconds. In dev tools I can see the heading “is-flashing”. I have tried any number of things to resolve this but have been unsuccessful. For example I have tried the below snippet which does work for Edit mode but not Reading mode.

.is-flashing {
background-color: unset !important;
background-color: transparent !important;
color: inherit !important;
transition: none !important;
}

I’d really appreciate some help applying these settings to Reading mode too.

[ariehen]

What’s your CSS for the light cssclass? Knowing that could help here, but I think it may be the mix-blend-mode for .is-flashing in reading view.

Using this for my light class:

.workspace-leaf-content[data-type='markdown'] > .view-content .light {
    background-color: white;
    --text-normal: black;
    color: var(--text-normal);

    & :is(.markdown-rendered :is(h1,h2,h3,h4,h5,h6), .HyperMD-header) {
        color: black;
    }
}

clicking on something in Search or from the Outline disappears the is-flashing result for a few seconds as you describe (in reading view).

Adding this in fixed it up on my end. mix-blend-mode: darken is necessary and (of course) you can change the background-color, but this line does need an !important.

.markdown-preview-view.light div.is-flashing {
    background-color: salmon !important;
    mix-blend-mode: darken;
}

[shiny.zone]

That solved the problem. Thank you for the prompt reply!