How to change color of popup? about balloon.css HOT 3 CLOSED

For the content bg colour:
https://github.com/kazzkiq/balloon.css/blob/master/balloon.css#L24

The arrow head is a data image, so you'll need to recreate one yourself to match the intended colour. There are plenty of sites out there that can convert your image to a data image also, e.g https://www.base64-image.de/. Or maybe give it a go in CSS, but haven't tried that myself.

Hope that helps.

from balloon.css.

Complementary to what @mtsweir said, you can also try a "Find & Replace", searching for this string: rgba(17, 17, 17, 0.9) replacing it with the color you want. This would also replace the arrow's color without the need to re-generate the entire Base64 SVG.

Alternatively, if you're using preprocessors (like SASS), you can import balloon.scss and simply edit the highlighted variable here.

from balloon.css.

If anyone is interested, here is how you can override the foreground/background in native CSS:

/** foreground-color : #024 | background-color : #DEF */
[aria-label][data-balloon-pos]:after { color : #024; background: #DEF; }
[aria-label][data-balloon-pos]:before { border-top-color: #DEF; }
[aria-label][data-balloon-pos][data-balloon-pos="down"]:before { border-bottom-color: #DEF; }
[aria-label][data-balloon-pos][data-balloon-pos="down-left"]:before { border-bottom-color: #DEF; }
[aria-label][data-balloon-pos][data-balloon-pos="down-right"]:before { border-bottom-color: #DEF; }
[aria-label][data-balloon-pos][data-balloon-pos="left"]:before { border-left-color: #DEF; }
[aria-label][data-balloon-pos][data-balloon-pos="right"]:before { border-right-color: #DEF; }

from balloon.css.