Added contrast detection

apps/comments-ui/src/components/CommentsBox.js

@@ -14,9 +14,37 @@ class CommentsBox extends React.Component {
         this.state = {};
     }
 
+    luminance(r, g, b) {
+        var a = [r, g, b].map(function(v) {
+            v /= 255;
+            return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+        });
+        return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+    }
+
+    contrast(rgb1, rgb2) {
+        var lum1 = this.luminance(rgb1[0], rgb1[1], rgb1[2]);
+        var lum2 = this.luminance(rgb2[0], rgb2[1], rgb2[2]);
+        var brightest = Math.max(lum1, lum2);
+        var darkest = Math.min(lum1, lum2);
+        return (brightest + 0.05) / (darkest + 0.05);
+    }
+
+    darkMode() {
+        const bodyColor = getComputedStyle(document.querySelector('body')).getPropertyValue('color');
+        const colorsOnly = bodyColor.substring(bodyColor.indexOf('(') + 1, bodyColor.lastIndexOf(')')).split(/,\s*/);
+        const red = colorsOnly[0];
+        const green = colorsOnly[1];
+        const blue = colorsOnly[2];
+
+        return this.contrast([255, 255, 255], [red, green, blue]) < 5;
+    }
+
     render() {
         const comments = !this.context.comments ? 'Loading...' : this.context.comments.map(comment => <Comment comment={comment} key={comment.id} />);
 
+        const containerClass = this.darkMode() ? 'dark' : '';
+
         return (
             <section>
                 <div className="flex justify-between items-end mb-6">
@@ -34,5 +62,5 @@ class CommentsBox extends React.Component {
         );
     }
 }
-  
+
 export default CommentsBox;

apps/comments-ui/src/components/ShadowRoot.js

@@ -10,7 +10,7 @@ const ShadowRoot = ({
     );
 
     return (
-        <root.div {...props} title='ghost-comments-iframe' mode={'closed'}>
+        <root.div {...props} title='ghost-comments-shadowroot' mode={'closed'}>
             {head}
             {children}
         </root.div>

apps/comments-ui/tailwind.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+    darkMode: 'class',
     theme: {
         screens: {
             sm: '640px',