I'm currently working on a React Notes App that includes the functionality to switch between Dark and Light Mode. I've implemented a React Toggle for this purpose, but it seems that the code is only changing the background and h1 colors without affecting the color of the notes as intended.
Specifically, the component's color remains unchanged despite toggling between 'theme-dark' and 'theme-light' classes in Toggle.js, which should also toggle the CSS accordingly.
Here is the code snippet from Toggle.js:
insert unique rewritten code hereThe issue seems to be with CSS variables, especially since I am new to using them. My assumption is that the problem lies within how the colors are being applied to the notes component.
If you take a look at index.css, you'll notice the styling for both light and dark themes along with specific properties for different elements such as textarea, save button, and note components.
In order to achieve the desired result where the notes change colors appropriately in dark mode, I need to make adjustments to how the styles are defined and applied based on the theme chosen.
This is the expected outcome when switching to dark mode:
https://i.sstatic.net/QF2O6.png