Skip to content
Submitted almost 4 years ago

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

Dusanβ€’700
@DEmanderbag
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social media dashboard with theme switcher
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

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
    @ApplePieGiraffePosted almost 4 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)! 😁

    1
    ApplePieGiraffeβ€’30,545
    @ApplePieGiraffePosted almost 4 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. ;)

    1
    Dusanβ€’700
    @DEmanderbagPosted almost 4 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

    1

Please log in to post a comment

Log in with GitHub

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