How to change popup border color?

Add-ons Development
#1

Hi.

How do you go about changing the border color of the popup box? I know it’s possible because some of my other extensions have a black border. I’m having trouble finding information on how to do this. I couldn’t identify the border with the inspector, and I tried the root html/body borders to no avail

Here’s a dark border with the BitWarden extension:
image

Here is the default white border on my extension that I want to change:
image

Thanks!

1 Like
#2

As far as I know Firefox chooses the color automatically based on your page’s background color.

#3

Hi.
I found a something that can help you.
I tested the CSS code, and it works perfect for me.

https://medium.com/hypersphere-codes/detecting-system-theme-in-javascript-css-react-f6b961916d48

css:
@media (prefers-color-scheme: light) {
body {
background: #FFF;
color: #333;
}
}
@media (prefers-color-scheme: dark) {
body {
background: #333;
color: #FFF;
}
}

#4

I looked into this a bit and here are my findings:

  • Your popup’s border color will default to #dddddd which is a light grey color. This seems to be what you observe on your second image. I don’t know where this value comes from.

  • If your popup’s <body> has a background-color CSS style, then the border color is set to the theme’s popup_border value (see theme colors on MDN). On the default light theme, it’s #f0f0f4; on the default dark theme, it’s #52525e. That’s what you observe in your first image.

  • The color value of background-color doesn’t matter: setting it to #000000 (black) or #ffffff (white) gave me the same dark border on a dark theme. Setting it to transparent acts like the default of giving the popup a light border.

All in all, if you want to have a dark border on the dark theme and a light border on a light theme, then add a background-color to your popup’s . Otherwise, you get a light border on both themes.