@nelsonleone
Posted
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
@CrypticMango
Posted
@nelsonleone Thanks for the tips! I will go through and update some things once I am done with my current challenge.
