Submitted over 1 year ago

todo app

react

Idriss•220

@IdrissaMurenga

A solution to the Todo app challenge

Preview Code

Solution retrospective

i didn't make a changing theme anyone with an idea can help me please.

Code

Please log in to post a comment

Community feedback

P
Elyse Kanagaratnam•300
@elyyyse
Posted over 1 year ago
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

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord