DaisyUI 4.7.2自定义主题切换功能失效问题求助

我正在使用DaisyUI 4.7.2版本，尝试为Vite+React项目添加主题切换功能。此前在DaisyUI 2.51.5版本的旧项目中成功实现过该功能，但这次尝试了多种方法，包括咨询AI和查阅官方文档，仍无法定位问题，恳请帮忙解决。

以下是相关配置代码：

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  daisyui: {
    themes: [
      {
        weCareTheme: {
          primary: "#F74F22",
          secondary: "#222328",
          // accent: "#000000",
          accent: "#DD5E12",
          // neutral: "#000000",
          neutral: "#F74F22",
          // "base-100": "#ffff",
          "base-100": "#FFFFFF",

          "--color1": "#FFAC00",
          "--color2": "#FBF7F4",
          "--color3": "#233038",
        },
      },
      {
        halloween: {
          ...require("daisyui/src/theming/themes")["[data-theme=halloween]"],
          primary: "#F28C18",
          secondary: "#212121",
        },
      },
    ],
  },

  plugins: [require("daisyui")],
};

{
  "name": "weeat-client",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@reduxjs/toolkit": "^2.2.1",
    "@types/react-lazy-load-image-component": "^1.6.3",
    "chart.js": "^4.4.2",
    "framer-motion": "^11.0.5",
    "jwt-decode": "^4.0.0",
    "react": "^18.2.0",
    "react-chartjs-2": "^5.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.50.1",
    "react-hot-toast": "^2.4.1",
    "react-icons": "^5.0.1",
    "react-lazy-load": "^4.0.1",
    "react-lazy-load-image-component": "^1.6.0",
    "react-redux": "^9.1.0",
    "react-router-dom": "^6.22.1",
    "react-slick": "^0.30.2",
    "react-toastify": "^10.0.4",
    "redux-persist": "^6.0.0",
    "sweetalert2": "11.0.17"
  },
  "devDependencies": {
    "@types/react": "^18.2.55",
    "@types/react-dom": "^18.2.19",
    "@types/react-slick": "^0.23.13",
    "@typescript-eslint/eslint-plugin": "^6.21.0",
    "@typescript-eslint/parser": "^6.21.0",
    "@vitejs/plugin-react": "^4.2.1",
    "autoprefixer": "^10.4.17",
    "daisyui": "^4.7.2",
    "eslint": "^8.56.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "postcss": "^8.4.35",
    "tailwindcss": "^3.4.1",
    "typescript": "^5.2.2",
    "vite": "^5.1.0"
  }
}

<!DOCTYPE html>
<html data-theme="halloween" lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>weCare</title>
    <link
      rel="stylesheet"
      type="text/css"
      charset="UTF-8"
      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
    />

    <!-- font  -->
    <link
      href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&family=Roboto:wght@500&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

内容的提问来源于stack exchange，提问作者Debabrata Saha