Mobile first using sass/scss and basic javascript

Community feedback

• 

  Leshy•580

  @LeshyNLPosted over 4 years ago

  Hey Norbert,

  Your theme switcher solution works well, and I like how you also added in a change in the button label from 'Dark Mode' to 'Light Mode'. The toggle button could work a little nicer if you were able to click the entire toggle area, rather than just the small circle itself.

  In terms of the code, I see that you have a function that loops through all elements on the page and sets or removes an [element]--light class on each one. While it certainly works, it would likely be more efficient (in particular on larger pages with many more elements) to just toggle a single class on the body, and then set styles for the individual elements in the CSS through .theme--light .element {...}.

  A next step could be to look into using CSS variables (officially named CSS custom properties). These allow you to assign values to variables (for example: :root { --color-primary: white;}), and assign those variables to CSS declarations (like p {color: var(--color-primary);}). They are particularly useful for setting themes, as all you would then have to do when switching themes is set .theme--light { --color-primary: black;}. Everything that you have declared to use --color-primary will automatically switch, without you having to declare colours on each element for each theme separately.

  Good luck and keep coding!

  1

  ---

  

  Norbert Wronski•160

  @WronskiNPosted over 4 years ago

  @LeshyNL Thank you for your feedback. Appreciate. I will look into closer and try to implement changes with your advised methods. I understand that my solution is working but is not the best way of doing.

  Not sure if I can use :root variables in scss? Will check this out.

  Thanks!

  0