feat: configurable Dark Mode ClassName

.changeset/fifty-planes-laugh.md

@@ -0,0 +1,5 @@
+---
+'twind': patch
+---
+
+configurable Dark Mode ClassName

packages/twind/src/internal/context.ts

@@ -58,9 +58,9 @@ export function createContext<Theme extends BaseTheme = BaseTheme>({
   // we can modify variants as it has been passed through defineConfig which already made a copy
   variants.push([
     'dark',
-    darkMode == 'class'
-      ? '.dark &'
-      : typeof darkMode === 'string' && darkMode != 'media'
+    Array.isArray(darkMode) || darkMode == 'class'
+      ? `${asArray(darkMode)[1] || '.dark'} &`
+      : typeof darkMode == 'string' && darkMode != 'media'
       ? darkMode // a custom selector
       : '@media (prefers-color-scheme:dark)',
   ])

packages/twind/src/tests/dark-mode.test.ts

@@ -0,0 +1,92 @@
+import { assert, test } from 'vitest'
+
+import { twind, virtual } from '..'
+
+test('should be possible to use the darkMode "class" mode', () => {
+  const tw = twind(
+    {
+      darkMode: 'class',
+      rules: [['font-', 'fontWeight']],
+    },
+    virtual(),
+  )
+
+  assert.strictEqual(tw('dark:font-700'), 'dark:font-700')
+
+  assert.deepEqual(tw.target, ['.dark .dark\\:font-700{font-weight:700}'])
+})
+
+test('should be possible to change the class name', () => {
+  const tw = twind(
+    {
+      darkMode: ['class', '.test-dark'],
+      rules: [['font-', 'fontWeight']],
+    },
+    virtual(),
+  )
+
+  assert.strictEqual(tw('dark:font-700'), 'dark:font-700')
+
+  assert.deepEqual(tw.target, ['.test-dark .dark\\:font-700{font-weight:700}'])
+})
+
+test('should be possible to use any selector', () => {
+  const tw = twind(
+    {
+      darkMode: '[theme=dark] &',
+      rules: [['font-', 'fontWeight']],
+    },
+    virtual(),
+  )
+
+  assert.strictEqual(tw('dark:font-700'), 'dark:font-700')
+
+  assert.deepEqual(tw.target, ['[theme=dark] .dark\\:font-700{font-weight:700}'])
+})
+
+test('should be possible to use the darkMode "media" mode', () => {
+  const tw = twind(
+    {
+      darkMode: 'media',
+      rules: [['font-', 'fontWeight']],
+    },
+    virtual(),
+  )
+
+  assert.strictEqual(tw('dark:font-700'), 'dark:font-700')
+
+  assert.deepEqual(tw.target, [
+    '@media (prefers-color-scheme:dark){.dark\\:font-700{font-weight:700}}',
+  ])
+})
+
+test('should default to the `media` mode when no mode is provided', () => {
+  const tw = twind(
+    {
+      rules: [['font-', 'fontWeight']],
+    },
+    virtual(),
+  )
+
+  assert.strictEqual(tw('dark:font-700'), 'dark:font-700')
+
+  assert.deepEqual(tw.target, [
+    '@media (prefers-color-scheme:dark){.dark\\:font-700{font-weight:700}}',
+  ])
+})
+
+test('should default to the `media` mode when mode is set to `false`', () => {
+  const tw = twind(
+    {
+      darkMode: false,
+      rules: [['font-', 'fontWeight']],
+    },
+    virtual(),
+  )
+
+  assert.strictEqual(tw('dark:font-700'), 'dark:font-700')
+
+  assert.deepEqual(tw.target, [
+    '@media (prefers-color-scheme:dark){.dark\\:font-700{font-weight:700}}',
+  ])
+})

packages/twind/src/types.ts

@@ -290,7 +290,13 @@ export type PreflightThunk<Theme extends BaseTheme = BaseTheme> = (
 
 export type HashFunction = (value: string, defaultHash: (value: string) => string) => string
 
-export type DarkModeConfig = 'media' | 'class' | string | boolean | undefined
+export type DarkModeConfig =
+  | 'media'
+  | 'class'
+  | string
+  | boolean
+  | undefined
+  | [mode: 'class', selector: string]
 
 /**
  * Allows to return a dark color for the given light color.