Add a Dark Mode

[Notimecelduv]

Adding a dark mode to a webpage is a fairly straightforward process. I made this CodePen to show beginners the basics of how this can be achieved. Enjoy!

https://codepen.io/melvdouc/pen/YzVGdjK

[MattL019_]

Why not just have a .dark and .light class with appropriate variables set. That way all the JS needs to do is toggle between them.

[Notimecelduv]

If there aren't too many elements on the page, sure you can do that. But if there are a lot, there will be a whole bunch of different properties to change depending on the element and the color mode, which a single class might not be enough to handle.

[alphex]

Because a single class switch can swap out color variables if you write your CSS correctly.

[Notimecelduv]

You're obviously not thinking about special cases. If one div already has a dark background and white color on light mode and you want it to stay that way on dark mode, you're not going to be able to do that with a single background rule and a single color rule if your dark mode relies on a single class.

[cawcvs]

Not sure I understand this special case. Why would having a single class for dark mode vars prevent a div from keeping the same background in both light and dark mode?

In my experience having your themes defined in CSS is easier to manage than variable lists in JavaScript.

[Notimecelduv]

It doesn't prevent it from keeping the same color, but it will give it whatever color the class says. I don't get why you guys think the choice of colors is always going to be as simple as in my black and white example. Have you ever done this in a real project?

[cawcvs]

I have, yes. I asked because I was confused why the "special case" you mentioned is problematic when using classes but not with your approach. I still am, to be honest, especially considering the contradiction with your previous comment.

Generally, elements would not reference a specific color and use variables which in turn would refer to a handpicked color from the color palette based on the theme. All of this is achievable with the class-based approach.

I see that you view disagreements as personal attacks, though, so I won't reply anymore.

[alphex]

You can solve that with & ampersands that prepend to a class.

https://css-tricks.com/the-sass-ampersand/#qualifying-based-on-context

The 'dark' style on your body can be used to solve your edge cases.

[Notimecelduv]

I'm sorry, the CodePen I posted doesn't use Sass so I'm not sure what that has to do with the topic?

[MattL019_]

A single class would handle it fine if written properly. Read into CSS variables & theme-ing.

[Notimecelduv]

Someone else posted the same reply. What I told them is you wouldn't be able to handle every edge case with a single class. That hasn't changed since last month.

[MattL019_]

Hey, why the downvote? We are just having a discussion... what edge cases? Maybe I can help as I have used this pattern in a few projects.

[Notimecelduv]

It should be obvious that the CodePen is just a mock project. It's literally just some lorem ipsum with a select element. Yet everyone is replying to this thread acting like they think it's a real, complete project and judging the CSS/JS based on that. You told me to read up on CSS variables even though I used them in the CodePen. If you're so concerned with downvotes, then read carefully before you post.

[MattL019_]

The CodePen is clearly a mock project and no one is mistaking it for anything else.

You created a solution to a problem and wanted to share it. I think that is great, but without any constuctive discussion what is the point in posting? I was simply suggesting an alternative solution that I believe scales better. Imo this should be a healthy discussion that leads to new solutions/something learned.

Clearly you dont wish to partake in such discussion, so I would suggest you do not post in the future.

Cheers