To-do List

Hi Anderson, great job here, and I think everything looks great (looking great is always the first step to success)! As for functionality, I was able to add items and remove them using the "X", but the filter options below weren't really working for me, as in they don't seem to be responding.

Anyway, one suggestion I have give here is the background image; I'm viewing this on a large screen and the image is cut off on the right. To prevent that from happening, just add background-size: contain and that should fix it.

About a color theme, I recently had to build one as well, and I found Adam Argyle's tutorial here to be a great help: https://web.dev/building-a-theme-switch-component/

Here's the challenge I built that used the theme switcher: https://www.frontendmentor.io/solutions/responsive-calculator-built-with-vanilla-js-w9UinqToJQ

Anyway, this is a great start, Anderson!

Hey Anderson. Great work on your solution! To use checkbox and style as you wish you can use appearance: none. This is what I've used on my solution:

.theme-switch {
    appearance: none;
    width: 26px;
    height: 26px;
    background-image: url('images/icon-sun.svg');
    background-repeat: no-repeat;
    cursor: pointer;
}

.theme-switch:checked {
    background-image: url('images/icon-moon.svg');
    background-position: center;
}

Also you can define just one class per theme on body. Example:

.dark {
    --bg-color: hsl(235, 21%, 11%);
    --bg-content: hsl(235, 24%, 19%);
}

.light {
    --bg-color: rgb(235, 235, 235);
    --bg-content: white;
}

Then add & remove with checkbox. You can use the variables on any element, switching class from body will be enough. Would make it much more easier to store in localStorage as well. Happy coding :)