Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Social Media Dashboard with Theme Switcher

Graham 930

@GrahamTheobald

Desktop design screenshot for the Social media dashboard with theme switcher coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I implemented the dark mode through storing the CSS colour values as strings within my javascript file.

Is there a better practise?

Community feedback

Yemisrach 1,430

@Yemisrach15

Posted

Hi Graham, good job but this needs a bit of work on responsiveness for tablet sized viewport. A few suggestions,

  • section element needs a heading.
  • The cards inside section imo should be article for better semantics. articles are used for self-contained information and it is appropriate to use them in this case.
  • input needs label for accessibility purpose as your report says.

For your question, I prefer using dataset attributes on a container (eg. body). Inside the javascript code, I change this dataset's value based on user's preference and inside the CSS I do something like

:root {
    <your css color variables for light mode>
}
[data-theme="dark"] {
    <your css color variables for dark mode>
}

This is assuming a container such as body has a data-theme attribute. It's only my preference since it needs less js code :)

Marked as helpful

1

Graham 930

@GrahamTheobald

Posted

@Yemisrach15 Thank you very much for your feedback, it is noted and appreciated (:

0

Please log in to post a comment

Log in with GitHub
Discord logo

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