Use custom dark theme colors for revision comparisons. Fix #10552

client/scss/layouts/_compare-revisions.scss

@@ -1,9 +1,21 @@
-$color-addition-dark: #a6f3a6;
-$color-addition-light: #ebffeb;
-$color-deletion-dark: #f8cbcb;
-$color-deletion-light: #ffebeb;
+$color-addition-dark: var(--color-addition-dark);
+$color-addition-light: var(--color-addition-light);
+$color-deletion-dark: var(--color-deletion-dark);
+$color-deletion-light: var(--color-deletion-light);
 
 .comparison {
+  --color-addition-dark: #a6f3a6;
+  --color-addition-light: #ebffeb;
+  --color-deletion-dark: #f8cbcb;
+  --color-deletion-light: #ffebeb;
+
+  @include dark-theme() {
+    --color-addition-dark: #033a16;
+    --color-addition-light: #045720;
+    --color-deletion-dark: #67060c;
+    --color-deletion-light: #8e070f;
+  }
+
   &__child-object {
     border-top: 1px dashed theme('colors.border-furniture');
     padding: 1em;

client/scss/tools/_mixins.general.scss

@@ -112,3 +112,18 @@
 @mixin show-focus-outline-inside {
   outline-offset: -1 * $focus-outline-width;
 }
+
+/**
+ * Apply styles for the dark theme only.
+ */
+@mixin dark-theme() {
+  .w-theme-dark & {
+    @content;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .w-theme-system & {
+      @content;
+    }
+  }
+}