Changing the Lightbox Button Color

November 27, 2024

I love the added interactivity feature, which creates a lightbox easily within core WordPress. In the recent update to this functionality, the WP team added a button indicating a popup is available. Unfortunately, it is almost invisible, defeating the accessibility benefit as a visual indicator. Fortunately, it only takes one line of CSS to resolve that issue. They also set the border to none, which I changed if I used a darker image and wanted the button’s outline to be visible.

.wp-lightbox-container button:focus, .wp-lightbox-container button:hover, .wp-lightbox-container button:not(:hover):not(:active):not(.has-background) {
background-color:var(--primary-trans-80);
border:1px solid var(--warning);
}