Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted almost 2 years ago

Social Media Dashboard with dark/light theme

Alexandar Živkovič•70
@stashix
A solution to the Social media dashboard with theme switcher challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


I have a couple questions, things I wasn't sure about.

  1. I've decided to present the icons as background image masks on elements, but that required me to set width/height on the elements themselves. My thought process was to reduce the amount of img tags generated and make style switching based on a data attribute, but I'm wondering if it's not a bad idea for accessibility.
  2. Since the top cards can have a top border with a gradient I went with an absolutely positioned pseudo-element, is there a different or better solution?
  3. Something similar for the top background accent - since it overhangs between the two sections I went with an extra absolutely positioned div with a set height and the accent color as a background, but that seems a bit rough.
Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Alexandar Živkovič's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License