diff --git a/modules/dt.init.less b/modules/dt.init.less
index 6646a36e7..b2ec65dcd 100644
--- a/modules/dt.init.less
+++ b/modules/dt.init.less
@@ -133,11 +133,13 @@ h1, h2, h3, h4, h5, h6 {
 	// Safari doesn't blend this overlay with the text unless GPU rendering is forced.
 	transform: translateZ( 0 );
 
-	html.skin-theme-clientpref-night & {
-		mix-blend-mode: lighten;
+	@media screen {
+		html.skin-theme-clientpref-night & {
+			mix-blend-mode: lighten;
+		}
 	}
 
-	@media ( prefers-color-scheme: dark ) {
+	@media screen and ( prefers-color-scheme: dark ) {
 		html.skin-theme-clientpref-os & {
 			mix-blend-mode: lighten;
 		}
diff --git a/modules/dt.ui.ReplyWidget.less b/modules/dt.ui.ReplyWidget.less
index d6eeec205..194275ff0 100644
--- a/modules/dt.ui.ReplyWidget.less
+++ b/modules/dt.ui.ReplyWidget.less
@@ -303,11 +303,13 @@
 		}
 		// TODO: Consider doing this via's Toggler.js's APIs, rather than CSS overrides.
 
-		html.skin-theme-clientpref-night & {
-			background: @background-color-interactive-subtle;
+		@media screen {
+			html.skin-theme-clientpref-night & {
+				background: @background-color-interactive-subtle;
+			}
 		}
 
-		@media ( prefers-color-scheme: dark ) {
+		@media screen and ( prefers-color-scheme: dark ) {
 			html.skin-theme-clientpref-os & {
 				background: @background-color-interactive-subtle;
 			}