Skip to content
Submitted over 2 years ago

Intro section with dark mode

Jonathan•570
@JonathanP4
A solution to the Intro section with dropdown navigation challenge
Preview (opens in new tab)Code (opens in new tab)

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

Code

Please log in to post a comment

Log in

Community feedback

  • Tryt4n•940
    @Tryt4n

    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

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