Switching theme not working on Windows - overriding themes broke the switch between themes

[FabienWalle]

Hi.

I've been trying to fix two problems in my React project for some time now but I'm still not getting anywhere.

I've configured the Light and Business themes. I use ReduxToolKit to change themes. I have a Sun/Moon icon in the header to change and everything works:

tailwind.config.js:

/** @type {import("tailwindcss").Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["Roboto", "sans-serif"],
      },
    },
  },
  plugins: [require("daisyui")],
  daisyui: {
    themes: ["light", "business"],
    darkTheme: "business",
  },
};

theme.slice.ts:

import {createSlice} from "@reduxjs/toolkit";

const initialState = {
	theme: "light",
};

const themeSlice = createSlice({
	name: "theme",
	initialState,
	reducers: {
		toggleTheme: (state) => {
			state.theme = state.theme === "light" ? "dark" : "light";
		},
	},
});

export const {toggleTheme} = themeSlice.actions;
export default themeSlice.reducer;

Switch icon in header.tsx :

import {MoonIcon, SunIcon} from "@heroicons/react/24/outline";
import {useDispatch, useSelector} from "react-redux";
import {toggleTheme} from "@/store/features/theme.slice";
import {RootState} from "@/store/store";

const Header = () => {
	const theme = useSelector((state: RootState) => state.theme.theme);
	const dispatch = useDispatch();

	const handleThemeChange = () => {
		dispatch(toggleTheme());
	};

	return (
		<header data-theme={theme} className="navbar flex justify-between mb-4 shadow-lg">
			<div className="flex align-middle h-full">
			//component
				<label className="swap swap-rotate w-10">
					<input type="checkbox" onChange={handleThemeChange} checked={theme === "dark"}/>

					<SunIcon className="swap-on h-6 w-6 text-gray-500"/>

					<MoonIcon className="swap-off h-6 w-6 text-gray-500"/>
				</label>
			</div>
                  //component
		</header>
	);
};

export default Header;

1. on Windows, the theme change doesn't work. I have to change the global Windows theme, like shown in this image :
   https://cdn.mos.cms.futurecdn.net/CEkjvLtjQXjgnMZvosd8Jm-650-80.jpg.webp
   then the switch works. I'd like to be able to make it work without the user having to change their Windows configuration.

2. I'd like to override some of the colours in these two themes for those ones:

for light:

{
           'primary' : '#4BBEDB',
           'primary-focus' : '#369fba',

           'secondary' : '#DB774B',
           'secondary-focus' : '#c86a41',

           'accent' : '#DBA64B',
           'accent-focus' : '#c8953c',

           'neutral' : '#3b424e',
           'neutral-focus' : '#2a2e37',

      
        },

for business :

         {
           'primary' : '#4BBEDB',
           'primary-focus' : '#4BBEDB',

           'secondary' : '#DB774B',
           'secondary-focus' : '#DB774B',

           'accent' : '#DBA64B',
           'accent-focus' : '#DBA64B',
        },

However when I try to configure this overload in tailwind.config.js, like this :

/** @type {import("tailwindcss").Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["Roboto", "sans-serif"],
      },
    },
  },
  plugins: [require("daisyui")],
  daisyui: {
    themes: [
      {
        AsLight: {
          ...require("daisyui/src/theming/themes")["[light]"],
          'primary': '#4BBEDB',
          'primary-focus': '#369fba',
          'secondary': '#DB774B',
          'secondary-focus': '#c86a41',
          'accent': '#DBA64B',
          'accent-focus': '#c8953c',
          'neutral': '#3b424e',
          'neutral-focus': '#2a2e37',
        },
        AsDark: {
          ...require("daisyui/src/theming/themes")["[business]"],
          'primary': '#4BBEDB',
          'primary-focus': '#369fba',
          'secondary': '#DB774B',
          'secondary-focus': '#c86a41',
          'accent': '#DBA64B',
          'accent-focus': '#c8953c',
          'neutral': '#3b424e',
          'neutral-focus': '#2a2e37',
        },
      }
    ],
    darkTheme: "AsDark",
  },
};

I do see the new colours displayed, but the switch no longer works. The application remains in light. I can see the icon change from sun to moon and its animation.

Thank you in advance !

[saadeghi]

I guess you should use your theme names here:

state.theme = state.theme === "light" ? "dark" : "light";

instead of light/dark.

If the issue still exists, please provide a minimal reproduction link.

Let me know if you have a question.

[FabienWalle]

I've tried with those changes, as well as changing 'dark' to 'AsDark' in Header.tsx. Maybe i forgot to mention i did while customizing themes. But it didn't solve the problem.

import {createSlice} from "@reduxjs/toolkit";

const initialState = {
	theme: "AsLight",
};

const themeSlice = createSlice({
	name: "theme",
	initialState,
	reducers: {
		toggleTheme: (state) => {
			state.theme = state.theme === "AsLight" ? "AsDark" : "AsLight";
		},
	},
});

export const {toggleTheme} = themeSlice.actions;
export default themeSlice.reducer;

If the issue still exists, please provide a minimal reproduction link.

I cannot, but please tell me what do you need to solve my problems.

[saadeghi]

I need to run your project to see the result HTML/CSS, change different things and see if the result is fixed or not. It's hard to guess what's the issue without running the code. And it's just daisyUI. With any library, you need to provide a minimal reproduction link so others can run your exact same code/config/dependencies and see the result.

Without a reproduction link, I can't guess if your theme switch script is working or not just by looking at the source code and I can't even see the result HTML on runtime.