Frontend Mentor | Social Media Dashboard with prefers-color-scheme and JS toggle coding challenge solution

Solution retrospective

Hello everyone,

In this project for the initial load, I've used prefers-color-sheme that would trigger and respond to the theme of your computer. Every time when you change the theme on the computer website should also change color.

The approach above does not work as soon as the toggle was pressed at least once, because the toggle loads new CSS version of the light or a dark theme respectively. The issue that I've come across with this approach is that the link tag will be loaded every time, I was not sure how to fix that so if you have any suggestion just let me know :)

Community feedback

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted about 3 years ago

Hey, Dušan! 👋

Always nice to see you complete another challenge! 😀 Just wanted to drop in to say good job on this one! 👏

Everything looks great and responds well and using prefers-color-scheme to change the theme of the site to suit user's preferences is a cool idea! 👍

As for your question, maybe you could try defining the colors of the site as CSS variables and using classes to overwrite those variables depending on what theme you want the site to be. Simply append the proper class to the body of the page or something and use JS to change the theme of the page when either the toggle-switch is clicked or the user changes their preferences or something. Just a thought! 😉

Of course, keep coding (and happy coding, too)! 😁

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted about 3 years ago

@ApplePieGiraffe

And BTW, I think it would be a good idea to make the toggle-switch tabbable so that keyboard users can access and use that toggle. ;)

Dusan• 700

@DEmanderbag

Posted about 3 years ago

Hey, @ApplePieGiraffe

I was thinking of an approach to move everything into one CSS and change it with CSS classes,

I will take a look for a toggle-switch in other to make it tabbable, thanks

Social Media Dashboard with prefers-color-scheme and JS toggle

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community