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
- Solution URL: [https://www.frontendmentor.io/solutions/theme-switch-with-javascript-j4yWa6LgZ]
- Live Site URL: [https://nostalgic-visvesvaraya-88b108.netlify.app/]
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Javascript for the theme switch
- This project expands my knowlegde of CSS Flexbox and grid
- I also learnt how to switch theme with Javascript using the Local storage
- The theme switch forced me to learn how to use CSS variables because it provides a straightforward means for the switching.
/* Using css variables */
.theme-light {
--heading: hsl(230, 17%, 14%);
--bg-top: hsl(225, 100%, 98%);
--bg-down:hsl(0, 0%, 100%);
--card-bg: hsl(227, 47%, 96%);
--card-hover: hsl(228deg, 12% , 80%);
--card-text: hsl(228, 12%, 44%);
--overview: hsl(228, 12%, 44%);
}
.theme-dark {
--heading: hsl(0, 0%, 100%);
--bg-top: hsl(232, 19%, 15%);
--bg-down: hsl(230, 17%, 14%);
--card-bg: hsl(228, 28%, 20%);
--card-hover: hsl(228, 12%, 44%);
--card-text: hsl(228, 34%, 66%);
--overview: hsl(0, 0%, 100%);
--toggle: linear-gradient(45deg, hsl(210, 78%, 56%), hsl(146, 68%, 55%));
}
// function to toggle between light and dark theme
function toggleTheme() {
if (localStorage.getItem('theme') === 'theme-dark') {
setTheme('theme-light');
} else {
setTheme('theme-dark');
}
}
-
settle the nuisance of the theme switch button (done 05/05/2021)
-
Practice more with CSS GRid and Flexbox
- Gradient border - This helped me to add a gradient border to the instagram card. CSS Tricks is pretty good for anyone trying to work around CSS.
- Theme Switch - This is an amazing article which helped me finally understand how to switch theme with JS. I'd recommend it to anyone still learning this concept.
- Website - Oluwakemi Omoyeni
- Frontend Mentor - @Captressketh001
- Twitter - @capketh
- I will like to acknowledge the input of Praise Adeleke, a colleague and a friend.