Ads on unusual background colors

[wolfgang42]

I'd like to place an ad in the header of this site, which uses a vivid green-blue gradient. Unfortunately, both the dark and light themes use a mostly transparent background, and so have poor contrast against the underlying header. I can fix this by adding CSS to adjust the colors for .ea-content and .ea-callout a, but is there a better way than rummaging around in the internals of the inserted content?

Before and after tweaking:

(I notice another user seems to have had a similar requirement.)

[ericholscher]

@wolfgang42 is there a specific implementation that you'd suggest? I don't think we can really specify a background color for all sites, since that will also look odd in other places, so I think a slightly offset background is probably best.

[wolfgang42]

Here's the CSS I'm using in the screenshot above:

.ea-content {
	background: white !important;
	background: rgba(255, 255, 255, 0.75) !important;
}
.ea-callout a {
	color: white !important;
	color: rgba(255, 255, 255, 0.9) !important;
}

Basically, this takes the opposite approach to the built-in style; instead of taking whatever's underneath (assumed white) and darkening it slightly, it takes a white background and tints it slightly with whatever's underneath. To make this look right on pure white backgrounds you'd probably want to use a light gray I think? But I haven't checked it on anything other than my site. Also, this is awkward with the callout link since it doesn't have a background of its own; it might be possible to do something fancy with CSS filters and mix-blend-mode.

Other possibilities include a matrix of themes for "{light,dark} on {dark,light}", data attributes to specify colors, or just considering the class names as part of the API and documenting them so sites can do the styling without worrying about it breaking in the future.