@elyyyse
Posted
Hi, Idriss - Nice job here! Since you implemented all of your colors as CSS variables, it will actually be pretty easy to add the theme change.
I see you started with the dark mode, which is great. You'll want to add your background image(s) here, as well.
:root {
--bg-primary-clr: hsl(235, 21%, 11%);
--bg-secodary-clr: hsl(0, 0%, 98%);
--bg-third-clr: hsl(235, 24%, 19%);
etcetera...
--bg-image: url(./assets/images/bg-desktop-dark.png);
}
Next, you'll want to define a class for the light mode and re-assign your variables to their new respective values.
.light-mode {
--bg-primary-clr: NEW-COLOR-HERE;
--bg-secodary-clr: NEW-COLOR-HERE;
--bg-third-clr: NEW-COLOR-HERE;
etcetera...
--bg-image: url(./assets/images/bg-desktop-light.png);
}
And lastly, back in your JS, you'll need to make it so that when users click the sun icon, the light-mode class is added to the <body> element. I see you already have the moon icon in your header with a hidden class on it, so that will be easy to swap. And then of course, when users click the moon, you'll need to do the reverse.
I hope this makes sense! Feel free to let me know if anything is unclear. :)
Marked as helpful
@IdrissaMurenga
Posted
thanks for your help can you help me to show me how to add those classes to the <body> element@elyyyse
@elyyyse
Posted
@IdrissaMurenga, you're so welcome! Unfortunately I don't really know React yet. In plain Javascript, there's a property called classList that would look something like this:
const body = document.querySelector('body');
sunIcon.addEventListener('click', () => {
body.classList.add('light-mode');
sunIcon.classList.add('hidden');
moonIcon.classList.remove('hidden');
});
I know React works quite differently, though. I found this stack overflow and this reddit thread that might point you in the right direction. I also saw several folks on this platform coded this challenge in React, so perhaps taking a look at their codebases would be helpful. Best of luck!!
Marked as helpful
@IdrissaMurenga
Posted
thanks for your help @elyyyse
