Styling Jetpack Comment Likes

As a frequent user of dark modes in my websites I have encountered the difficulties in styling an iframe.

One of the most annoying is Jetpack Comment Likes since everything else in the comments section can be styled.

For everything other than the likes styling it is enough to just set your Jetpack comments to a “Dark”, “Light” or “Transparent” colour scheme.

This way you can simply choose a colour scheme that can be read on both your dark and light mode.

But as you can see this is not so for the comment likes.

In order to make it readable I decided to style the jetpack comment likes widget wrapper.

This was done with some simple CSS:

/**
 * Styles Jetpack Comment Likes.
 */
.jetpack-comment-likes-widget-wrapper{
width: 160px !important;
    font-size: 14px !important;
    line-height: 18px !important;
    padding: 3px 10px !important;
    border: 1px solid #ccc;
    background: #eee;
    -moz-border-radius: 15px !important;
    -webkit-border-radius: 15px !important;
    border-radius: 15px !important;
    margin-bottom: 20px;
}

This was a solution suggested by https://pencidesign.ticksy.com/ticket/2168167/

Then to make it even more readable I adjusted the background colour shown in dark mode.

If you are using “WP Dark Mode” then this can be done by simply adding this in the plugins settings under “Custom CSS”:

/**
 * Styles Jetpack Comment Likes
 * in dark mode.
 */
.jetpack-comment-likes-widget-wrapper{
	background: white;
}