static/src/js/dark-mode.js

@@ -14,6 +14,10 @@ function handleDarkMode(darkMode) {
   } else {
     htmlTag.classList.remove(DARK_MODE_CLASS);
   }
+
+  if (window.REMARK42) {
+    window.REMARK42.changeTheme(darkMode ? "dark" : "light");
+  }
 }
 
 if (window.localStorage.getItem(STORAGE_KEY) === null) {

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,3 @@
+section.comments {
+  margin-top: 2rem;
+}

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,13 @@
-<section class="container">
+<section class="container comments">
-  <div id="commento"></div>
+  <div id="remark42"></div>
 </section>
 
-<script async defer src="https://commento.theorangeone.net/js/commento.js"></script>
+<script>
+  var remark_config = {
+    host: 'https://remark.theorangeone.net',
+    site_id: 'theorangeone',
+    no_footer: true
+  }
+</script>
+
+<script type="module" async defer src="https://remark.theorangeone.net/web/embed.mjs"></script>

website/common/templates/wagtailmetadata/parts/tags.html

@@ -18,7 +18,6 @@
 {% block meta %}
   {{ block.super }}
   <link rel="canonical" href="{{ object.get_meta_url }}" />
-  <meta name="color-scheme" content="dark light" />
   <meta name="author" content="TheOrangeOne" />
   <meta name="creator" content="TheOrangeOne" />
   <meta name="publisher" content="TheOrangeOne" />