I am using Daisyui 4.7.2 version. I am trying to add a toggle theme change feature to my project. I have already made the same feature in my older project which was the 2.51.5 version.
I tried many ways, asked chatgpt, and read documentation, but unfortunately, I am not able to figure out why this is not working. Can anyone kindly help me solve this problem?
/** @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:[email protected]&family=Roboto:wght@500&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
You are accessing the theme incorrectly in your tailwind config.
For changing themes, DaisyUI recommends using theme-change. Here is a working example.