Skip to content
Submitted over 2 years ago

Social Media Dashboard with theme switcher

Djordje Rajc•260
@Blurryface1998
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

I used ClassList.add() for switching Dark Theme on and off. Is there a more elegant solution for doing this that I can be doing?

Community feedback

  • John Mirage•1,590
    @john-miragePosted over 2 years ago

    Hello,

    For the dark mode feature, you only have to toggle one class.

    1. Use javascript to handle the toggle of the class "dark" at the top of the tree like <html> or <body> element (dont forget to handle keyboard to activate the dark mode).
    2. Set the dark style when the "dark" class is present.

    CSS

    .header {
  background-color: light;
}

.dark .header {
  background-color: dark;
}

    As a bonus challenge you can also do the project with only CSS (accessibility may be not perfect).

    Marked as helpful
    1
    Djordje Rajc•260
    @Blurryface1998Posted over 2 years ago

    @ChaosDynamix Thank you for the response, I'll try this approach!

    0
    John Mirage•1,590
    @john-miragePosted over 2 years ago

    @Blurryface1998 You can check my solution if you want a concrete example. My solution also take care of the localstorage and prefers-color-scheme so that theme is saved even if you leave the site.

    Note: for this project, the theme is actually inverted, the best way is to set dark theme as default and toggle light theme.

    Marked as helpful
    0
    Djordje Rajc•260
    @Blurryface1998Posted over 2 years ago

    @ChaosDynamix Thank you for allowing me to check your work, it will help me a lot, especially with a preferred color scheme.

    0
  • Karol Binkowski•1,640
    @GrzywNPosted over 2 years ago

    You can do that by using ClassList.toggle() Have a nice day!

    1
    Djordje Rajc•260
    @Blurryface1998Posted over 2 years ago

    @GrzywN Thanks for your input, I'll try that next time! :D

    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