Embed background colour change

I want to make my embedded posts change colour with the dark mode to a grey background.

I currently assign the style of my embedded posts with this function:

/**
 * Customises the style/colours of embedded posts.
 */
add_action( 'embed_head', 'embed_styles' );
/**
 * Embed custom styles.
 */
function embed_styles() {
    echo <<<CSS
<style>
	.wp-embed-author {
		margin-top: 0.5em;
	}
	.wp-embed-author a {
		color: #a6191a;
	}
	.wp-embed-author a:hover {
		color: #454545;
 	}
 	.wp-embed-featured-image {
 		width: 150px!important;
		height: 150px!important;
		
 	}
	
	.wp-embed-featured-image > a > img {
 		width: 150px!important;
		
		object-fit: cover;
		height: 150px!important;
 	}
</style>
CSS;
}

Now normally I would change the colour with something like this:

.wp-embed {
background-color:#ccc;
color:#444;
}

But how would I change this style only when dark mode is active?

I realise there is a paid version of this plugin that allows you to add CSS for only Dark Mode but if that works the same as Additional CSS that may not work for my situation so I’m hesitant to buy it before getting an answer…

• This topic was modified 4 years, 5 months ago by davidstockdale13.

The page I need help with: [log in to see the link]