DEV Community

Cover image for Responsive Social Media Dashboard with Theme Switcher (SCSS + JS)
Kanishka Priyashantha
Kanishka Priyashantha

Posted on • Edited on

Responsive Social Media Dashboard with Theme Switcher (SCSS + JS)

I've just completed a front-end coding challenge from @frontendmentor! πŸŽ‰

This is my solution for the Social Media Dashboard with Theme Switcher.

You can see my solution here: https://www.frontendmentor.io/solutions/responsive-social-media-dashboard-with-theme-switcher-scss-js-SlFQ0A6SQ4

Live Preview: https://kanishkasubash.github.io/social-media-dashboard/

View Code: https://github.com/kanishkasubash/frontend-mentor-challenges/tree/main/social-media-dashboard/build

πŸ› οΈ Built With:

  • Semantic HTML5 markup
  • SASS/SCSS
  • Node.JS
  • GULP.JS
  • Vanilla JS
  • Mobile First Approach

πŸ“¦Features:

  • The user indicates their preference through an operating system setting (e.g. light or dark mode) or a user agent setting.
  • Responsiveness (Mobile/Tab/Laptop/Desktop).
  • Toggle button for custom Theme Change.
  • Hover Effects
  • Animations

πŸ”–What I am used:

  • Toggling Button Link
  • prefers-color-scheme. Link
  • Window: localStorage property. Link
  • CSS Flexbox & Grid. Link

πŸ’‘Any suggestions on how I can improve are welcome!

Top comments (2)

Collapse
 
mursalfk profile image
Mursal Furqan Kumbhar

Hi @kanishkasubash

First of all, welcome to the amazing dev.to community. We hope you have an amazing time here, time full of learning, sharing and help building this community an amazing place.

Congratulations on competing the front-end coding challenge from frontendmentor. πŸŽ‰πŸŽ‰πŸŽ‰ [Calls for a coffee party πŸ˜‰]

Your article seems a good eye-catcher, but it would be really helpful if you share more details in your article, like including the screenshots, code snippets and of-course, sharing link to your amazing accomplishment.

Collapse
 
kanishkasubash profile image
Kanishka Priyashantha

Hi @mursalfk

Thank you for the warm welcome to the community!. Seems very helpful, will definitely check it out. Thanks a lot.