Themes don't working with dark mode switcher

NextUI Version

2.2.9

Describe the bug

when you add new theme for example purple-dark (example provied by documentation):

import type { Config } from 'tailwindcss'
const { nextui } = require('@nextui-org/react')

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  darkMode: 'class',
  plugins: [
    nextui({

      themes: {
        'purple-dark': {
          extend: 'dark', // <- inherit default values from dark theme
          colors: {
            background: '#0D001A',
            foreground: '#ffffff',
            primary: {
              50: '#3B096C',
              100: '#520F83',
              200: '#7318A2',
              300: '#9823C2',
              400: '#c031e2',
              500: '#DD62ED',
              600: '#F182F6',
              700: '#FCADF9',
              800: '#FDD5F9',
              900: '#FEECFE',
              DEFAULT: '#DD62ED',
              foreground: '#ffffff',
            },
            focus: '#F182F6',
          },
          layout: {
            disabledOpacity: '0.3',
            radius: {
              small: '4px',
              medium: '6px',
              large: '8px',
            },
            borderWidth: {
              small: '1px',
              medium: '2px',
              large: '3px',
            },
          },
        },
      },
    }),
  ],
}
export default config

and add switcher (example provided by documentation):

'use client'

import { useTheme } from 'next-themes'
import { useEffect, useState } from 'react'

export function ThemeSwitcher() {
  const [mounted, setMounted] = useState(false)
  const { theme, setTheme } = useTheme()

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) return null

  return (
    <div className="flex flex-col">
      The current theme is: {theme}
      <button onClick={() => setTheme('light')}>Light Mode</button>
      <button onClick={() => setTheme('purple-dark')}>Dark Mode</button>
    </div>
  )
}

on the first click the "theme" (variable) changes from "light" to "purple-dark", and colors too, but in the next click, when you try to change from "purple-dark" to "light", the "theme" (variable) changes, but the colors don't, Even though the "theme" changed to light, the colors still maintain the purple-dark style

Your Example Website or App

https://github.com/eder3232/nextui-issue

Steps to Reproduce the Bug or Issue

npm run dev

Expected behavior

when the theme changes to light, the colors are supposed to change to light

Screenshots or Videos

https://github.com/nextui-org/nextui/assets/76524247/5735c995-f25c-4e74-997d-07d22be90e76

Operating System Version

windows

Browser

Chrome

nextui-org / nextui