Hacker News Reader

Comment by edhelas | Hacker News Reader

Damn React is complicated. I added Dark mode in my app in a few lines of CSS (https://github.com/movim/movim/blob/master/public/theme/css/...) and used the variables across the whole code. I just have to toggle a class on the body and boom, it works.

Guys, you don't need all that JS, seriously. It's slow, it's useless most of the time. And in the end you have to spend hours for something so simple.

Theming the colors of your website is the role of one tech: CSS. That's it, you don't needs layers and layers of Javascript to change that.

Let's go back to server side rendering, a bit of HTML + CSS and JS and we're done.

View on HN

If you read the article, the complexity did not come from React, it came from meeting the author's specific requirements, which are not achievable with CSS alone.

The author had a specific desire for a toggle on a static site, which requires a bit of persistent state that CSS can't really capture. (FWIW, I don't care for a toggle and match the system theme on my website as well. But dismissing the author's work with your "few lines of CSS" fails to account for the fact that this dark mode does something different than yours.)

This doesn't capture all the state correctly even. When you first load the page, if it is dark mode the XKCD loads a black on white (aka light) image. If you toggle to light mode and back to dark the XKCD comic becomes a black on white image. The state of image filters isn't consistent in the current implementation.

Oh, I'm not claiming it does it correctly. (In fact, I have another comment that points out another issue: https://news.ycombinator.com/item?id=22924571). But the claim that I was responding to made incorrect assumptions, and the bugs in the implementation don't change that.

I agree with you partially.

Dark Mode is pretty easy to do in CSS. I purposely picked jekyll with no javascript for my static site, and despite contributing a plugin for Gatsby, I do not use it these days.

Yet, there is at least some modern applications that can be made thanks to javascript, and React. We do not need to go back, but it is perfectly acceptable to say that not everything is a nail and you do not need a hammer for every single task.

CSS variables are the best way to do dark mode, just use the variable everywhere, set it on html or :root, and change it either in .darkmode or a @media for dark mode. They're pretty much supported everywhere dark mode is. Surprisingly simple dark mode support for greenfield sites.

If you don't have much styling, then even

  :root {
      color-scheme: light dark;
  }

can get you quite far.

You can totally use CSS variables in React and there’s no difference from native, but you can also add more superpowers by having small areas use the color palette dynamically.

Reply on news.ycombinator.com