Add this code to the Custom CSS field on the More tab of your Facebook Feed widget’s settings:
.global-styles,
:root {
--accent: #081a24;
--text-color: #ffffff;
--link-color: #365899;
--background: transparent;
--border: none;
--load-more-background: #081a24;
--load-more-text: #ffffff;
--share-button-background: #6ec1e4;
--share-button-text: #000000;
}
.eapps-facebook-feed-inner,
.eapps-facebook-feed-menu,
.eapps-facebook-feed-posts-item-inner,
.eui-popover-content-item {
background-color: var(--accent);
}
.eapps-facebook-feed .eapps-facebook-feed-inner {
background-color: var(--background);
border: var(--border);
}
.eapps-facebook-feed * {
color: var(--text-color);
}
.eapps-facebook-feed a {
color: var(--link-color);
}
.eapps-facebook-feed .eapps-facebook-feed-posts-inner {
border-top: var(--border);
}
.eapps-facebook-feed-load-more-wrapper .eapps-facebook-feed-load-more {
background-color: var(--load-more-background);
color: var(--load-more-text);
}
.eapps-facebook-feed-load-more-wrapper .eapps-facebook-feed-load-more:hover {
background-color: var(--load-more-background);
color: var(--load-more-text);
opacity: 0.8;
}
.eapps-facebook-feed-posts-item-footer-share {
background-color: var(--share-button-background) !important;
}
.eapps-facebook-feed-button-label {
color: var(--share-button-text);
}
.eapps-facebook-feed-button-icon > svg {
fill: var(--share-button-text) !important;
}
.eapps-facebook-feed-button {
height: auto !important;
}
Guys, if this code was helpful, please let us know in the comments