Skip to content
Submitted almost 2 years ago

social-media-dashboard-with-theme-switcher-master

Yahya Ahmed Farouk•570
@yahyaahmed1
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

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

    Marked as helpful
    1
    Yahya Ahmed Farouk•570
    @yahyaahmed1Posted almost 2 years ago

    @nelsonleone Thank You, I've edited the project. your comment helped me so much 💗

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

    @yahyaahmed1 you are welcome

    1

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