TBH I don't like it at all :/

EDIT: I mean, mostly due to the snippet mess. I guess we could work around this by use a <div class="example> manually. So, if we agree on the look, I can have a look at the rest 🙂

Perhaps we instead add a new key-value pair to the relevant colors in our theme-colors.yml and check for that instead? I thought I saw a PR to do this for color contrast or something else?

@mdo #30044 is the one 🙂 And it could help a lot with some of my other PR (color-contrast() failures, at least).

I don't like neither the multiple conditions to add a tag, but wanted to start something and have something to look at.

I also find the visual part quite messy: IMHO it'd be better to split the example box, with dark and light sides. Don't know how to do yet.

So, to sum up things here: choosing the contrast color will be tackled in #30044, so this one might be closed—and another one opened after #30044 get merged to tackle the design part of those backgrounds. I'll document this right away to follow up.