Skip to content
Submitted almost 2 years ago

Social Media Dashboard - Vanilla JS HTML and CSS

Lisa Allen•520
@CrypticMango
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social media dashboard with theme switcher
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

My first time building a theme switch! I struggled a bit at first. If there is a way to do this with fewer lines in JS or a different method altogether please let me know. Also, I was not sure how to get the hover states to work when in light mode.

Community feedback

  • Nelson•2,390
    @nelsonleonePosted almost 2 years ago

    HELLO......congrats on completing this challenge well done 🎉 🎉

    I noticed some things with your solution here's some tips , hope this comment was helpful and made meaning to you

    Firstly,The theme mode change , you can do better than creating DOM list const = and changing the styles,

    This will save you time and you write lesser code.

    **In your CSS, You can create two :root the second should bear the name .theme2

    :root{
 --primary-color:red;
}

.theme2{
 --primary-color:blue;
}

    **NOTE, the should bear the same variable name , but different values.

    In your html , you can give a class of them1 to you <body> or do it with JS.

    window.onload = document.body.classList.add('theme1)

    'theme1' is just the :root

    Then to make your document body use the 'theme2'.

    You can use that when the toggle is clicked.

    Toggle.addeventlister('click',()=> {
     if(document.body.classList.contains('theme1'){
    document.body.classList.remove('theme1')
    document.body.classList.add('theme2')
}
})

    Now your body will use the theme2 variables in your css. This is just one way to do it .

    Secondly, your toggle is not moving when clicked, In the event listner, you can use style.tranform = translateX() or style.left / style.right to move it .

    Hope this was helpful and you understood, have fun coding

    0
    Lisa Allen•520
    @CrypticMangoPosted almost 2 years ago

    @nelsonleone Thanks for the tips! I will go through and update some things once I am done with my current challenge.

    0

Please log in to post a comment

Log in with GitHub

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