Change comments to comentario

static/src/scss/_commento.scss

@@ -1,35 +0,0 @@
-#commento {
-  .commento-profile-button {
-    @include dark-mode {
-      fill: $dark-mode-text;
-    }
-  }
-
-  .commento-name,
-  #commento-mod-tools-lock-button,
-  .commento-login-text,
-  .commento-anonymous-checkbox-container label {
-    @include dark-mode {
-      color: $dark-mode-text;
-    }
-  }
-
-  #commento-textarea-root,
-  #commento-guest-details-input-root,
-  .commento-textarea-container textarea {
-    @include dark-mode {
-      background-color: $black;
-      color: $dark-mode-text;
-    }
-  }
-
-  .commento-card {
-    @include dark-mode {
-      border-top: 1px solid color.adjust($black, $alpha: -0.4);
-
-      p {
-        color: $dark-mode-text;
-      }
-    }
-  }
-}

static/src/scss/_comments.scss

@@ -0,0 +1,46 @@
+section.comments {
+  margin-top: 2rem;
+}
+
+.comentario-text-muted,
+.comentario-root,
+.comentario-card .comentario-name {
+  @include dark-mode {
+    color: $dark-mode-text !important;
+  }
+}
+
+.comentario-add-comment-host,
+.comentario-comment-editor textarea,
+.comentario-toolbar.comentario-disabled {
+  background-color: transparent !important;
+}
+
+.comentario-add-comment-host:not(.comentario-editor-inserted) {
+  border: 1px solid color.adjust($white, $alpha: -0.5) !important;
+}
+
+.comentario-comment-editor textarea {
+  background-color: transparent !important;
+  @include dark-mode {
+    color: $dark-mode-text !important;
+  }
+}
+
+.comentario-footer a {
+  color: $link !important;
+}
+
+.comentario-btn-link {
+  color: $link !important;
+}
+
+.comentario-card {
+  @include dark-mode {
+    border-top: 1px solid color.adjust($white, $alpha: -0.5);
+
+    p {
+      color: $dark-mode-text;
+    }
+  }
+}

static/src/scss/base.scss

@@ -19,7 +19,7 @@
 @import "spotify";
 @import "404";
 @import "password_required";
-@import "commento";
+@import "comments";
 @import "similar_content";
 @import "support_pill";
 

website/common/templates/common/comments.html

@@ -1,5 +1,5 @@
-<section class="container" id="comments">
+<section class="container comments">
-  <div id="commento"></div>
+  <comentario-comments></comentario-comments>
 </section>
 
-<script async defer src="https://commento.theorangeone.net/js/commento.js"></script>
+<script async defer src="https://comentario.theorangeone.net/comentario.js"></script>