From 7d4a9647d4cdba79e5f630b8d2d522f52b0788e4 Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Sun, 28 Jul 2024 21:37:04 +0100
Subject: [PATCH] Use native dark mode for comentario

---
 static/src/js/dark-mode.js     |  5 ++++
 static/src/scss/_comments.scss | 46 ----------------------------------
 static/src/scss/_content.scss  |  1 +
 static/src/scss/base.scss      |  1 -
 4 files changed, 6 insertions(+), 47 deletions(-)
 delete mode 100644 static/src/scss/_comments.scss

diff --git a/static/src/js/dark-mode.js b/static/src/js/dark-mode.js
index 3efe6f4..08fa65a 100644
--- a/static/src/js/dark-mode.js
+++ b/static/src/js/dark-mode.js
@@ -3,6 +3,7 @@ const STORAGE_KEY = "dark-mode";
 
 const htmlTag = document.getElementsByTagName("html")[0];
 const darkModeToggle = document.getElementById("dark-mode-toggle");
+const comentarioComments = document.getElementsByTagName("comentario-comments");
 
 const matchesDarkMode = window.matchMedia("(prefers-color-scheme: dark)");
 
@@ -14,6 +15,10 @@ function handleDarkMode(darkMode) {
   } else {
     htmlTag.classList.remove(DARK_MODE_CLASS);
   }
+
+  for (const commentElement of comentarioComments) {
+    commentElement.setAttribute("theme", darkMode ? "dark" : "light");
+  }
 }
 
 if (window.localStorage.getItem(STORAGE_KEY) === null) {
diff --git a/static/src/scss/_comments.scss b/static/src/scss/_comments.scss
deleted file mode 100644
index 0a788fa..0000000
--- a/static/src/scss/_comments.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-#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;
-    }
-  }
-}
diff --git a/static/src/scss/_content.scss b/static/src/scss/_content.scss
index 0f6ed13..64ce551 100644
--- a/static/src/scss/_content.scss
+++ b/static/src/scss/_content.scss
@@ -67,5 +67,6 @@ section.content {
 }
 
 #comments {
+  margin-top: 2rem;
   scroll-margin-top: var(--hero-height); // hero height (ish)
 }
diff --git a/static/src/scss/base.scss b/static/src/scss/base.scss
index dc91189..b858f2a 100644
--- a/static/src/scss/base.scss
+++ b/static/src/scss/base.scss
@@ -19,7 +19,6 @@
 @import "spotify";
 @import "404";
 @import "password_required";
-@import "comments";
 @import "similar_content";
 @import "support_pill";