🎨 override facebook comment section style

_includes/comments-providers/facebook.html

@@ -1,8 +1,14 @@
 <div id="fb-root"></div>
-<script>(function(d, s, id) {
-  var js, fjs = d.getElementsByTagName(s)[0];
-  if (d.getElementById(id)) return;
-  js = d.createElement(s); js.id = id;
-  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5{% if site.comments.facebook.appid %}&appId={{ site.comments.facebook.appid }}{% endif %}";
-  fjs.parentNode.insertBefore(js, fjs);
-}(document, 'script', 'facebook-jssdk'));</script>
+<script>
+  (function (d, s, id) {
+    var js,
+      fjs = d.getElementsByTagName(s)[0];
+    if (d.getElementById(id)) return;
+    js = d.createElement(s);
+    js.id = id;
+    js.src =
+      "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5{% if site.comments.facebook.appid %}&appId={{ site.comments.facebook.appid }}{% endif %}";
+    fjs.parentNode.insertBefore(js, fjs);
+  })(document, "script", "facebook-jssdk");
+</script>
+<link rel="stylesheet" href="/_sass/minimal-mistakes/_comment.scss" />

_sass/minimal-mistakes/_comment.scss

@@ -1,3 +1,26 @@
-.fb-comments {
-  background: #aaa;
+// Overriding styles for facebook comment section.
+// The facebook jssdk theme doen't fit well into look & feel of this site.
+section.fb-comments {
+  ._6b {
+    vertical-align: baseline !important;
+    margin: 0 0.25em !important;
+  }
+
+  ._pup {
+    color: #eee !important;
+  }
+
+  ._3-8m {
+    span {
+      color: #ccc !important;
+    }
+  }
+
+  ._ohe {
+    color: #eee !important;
+  }
+}
+
+section.fb-comments ._50f7 {
+  color: #eee !important;
 }