Responsive Blog card Css Flex box

Solution retrospective
Applied media queries knowledge
What specific areas of your project would you like help with?The spacing between elements. I want to take it to the next level and apply JavaScript to toggle dark and light modes.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @MarziaJalili
Nicely done! 👑
🌟 Dark mode? Awesome idea!
⚡ Here's how you can simply implement that:
✅ First, create a button with an image indicating the dark mode, like a moon or so.
✅ Second, using some JS, you can toggle a
dark
class name when the button is clicked:button.addEventListener("click", = () { document.body.classList.toggle("dark"); })
This will add the class to the body element when there is no class named
dark
or if there is it will remove it.✅ Now, you could use CSS nesting to add the styles to any element you want:
body.dark { background: black; /* You can take any element and add some new styles to it, something like... */ button { color: white; } }
😎😎😎
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