enable light/dark mode for comments

zubeax · Jun 19, 2024 · 0a70d4b · 0a70d4b
1 parent 041d954
commit 0a70d4b
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 27 deletions.
diff --git a/_includes/my-comment-form.html b/_includes/my-comment-form.html
@@ -1,4 +1,4 @@
-<form method="POST" action="{{ site.comments.staticman_url }}" class="comment-form">
+<form method="POST" action="{{ site.comments.staticman_url }}" class="comment-form body html">
   <input name="options[redirect]" type="hidden" value="{{ 'comment-success' | absolute_url }}">
   <input name="options[redirectError]" type="hidden" value="{{ 'comment-error' | absolute_url }}">
   <input name="options[slug]" type="hidden" value="{{ page.slug }}" />
@@ -8,7 +8,7 @@
   <input type="hidden" name="options[reCaptcha][secret]" value="6LdnV_opAAAAAEIxadkcyztVjMEc5x64VPIWx6Mj">
 
   <input
-      class="comment-name"
+      class="comment-name body html"
       name="fields[name]"
       type="text"
       placeholder="Name"
@@ -17,18 +17,18 @@
 
   <textarea
     id="message-{{ include.parent_id }}"
-    class="comment-message"
+    class="comment-message body html"
     name="fields[message]"
     placeholder="Comment (markdown accepted)"
     required
   ></textarea>
 
   <div 
-    class="g-recaptcha" 
+    class="g-recaptcha"
     data-sitekey="6LdnV_opAAAAAN5iGmTD_oQ0Vc5khmshh4AbGDbk"
   ></div>
 
-  <button class="comment-submit" >
+  <button class="comment-submit">
     SEND
   </button>
 </form>

diff --git a/_includes/my-comment-list.html b/_includes/my-comment-list.html
@@ -1,8 +1,8 @@
-{% assign parent_id = include.parent_id | default: '' %} 
+{% assign parent_id = include.parent_id | default: '' %}
 {% assign comments = site.data.comments[page.slug] | where_exp: "item", "item.parent_id == parent_id" %} 
 {% assign sorted_comments = comments | sort: 'date' %}
 {% for comment in sorted_comments %}
-<div class="comment">
+<div class="comment body html">
   <h3>{{comment.name}}</h3>
   <time
     class="post-meta dt-published"
@@ -13,7 +13,7 @@ <h3>{{comment.name}}</h3>
     {{ comment.date | date:" %H:%M - %b %-d, %Y" }}
   </time>
   <p>{{comment.message | strip_html | markdownify }}</p>
-  <div class="comment-reply">
+  <div class="comment-reply body html">
     <input id="reply-{{ comment._id}}" type="checkbox" class="checkbox" />
     <label class="open" for="reply-{{ comment._id }}">
       Reply to {{ comment.name }}

diff --git a/_includes/my-comments.html b/_includes/my-comments.html
@@ -1,6 +1,6 @@
 {% assign provider = site.comments.provider | default:"pystatikman" %}
 {% if provider == "pystatikman" %}
-  <section class="comments">
+  <section class="comment body html">
     {% if site.data.comments[page.slug] %}
     <div>
       {% include my-comment-list.html %}

diff --git a/_includes/repo-display.html b/_includes/repo-display.html
diff --git a/_sass/comments.scss b/_sass/comments.scss
@@ -1,4 +1,11 @@
 // _sass/comments.scss
+//
+//  Settings like :
+//      color: var(--body-color);
+//      background-color: var(--body-bg);
+//      border-color: var(--dark-mode-border-color);
+//  apply dark mode settings to the 'comment' section
+
 .comment {
   padding-top: 10px;
   h3 {
@@ -45,11 +52,19 @@
     border: 1px solid #ddd;
     color: royalblue;
     font-weight: bold;
+    background-color: var(--body-bg);
+    border-color: var(--dark-mode-border-color);
 
     &:hover {
       cursor: pointer;
     }
   }
+
+  input {
+    color: var(--body-color);
+    background-color: var(--body-bg);
+    border-color: var(--dark-mode-border-color);
+  }
 }
 
 .comment-reply {
@@ -95,9 +110,22 @@
 .CodeMirror,
 .editor-toolbar {
    border-radius: 0;
+   background-color: var(--gray-text);
+   border-color: var(--dark-mode-border-color);
+
+   .fa {
+    color: var(--gray-text);
+    border-right: 1px solid var(--border-color);
+    border-left: 1px solid var(--border-color);
+   }
  }
 
 .CodeMirror,
 .CodeMirror-scroll {
   min-height: 150px;
+  color: var(--body-color);
+  background-color: var(--body-bg);
+  border-color: var(--dark-mode-border-color);
 }
+
+