diff --git a/media_source/com_contenthistory/js/admin-compare-compare.es6.js b/media_source/com_contenthistory/js/admin-compare-compare.es6.js
index a2023eb27a610..3ab727292cb53 100644
--- a/media_source/com_contenthistory/js/admin-compare-compare.es6.js
+++ b/media_source/com_contenthistory/js/admin-compare-compare.es6.js
@@ -18,22 +18,17 @@
     const fragment = document.createDocumentFragment();
 
     diff.forEach((part) => {
-      let color = '';
+      let tag = 'span';
 
       if (part.added) {
-        color = '#a6f3a6';
+        tag = 'ins';
+      } else if (part.removed) {
+        tag = 'del';
       }
 
-      if (part.removed) {
-        color = '#f8cbcb';
-      }
-
-      // @todo use the tag MARK here not SPAN
-      const span = document.createElement('span');
-      span.style.backgroundColor = color;
-      span.style.borderRadius = '.2rem';
-      span.appendChild(document.createTextNode(decodeHtml(part.value)));
-      fragment.appendChild(span);
+      const element = document.createElement(tag);
+      element.appendChild(document.createTextNode(decodeHtml(part.value)));
+      fragment.appendChild(element);
     });
 
     display.appendChild(fragment);
diff --git a/media_source/templates/administrator/atum/scss/pages/_com_contenthistory.scss b/media_source/templates/administrator/atum/scss/pages/_com_contenthistory.scss
new file mode 100644
index 0000000000000..747441d7f89c6
--- /dev/null
+++ b/media_source/templates/administrator/atum/scss/pages/_com_contenthistory.scss
@@ -0,0 +1,29 @@
+#diff .diff {
+  ins,
+  del {
+    padding: 2px 4px;
+    border-radius: .2rem;
+  }
+
+  ins {
+    color: #000;
+    background-color: #d4fcbc;
+  }
+
+  del {
+    color: #555;
+    background-color: #fbb;
+  }
+}
+
+[data-bs-theme="dark"] #diff .diff {
+  ins {
+    color: #fff;
+    background-color: #266303;
+  }
+
+  del {
+    color: #b3b3b3;
+    background-color: #8f0000;
+  }
+}
diff --git a/media_source/templates/administrator/atum/scss/template.scss b/media_source/templates/administrator/atum/scss/template.scss
index 19c53e4c9ed24..a7aa6780536e6 100644
--- a/media_source/templates/administrator/atum/scss/template.scss
+++ b/media_source/templates/administrator/atum/scss/template.scss
@@ -73,6 +73,7 @@
 // Page specifics
 @import "pages/com_config";
 @import "pages/com_content";
+@import "pages/com_contenthistory";
 @import "pages/com_cpanel";
 @import "pages/com_joomlaupdate";
 @import "pages/com_media";