diff --git a/postcss.config.js b/postcss.config.js
index 8e4ca66639..d880538efd 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -11,7 +11,7 @@ module.exports = ({file}) => ({
             // the flatpickr dark theme. We do this because flatpickr themes
             // are not scoped. See https://github.com/flatpickr/flatpickr/issues/2168.
             require("postcss-import")({
-                plugins: [require("postcss-prefixwrap")("%dark-theme-block")],
+                plugins: [require("postcss-prefixwrap")("%dark-theme")],
             }),
         require("postcss-nested"),
         require("postcss-extend-rule"),
diff --git a/static/styles/dark_theme.css b/static/styles/dark_theme.css
index 3fc4e3106e..7a11e138c7 100644
--- a/static/styles/dark_theme.css
+++ b/static/styles/dark_theme.css
@@ -1,11 +1,6 @@
 @import url("flatpickr/dist/themes/dark.css");
 
-:root.dark-theme {
-    /* the following block(s) are generated by the import statements.
-       See postcss.config.js for details.
-     */
-    @extend %dark-theme-block;
-
+%dark-theme {
     color-scheme: dark;
 
     body {
@@ -1502,13 +1497,17 @@
 }
 
 @supports (-moz-appearance: none) {
-    :root.dark-theme #settings_page select {
+    %dark-theme #settings_page select {
         background-color: hsla(0, 0%, 0%, 0.2);
     }
 }
 
+:root.dark-theme {
+    @extend %dark-theme;
+}
+
 @media (prefers-color-scheme: dark) {
     :root.color-scheme-automatic {
-        @extend :root.dark-theme;
+        @extend %dark-theme;
     }
 }