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.
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
- Live Site URL: GitHub Pages
- Solution URL: Frontend Mentor
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
Coding the dark/light mode was so much easier than I'd imagined, with a little
thought. Simply have 2 classes each containing variables for that theme's colors,
and use these variables throughout. Then a little JS to add the correct
class to the <body> element and done!
I researched how to detect the user's dark/light mode preference in the Operating System, and took advantage to choose the default mode based on this. Doesn't seem to work properly in Chrome (at least on Ubuntu desktop), for further investigation!
After submission I plan to re-write to take the data from an local JSON file, to simulate using an API (values are hard-coded at the moment as per the challenge)
- Website - Grant Ramsay
- Frontend Mentor - @seapagan
- Twitter - @gnramsay_dev