Allow mapping to multiple class names

next-themes/README.md

@@ -256,6 +256,14 @@ If we want the DOM to instead render `data-theme="my-pink-theme"` when the theme
 
 Done! To be extra clear, this affects only the DOM. Here's how all the values will look:
 
+if we want to map a theme to multiple custom theme values, we can simply pass an array:
+```jsx
+<ThemeProvider attribute='class' value={{ pink: ['my-pink-theme', 'another-pink-theme'] }}>
+```
+
+When the selected theme is `pink`, both `my-pink-theme` and `another-pink-theme` will be added as class names.
+
+
 ```js
 const { theme } = useTheme()
 // => "pink"

next-themes/src/index.tsx

@@ -39,7 +39,7 @@ const Theme = ({
   const [resolvedTheme, setResolvedTheme] = React.useState(() => getTheme(storageKey))
   const attrs = !value ? themes : Object.values(value)
 
-  const applyTheme = React.useCallback(theme => {
+  const applyTheme = React.useCallback((theme: string) => {
     let resolved = theme
     if (!resolved) return
 
@@ -48,17 +48,17 @@ const Theme = ({
       resolved = getSystemTheme()
     }
 
-    const name = value ? value[resolved] : resolved
+    const names = [value ? value[resolved] ?? [] : resolved].flat()
     const enable = disableTransitionOnChange ? disableAnimation() : null
     const d = document.documentElement
 
     const handleAttribute = (attr: Attribute) => {
       if (attr === 'class') {
-        d.classList.remove(...attrs)
-        if (name) d.classList.add(name)
+        d.classList.remove(...attrs.flat())
+        if (names.length) d.classList.add(...names)
       } else if (attr.startsWith('data-')) {
-        if (name) {
-          d.setAttribute(attr, name)
+        if (names.length) {
+          d.setAttribute(attr, names.join(' '))
         } else {
           d.removeAttribute(attr)
         }

next-themes/src/types.ts

@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 interface ValueObject {
-  [themeName: string]: string
+  [themeName: string]: string | string[]
 }
 
 export interface UseThemeProps {