5 ms·

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/color.css#L13 https://

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/color.css#L13 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.

sdegutis 7y ago
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.
- saagarjha 7y ago
  If you don't have much styling, then even :root { color-scheme: light dark; } can get you quite far.
ldd 7y ago
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.
eyelidlessness 7y ago
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.
nwienert 7y ago
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.
saagarjha 7y ago
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.)
- memco 7y ago
  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.
  - saagarjha 7y ago
    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 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.

sdegutis 7y ago

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.

saagarjha 7y ago
If you don't have much styling, then even :root { color-scheme: light dark; } can get you quite far.

ldd 7y ago

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.

eyelidlessness 7y ago

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.

nwienert 7y ago

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.

saagarjha 7y ago

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.)

memco 7y ago
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.
- saagarjha 7y ago
  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 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.