color scheme issue

assets/stylesheets/common/rewind-header.scss

@@ -10,6 +10,16 @@
   }
 
   @media (prefers-color-scheme: dark) {
+    &.-light {
+      display: block;
+    }
+
+    &.-dark {
+      display: none;
+    }
+  }
+
+  @if is-dark-color-scheme() {
     &.-dark {
       display: none;
     }

assets/stylesheets/common/rewind.scss

@@ -50,7 +50,7 @@
 
 .background-1 {
   background: url(/plugins/discourse-rewind/images/blur-bg.png);
-  @media (prefers-color-scheme: dark) {
+  @if is-dark-color-scheme() {
     opacity: 0.15;
   }
   background-size: contain;

assets/stylesheets/common/top-words.scss

@@ -68,7 +68,7 @@
   .rewind-card {
     box-shadow: 0 0 0 4px rgba(var(--mystery-color-light), 1);
     border: none;
-    @media (prefers-color-scheme: dark) {
+    @if is-dark-color-scheme() {
       background-color: var(--primary-200);
       box-shadow: 0 0 0 4px rgba(var(--mystery-color-dark), 1);
     }
@@ -97,13 +97,13 @@
   }
   &:hover .rewind-card__inner {
     box-shadow: 0px 3px 8px 2px rgba(var(--primary-rgb), 0.25);
-    @media (prefers-color-scheme: dark) {
-      box-shadow: 0px 3px 8px 2px rgba(var(--secondary-rgb), 0.9);
+    @if is-dark-color-scheme() {
+      box-shadow: 0px 3px 8px 2px rgba(var(--primary-rgb), 0.25);
     }
   }
   .rewind-card__inner {
     box-shadow: 0px 0px 6px 2px rgba(var(--primary-rgb), 0.25);
-    @media (prefers-color-scheme: dark) {
+    @if is-dark-color-scheme() {
       box-shadow: 0px 0px 6px 2px rgba(var(--secondary-rgb), 0.9);
     }
   }

assets/stylesheets/common/variables.scss

@@ -17,7 +17,7 @@
   border: 2px solid var(--primary);
   border-radius: var(--rewind-border-radius);
   box-shadow: 4px 4px 0 0 rgba(var(--primary-rgb), 0.25);
-  @media screen and (prefers-color-scheme: dark) {
+  @if is-dark-color-scheme() {
     box-shadow: 0 4px 5px -2px rgba(var(--secondary-rgb), 0.5);
   }
 }