Currently, I am facing an issue with a custom hook that manages the theme (dark/light mode) using tailwind CSS. Specifically, I have two images that are supposed to switch based on the theme mode selected. Despite successfully changing FontAwesome icons from sun to moon, the image swapping between darkMode and lightMode does not seem to work as intended.
The useTheme.tsx hook handles the switching of the title image based on the theme and changeTheme. The changeTheme function is utilized in my Theme.tsx component through a basic button that triggers the onClick event.
import { useState, useEffect } from 'react';
export function useTheme() {
const [theme, setTheme] = useState('light');
useEffect(() => {
if (theme === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
console.log(theme);
}, [theme]);
const changeTheme = () => {
if (theme === 'light') {
setTheme('dark');
}
if (theme === 'dark') {
setTheme('light');
}
};
return { theme, changeTheme };
}
The Title.tsx component is where the image should dynamically change based on the selected theme.
import { NavLink } from 'react-router-dom';
import { useTheme } from '../../hooks/ThemeHook';
export function Title() {
const { theme } = useTheme();
return (
<NavLink to="/">
{theme === 'dark' ? (
<img
src={'/signature_red.png'}
alt="signature1"
key={theme}
className="min-w-[150px] max-w-[300px] w-1/3 h-[75px]"
/>
) : (
<img
src="/signature.png"
alt="signature2"
key={theme}
className="min-w-[150px] max-w-[300px] w-1/3 h-[75px]"
/>
)}
</NavLink>
);
}
I've made several attempts to resolve this issue, including modifications to the useEffect hook, adjusting only the changeTheme function, introducing a helper variable in Title.tsx to pass to changeTheme for theme changes, and conditionally altering the source of one image. However, despite these efforts, the problem persists. Any suggestions or guidance would be greatly appreciated. Thank you!