From ca2686959fafe75d98823e552b133ac964e1b303 Mon Sep 17 00:00:00 2001
From: Bangara Raju Kottedi <bangararaju.kottedi@gmail.com>
Date: Sun, 27 Aug 2023 22:28:47 +0530
Subject: [PATCH] remark42 custom style changes - not working

---
 _includes/comments/remark42.html | 83 ++++++++++++++++++++++++--------
 _includes/head.html              |  1 +
 assets/css/remark42.css          | 15 ++++++
 3 files changed, 78 insertions(+), 21 deletions(-)
 create mode 100644 assets/css/remark42.css

diff --git a/_includes/comments/remark42.html b/_includes/comments/remark42.html
index 9c50ac0..296e5a8 100644
--- a/_includes/comments/remark42.html
+++ b/_includes/comments/remark42.html
@@ -1,35 +1,76 @@
+<style>
+    .comment-form__markdown-link {
+        color: rgba(117, 117, 117, .9);
+    }
+
+    .E_A {
+        background-color: rgba(117, 117, 117, .9) !important;
+    }
+
+    .E_A:focus {
+        background-color: rgba(117, 117, 117, .9);
+    }
+
+    .E_A:hover {
+        background-color: #1d1d1d;
+    }
+</style>
+
 <div id="remark42">
 </div>
 
 <script>
     var remark_config = {
-    host: remark42Host,
-    site_id: siteId,
-    components: ['embed'],
+        host: remark42Host,
+        site_id: siteId,
+        components: ['embed'],
+        style: remark42Style,
 
-    max_shown_comments: 10,
-    theme: modeToggle.modeStatus,
+        max_shown_comments: 10,
+        theme: modeToggle.modeStatus,
 
-    locale: 'en',
-    show_email_subscription: false
-};
+        locale: 'en',
+        show_email_subscription: false
+    };
 
-(function (c) {
-    for (var i = 0; i < c.length; i++) {
-        var d = document, s = d.createElement('script');
-        s.src = remark_config.host + '/web/' + c[i] + '.js';
-        s.defer = true;
-        (d.head || d.body).appendChild(s);
+    (function (c) {
+        for (var i = 0; i < c.length; i++) {
+            var d = document, s = d.createElement('script');
+            s.src = remark_config.host + '/web/' + c[i] + '.js';
+            s.defer = true;
+            (d.head || d.body).appendChild(s);
+            c = d.createElement('link');
+            c.href = remark_config.style;
+            c.rel = 'stylesheet';
+            c.defer = true;
+            (d.head).appendChild(c);
+        }
+    })(remark_config.components || ['embed']);
+
+    var targetDiv = document.getElementById("sidebar").getElementsByClassName("mode-toggle")[0];
+
+    if (targetDiv != null) {
+        targetDiv.addEventListener("click", () => {
+            window.REMARK42.changeTheme(modeToggle.modeStatus === 'light' ? 'dark' : 'light');
+        })
     }
-})(remark_config.components || ['embed']);
 
-var targetDiv = document.getElementById("sidebar").getElementsByClassName("mode-toggle")[0];
+    // $('<style>.comment-form__markdown-link {color: rgba(117, 117, 117, .9);}.E_A {background-color: rgba(117, 117, 117, .9) !important;}.E_A:focus {background-color: rgba(117, 117, 117, .9);}.E_A:hover {background-color: #1d1d1d;}</style>')
+    //     .appendTo('button.E_A');
 
-if (targetDiv != null) {
-    targetDiv.addEventListener("click", () => {
-        window.REMARK42.changeTheme(modeToggle.modeStatus === 'light' ? 'dark' : 'light');
-    })
-}
+    // function writeStyles(cssText) {
+    //     var iframeElement = document.getElementsByTagName('iframe')[0];
+    //     if (iframeElement != null) {
+    //         styleElement = document.createElement('style');
+    //         styleElement.type = 'text/css';
+    //         styleElement.id = styleName;
+    //         styleElement.innerHTML = cssText;
+    //         iframeElement.getElementsByTagName('head')[0].appendChild(styleElement);
+    //     }
+    // }
+
+    // var cssText = '.comment-form__markdown-link {color: rgba(117, 117, 117, .9);}.E_A {background-color: rgba(117, 117, 117, .9) !important;}.E_A:focus {background-color: rgba(117, 117, 117, .9);}.E_A:hover {background-color: #1d1d1d;}';
+    // writeStyles(cssText);
 </script>
 
 <!-- <script src="{{ '/assets/js/comments/remark42.js' | relative_url }}"></script> -->
\ No newline at end of file
diff --git a/_includes/head.html b/_includes/head.html
index f017f59..f663fa0 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -89,6 +89,7 @@
     var siteId = "{{site.id}}";
     var postId = "{{page.title}}";
     var remark42Host = "{{ site.comments.remark42.host }}";
+    var remark42Style = "{{ '/assets/css/remark42.css' | relative_url }}"
 
     function ajax(url) {
       return new Promise(function (resolve, reject) {
diff --git a/assets/css/remark42.css b/assets/css/remark42.css
new file mode 100644
index 0000000..a522f9c
--- /dev/null
+++ b/assets/css/remark42.css
@@ -0,0 +1,15 @@
+.comment-form__markdown-link {
+    color: rgba(117, 117, 117, .9);
+}
+
+.E_A {
+    background-color: rgba(117, 117, 117, .9) !important;
+}
+
+.E_A:focus {
+    background-color: rgba(117, 117, 117, .9);
+}
+
+.E_A:hover {
+    background-color: #1d1d1d;
+}
\ No newline at end of file