Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Intro section with dark mode

Jonathan 550

@htcsjs

Desktop design screenshot for the Intro section with dropdown navigation coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Tried doing a dark mode ussing sass, this was my first time trying to add a dark theme to a site so please if you find any mistakes (like text being hard to read, or colors not going too well with each other etc.) please let me know, i tried researching a little bit about it, but i know nothing about designing so i didn't quite understand it really well but tried my best lol

Community feedback

Tryt4n 940

@Tryt4n

Posted

You can also check if page's user have light or dark device color scheme.

if (!document.body.classList.contains("")) {

let dark = window.matchMedia("(prefers-color-scheme: dark)").matches;

if (dark == true) {

body.classList.remove("bg-white")

body.classList.add("bg-dark")

} else {

body.classList.remove("bg-dark")

body.classList.add("bg-white")

}

Marked as helpful

1

Jonathan 550

@htcsjs

Posted

@Tryt4n Thank you so much! I was not expecting someone to give feedback so fast lol, thanks for your comment i'm really happy! (⁠◠⁠‿⁠◕⁠). Update: i added it, now it should match the user's preference thank you once again!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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