diff --git a/assets/javascripts/discourse/components/reports/word-card.gjs b/assets/javascripts/discourse/components/reports/word-card.gjs
index dd4c5b0..c89ce19 100644
--- a/assets/javascripts/discourse/components/reports/word-card.gjs
+++ b/assets/javascripts/discourse/components/reports/word-card.gjs
@@ -14,11 +14,20 @@ const MYSTERY_EMOJIS = [
 ];
 
 const BACKGROUND_COLORS = [
-  "#FBF5AF",
-  "#28ABE2",
-  "#F0794A",
-  "#E84A51",
-  "#FBF5AF",
+  [
+    "251, 245, 175",
+    "40, 171, 226",
+    "12, 166, 78",
+    "240, 121, 74",
+    "232, 74, 81",
+  ],
+  [
+    "197, 193, 140",
+    "39, 137, 178",
+    "17, 138, 68",
+    "188, 105, 65",
+    "183, 64, 70",
+  ],
 ];
 
 export default class WordCard extends Component {
@@ -29,7 +38,9 @@ export default class WordCard extends Component {
   get mysteryData() {
     return {
       emoji: MYSTERY_EMOJIS[this.args.index],
-      color: `--mystery-color: ${BACKGROUND_COLORS[this.args.index]}`,
+      color: `--mystery-color-light: ${
+        BACKGROUND_COLORS[0][this.args.index]
+      }; --mystery-color-dark: ${BACKGROUND_COLORS[1][this.args.index]};`,
     };
   }
 
diff --git a/assets/stylesheets/common/index.scss b/assets/stylesheets/common/index.scss
index ac169cf..65a8271 100644
--- a/assets/stylesheets/common/index.scss
+++ b/assets/stylesheets/common/index.scss
@@ -1,3 +1,4 @@
+@import "variables";
 @import "rewind";
 @import "report";
 @import "card";
diff --git a/assets/stylesheets/common/reading-time.scss b/assets/stylesheets/common/reading-time.scss
index ec034a8..ce99976 100644
--- a/assets/stylesheets/common/reading-time.scss
+++ b/assets/stylesheets/common/reading-time.scss
@@ -87,7 +87,10 @@
   padding: 1.5em;
   justify-content: space-around;
   align-items: center;
-  background-color: #11be6d;
+  background-color: rgba(var(--d-green), 1);
+  @media (prefers-color-scheme: dark) {
+    background-color: rgba(var(--d-green-dark), 1);
+  }
   --book-color: rgba(var(--primary-rgb), 0.4);
   border-radius: 2px;
 }
diff --git a/assets/stylesheets/common/rewind.scss b/assets/stylesheets/common/rewind.scss
index f34336c..10be1c6 100644
--- a/assets/stylesheets/common/rewind.scss
+++ b/assets/stylesheets/common/rewind.scss
@@ -44,6 +44,9 @@
 
 .background-1 {
   background: url(/plugins/discourse-rewind/images/bg-1.png);
+  @media (prefers-color-scheme: dark) {
+    opacity: 0.15;
+  }
   background-size: contain;
   position: absolute;
   transform: translateY(0px);
diff --git a/assets/stylesheets/common/variables.scss b/assets/stylesheets/common/variables.scss
new file mode 100644
index 0000000..7f12943
--- /dev/null
+++ b/assets/stylesheets/common/variables.scss
@@ -0,0 +1,12 @@
+:root {
+  --d-yellow: 251, 245, 175;
+  --d-blue: 40, 171, 226;
+  --d-green: 12, 166, 78;
+  --d-orange: 240, 121, 74;
+  --d-red: 232, 74, 81;
+  --d-yellow-dark: 197, 193, 140;
+  --d-blue-dark: 39, 137, 178;
+  --d-green-dark: 17, 138, 68;
+  --d-orange-dark: 188, 105, 65;
+  --d-red-dark: 183, 64, 70;
+}
diff --git a/assets/stylesheets/common/word-card.scss b/assets/stylesheets/common/word-card.scss
index 1181ed6..775b6bf 100644
--- a/assets/stylesheets/common/word-card.scss
+++ b/assets/stylesheets/common/word-card.scss
@@ -14,8 +14,12 @@
   transform: rotateZ(calc(var(--ambientAmount) * 10deg));
   z-index: 1;
   .rewind-card {
-    box-shadow: 0 0 0 4px var(--mystery-color);
+    box-shadow: 0 0 0 4px rgba(var(--mystery-color-light), 1);
     border: none;
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--primary-200);
+      box-shadow: 0 0 0 4px rgba(var(--mystery-color-light), 0.75);
+    }
   }
   .rewind-card__inner {
     position: relative;
@@ -57,6 +61,24 @@
       ".  .  . " 1fr
       ".  .  br" 1fr
       / 1fr 3fr 1fr;
+    background-image: linear-gradient(
+      45deg,
+      var(--primary-100) 12.5%,
+      var(--primary-200) 12.5%,
+      var(--primary-200) 25%,
+      var(--primary-100) 25%,
+      var(--primary-100) 37.5%,
+      var(--primary-200) 37.5%,
+      var(--primary-200) 50%,
+      var(--primary-100) 50%,
+      var(--primary-100) 62.5%,
+      var(--primary-200) 62.5%,
+      var(--primary-200) 75%,
+      var(--primary-100) 75%,
+      var(--primary-100) 87.5%,
+      var(--primary-200) 87.5%,
+      var(--primary-200)
+    );
   }
   .rewind-card__image.tl {
     grid-area: tl;