Frontend Mentor - Social media dashboard with theme switcher solution

This is a solution to the Social media dashboard with theme switcher challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author and acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page
• Toggle color theme to their preference

Screenshot

Desktop views

Mobile views

Links

• Solution URL: coming soon...
• Live site

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library

What I learned

• Achieving a linear-gradient effect on borders with border-radius
• Considerations in making an accessible toggle button
• Using useContext hook to avoid passing props down many levels
• Syning state to local storage so that it persists through a page refresh.

Continued development

I can improve the solution by:

• Use the prefers-color-scheme media query to set the theme to their OS preference.

Useful resources

• 'An accessible toggle' by Kitty Giraudel - A detailed walkthrough of a HTML and CSS only implementation of an accessible toggle. This inspired me to include the check and cross icons in the toggle to make the choices clearer.
• 'A complete guide to dark mode on the web' by CSS Tricks - Outlines different approaches to implementing dark mode.
• 'Learn useContext in 13 minutes' by Web Dev Simplified - Video introduction to useContext hook.

Author and acknowledgments

• Coded by En-Chi Liu - GitHub profile
• Challenge, UI design and icons provided by Frontend Mentor
• useLocalStorage hook from useHooks
• Toggle button HTML and CSS adapted from example by Kitty Giraudel, same link as above.