Front End Mentor - Project 028 - Social Media Dashboard with Theme Switcher
This is a solution to the Social Media Dashboard with Theme Switcher challenge on Frontend Mentor.
Table of contents
Overview
Screenshot
- Desktop
- Mobile
Links
- Solution URL: https://github.com/rashidshamloo/fem_028_social-media-dashboard-with-theme-switcher/
- Live Site URL: https://rashidshamloo.github.io/fem_028_social-media-dashboard-with-theme-switcher/
My process
Built with
- Vite / Vue.js
- Tailwind CSS
- Semantic HTML5 markup
What I learned
- Implementing components in Vue.js using the Composition API (
<script setup>) - Using TypeScript in Vue.js
- How switching between dark mode and light mode works in Tailwind CSS
- Implementing a dark/light mode toggle using Tailwind CSS and JavaScript
- Using "localStorage" to store the theme mode
- Automatic Tailwind CSS class sorting using Prettier
- More experience in using Grid and Flex Box
Useful resources
- Grid Areas for Tailwind CSS - The grid area plugin for Tailwind CSS that i used
Author
- Frontend Mentor - @rashidshamloo
- Portfolio - rashidshamloo.ir
- Twitter - @rashidshamloo