diff --git a/src/corePlugins.js b/src/corePlugins.js
index b88d1a90f..7408fe640 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -244,7 +244,6 @@ export let variantPlugins = {
           if (format === '.dark') {
             mode = false
             log.warn('darkmode-variant-without-selector', [
-              'darkMode: "variant" was used without a provided selector.',
               'When using `variant` for `darkMode`, you must provide a selector.',
               'Example: `darkMode: ["variant", ".your-selector &"]`',
             ])
@@ -261,15 +260,15 @@ export let variantPlugins = {
       className = formats
     }
 
-    if (mode === 'class') {
-      addVariant('dark', `:is(:where(${className}) &)`)
-    } else if (mode === 'legacy') {
-      // Exists for pre v3.4 compatibility
-      addVariant('dark', `:is(${className} &)`)
+    if (mode === 'selector') {
+      addVariant('dark', [`:is(:where(${className}) &)`, `&:where(${className})`])
     } else if (mode === 'media') {
       addVariant('dark', '@media (prefers-color-scheme: dark)')
     } else if (mode === 'variant') {
       addVariant('dark', className)
+    } else if (mode === 'class') {
+      // Exists for pre v3.4 compatibility
+      addVariant('dark', `:is(${className} &)`)
     }
   },
 
diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js
index 1095145eb..ad1f0f9e0 100644
--- a/src/lib/setupContextUtils.js
+++ b/src/lib/setupContextUtils.js
@@ -757,18 +757,21 @@ function resolvePlugins(context, root) {
     variantPlugins['supportsVariants'],
     variantPlugins['reducedMotionVariants'],
     variantPlugins['prefersContrastVariants'],
-    variantPlugins['printVariant'],
     variantPlugins['screenVariants'],
     variantPlugins['orientationVariants'],
     variantPlugins['directionVariants'],
     variantPlugins['darkVariants'],
     variantPlugins['forcedColorsVariants'],
+    variantPlugins['printVariant'],
   ]
 
   // This is a compatibility fix for the pre 3.4 dark mode behavior
+  // The `class` strategy is deprecated in favor of `selector` which has the new behavior
   // You can enable the old behavior by setting `darkMode: ['legacy', selector]`
-  let isLegacyDarkMode = context.tailwindConfig.darkMode === 'legacy'
-    || (Array.isArray(context.tailwindConfig.darkMode) && context.tailwindConfig.darkMode[0] === 'legacy')
+  let isLegacyDarkMode =
+    context.tailwindConfig.darkMode === 'class' ||
+    (Array.isArray(context.tailwindConfig.darkMode) &&
+      context.tailwindConfig.darkMode[0] === 'class')
 
   if (isLegacyDarkMode) {
     afterVariants = [
@@ -776,8 +779,8 @@ function resolvePlugins(context, root) {
       variantPlugins['directionVariants'],
       variantPlugins['reducedMotionVariants'],
       variantPlugins['prefersContrastVariants'],
-      variantPlugins['printVariant'],
       variantPlugins['darkVariants'],
+      variantPlugins['printVariant'],
       variantPlugins['screenVariants'],
       variantPlugins['orientationVariants'],
 
diff --git a/tests/apply.test.js b/tests/apply.test.js
index 6c79db2b7..f9c46d371 100644
--- a/tests/apply.test.js
+++ b/tests/apply.test.js
@@ -1972,7 +1972,7 @@ it('should maintain the correct selector when applying other utilities', () => {
 
 it('pseudo elements inside apply are moved outside of :is() or :has()', () => {
   let config = {
-    darkMode: 'class',
+    darkMode: 'selector',
     content: [
       {
         raw: html` <div class="foo bar baz qux steve bob"></div> `,
@@ -2017,8 +2017,11 @@ it('pseudo elements inside apply are moved outside of :is() or :has()', () => {
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
       :is(:where(.dark) .foo):before,
+      .foo:where(.dark):before,
       :is(:where([dir='rtl']) :is(:where(.dark) .bar)):before,
-      :is(:where([dir='rtl']) :is(:where(.dark) .baz:hover)):before {
+      :is(:where([dir='rtl']) .bar:where(.dark)):before,
+      :is(:where([dir='rtl']) :is(:where(.dark) .baz:hover)):before,
+      :is(:where([dir='rtl']) .baz:hover:where(.dark)):before {
         background-color: #000;
       }
       :-webkit-any(
@@ -2029,7 +2032,14 @@ it('pseudo elements inside apply are moved outside of :is() or :has()', () => {
       :is(:where([dir='rtl']) :is(:where(.dark) .qux))::file-selector-button:hover {
         background-color: #000;
       }
-      :is(:where([dir='rtl']) :is(:where(.dark) .steve):hover):before {
+      :-webkit-any(:where([dir='rtl']) .qux)::-webkit-file-upload-button:hover:where() {
+        background-color: #000;
+      }
+      :is(:where([dir='rtl']) .qux)::file-selector-button:hover:where() {
+        background-color: #000;
+      }
+      :is(:where([dir='rtl']) :is(:where(.dark) .steve):hover):before,
+      :is(:where([dir='rtl']) .steve:where(.dark):hover):before {
         background-color: #000;
       }
       :-webkit-any(
diff --git a/tests/dark-mode.test.js b/tests/dark-mode.test.js
index 69ce41fcd..1136c5bd7 100644
--- a/tests/dark-mode.test.js
+++ b/tests/dark-mode.test.js
@@ -2,7 +2,7 @@ import { run, html, css, defaults } from './util/run'
 
 it('should be possible to use the darkMode "class" mode', () => {
   let config = {
-    darkMode: 'class',
+    darkMode: 'selector',
     content: [{ raw: html`<div class="dark:font-bold"></div>` }],
     corePlugins: { preflight: false },
   }
@@ -16,7 +16,8 @@ it('should be possible to use the darkMode "class" mode', () => {
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
       ${defaults}
-      :is(:where(.dark) .dark\:font-bold) {
+      :is(:where(.dark) .dark\:font-bold),
+      .dark\:font-bold:where(.dark) {
         font-weight: 700;
       }
     `)
@@ -25,7 +26,7 @@ it('should be possible to use the darkMode "class" mode', () => {
 
 it('should be possible to change the class name', () => {
   let config = {
-    darkMode: ['class', '.test-dark'],
+    darkMode: ['selector', '.test-dark'],
     content: [{ raw: html`<div class="dark:font-bold"></div>` }],
     corePlugins: { preflight: false },
   }
@@ -39,7 +40,8 @@ it('should be possible to change the class name', () => {
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
       ${defaults}
-      :is(:where(.test-dark) .dark\:font-bold) {
+      :is(:where(.test-dark) .dark\:font-bold),
+      .dark\:font-bold:where(.test-dark) {
         font-weight: 700;
       }
     `)
@@ -120,9 +122,9 @@ it('should default to the `media` mode when mode is set to `false`', () => {
   })
 })
 
-it('should support legacy dark mode behavior', () => {
+it('should support the deprecated `class` dark mode behavior', () => {
   let config = {
-    darkMode: 'legacy',
+    darkMode: 'class',
     content: [{ raw: html`<div class="dark:font-bold"></div>` }],
     corePlugins: { preflight: false },
   }
@@ -140,9 +142,9 @@ it('should support legacy dark mode behavior', () => {
   })
 })
 
-it('should support custom classes with legacy dark mode', () => {
+it('should support custom classes with  deprecated `class` dark mode', () => {
   let config = {
-    darkMode: ['legacy', '.my-dark'],
+    darkMode: ['class', '.my-dark'],
     content: [{ raw: html`<div class="dark:font-bold"></div>` }],
     corePlugins: { preflight: false },
   }
@@ -160,10 +162,14 @@ it('should support custom classes with legacy dark mode', () => {
   })
 })
 
-it('should use legacy sorting when using darkMode: legacy', () => {
+it('should use legacy sorting when using `darkMode: class`', () => {
   let config = {
-    darkMode: 'legacy',
-    content: [{ raw: html`<div class="dark:text-green-100  hover:text-green-200 lg:text-green-300"></div>` }],
+    darkMode: 'class',
+    content: [
+      {
+        raw: html`<div class="dark:text-green-100  hover:text-green-200 lg:text-green-300"></div>`,
+      },
+    ],
     corePlugins: { preflight: false },
   }
 
@@ -193,8 +199,12 @@ it('should use legacy sorting when using darkMode: legacy', () => {
 
 it('should use modern sorting otherwise', () => {
   let config = {
-    darkMode: 'class',
-    content: [{ raw: html`<div class="dark:text-green-100  hover:text-green-200 lg:text-green-300"></div>` }],
+    darkMode: 'selector',
+    content: [
+      {
+        raw: html`<div class="dark:text-green-100  hover:text-green-200 lg:text-green-300"></div>`,
+      },
+    ],
     corePlugins: { preflight: false },
   }
 
@@ -214,7 +224,8 @@ it('should use modern sorting otherwise', () => {
           color: rgb(134 239 172 / var(--tw-text-opacity));
         }
       }
-      :is(:where(.dark) .dark\:text-green-100) {
+      :is(:where(.dark) .dark\:text-green-100),
+      .dark\:text-green-100:where(.dark) {
         --tw-text-opacity: 1;
         color: rgb(220 252 231 / var(--tw-text-opacity));
       }
diff --git a/tests/plugins/variants/__snapshots__/darkVariants.test.js.snap b/tests/plugins/variants/__snapshots__/darkVariants.test.js.snap
index 5414de562..0a3dda916 100644
--- a/tests/plugins/variants/__snapshots__/darkVariants.test.js.snap
+++ b/tests/plugins/variants/__snapshots__/darkVariants.test.js.snap
@@ -12,7 +12,7 @@ exports[`should test the 'darkVariants' plugin 1`] = `
 
 exports[`should test the 'darkVariants' plugin 2`] = `
 "
-:is(:where(.dark) .dark\\:flex) {
+:is(.dark .dark\\:flex) {
   display: flex;
 }
 "
@@ -20,7 +20,7 @@ exports[`should test the 'darkVariants' plugin 2`] = `
 
 exports[`should test the 'darkVariants' plugin 3`] = `
 "
-:is(:where(.my-dark-mode) .dark\\:flex) {
+:is(.my-dark-mode .dark\\:flex) {
   display: flex;
 }
 "