Conflicting dark/light mode

[danielpeintner]

Description of problem

In the WoT documents, we use special highlighting for assertions.

See for example https://w3c.github.io/wot-thing-description/#class-definitions the gray background for the MUST statement.

It is done with CSS

      .rfc2119-assertion {
        background-color: rgb(230, 230, 230);
      }

The code above does not take into account dark/light mode, and we wanted to fix it with something simple like the following

      .rfc2119-assertion {
        background-color: light-dark(#e6e6e6, #223a2c);
      }

Anyhow, the above statement somewhat conflicts with the manual selection in the sidebar and the magic that happens in https://www.w3.org/scripts/TR/2021/fixup.js.

That's why we had to fix it differently, see https://github.com/w3c/wot-binding-registry/pull/32/files
This a bit prone to errors since we base on the CSS added by the fixup.js.

Hence, I think the fixup.js script needs some update... I think.
The manual selection via W3C sidebar should not conflict with the browser/OS settings.

see the complete discussion here

[danielpeintner]

Note: as discussed in w3c/wot-thing-description#2139 (comment) there is a similar/related issue for alt text.

[sidvishnoi]

Same as #4687, #4871. No good solution yet, specially when it comes to forced color schemes.

If you believe it's something fixup.js can fix, please file an issue in https://github.com/w3c/tr-design.

[AutoSponge]

I found a test case, where dark mode makes an example unreadable. Not sure if it's the fault of respec or the document/authors:
https://w3c.github.io/data-shapes/shacl12-core/#conventions

<pre class="jsonld" aria-busy="false"><code class="hljs">...