7 ms·
Show HN: Darken – Darkmode Made Easy
- rileytg 7y agowhat’s the intended use case?
- guessmyname 7y agoIt turns light colored websites into dark websites [1][2][3]. Here is an example: https://colinespinas.github.io/darken/ https://colinespinas.github.io/darken/ [1] https://support.apple.com/en-ca/HT208976 https://support.apple.com/en-ca/HT208976 [2] https://css-tricks.com/dark-modes-with-css/ https://css-tricks.com/dark-modes-with-css/ [3] https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
- Call_in 7y agoIt makes the creation and management of dark modes simpler, by giving you a simple API to work with. It does not use `prefer-color-scheme` for now but I'm planning to add the option later.
- doomrobo 7y agoWhy would you prefer this over, as another commenter already pointed out, a web standard like the CSS `prefers-color-scheme` media feature? A web feature like that works across websites, is better equipped to deal with user accessibility issues, and doesn't require Javascript.
- Call_in 7y agoThe use case is different, the standard CSS `prefers-color-scheme` media feature changes the styles according to your system preferences. Here, the goal is to offer to the developer a simple API to create a customizable darkmode feature. I've just started writing this API but I intend to make it more customizable by including `prefers-color-scheme` option and timestamps based darkmode. I hope it make the thing more clear.
- yoz-y 7y agoSometimes sites using the dark mode preference are annoying. Usually they just slap white text on dark background which is utterly unreadable for me for blocks of text. I like to use dark schemes for coding because I get access to more colors and the lines are short and spaced. But for reading a paragraph more than just changing the text color is needed, and none of the sites does that. So the sites having it toggleable would actually be quite cool. I hope browsers will get a possibility to check/uncheck this per-site.
- ZeroCool2u 7y agoThis is awesome. Always wanted something like this, but never got around to being comfortable enough with CSS to try. Def will try it out on the next front end I throw together!
- Call_in 7y agoThanks, feel free to give feedback, submit issues and contribute if you want!
- beanpup_py 7y agoDo you do anything different to other libraries like dark mode.js? https://github.com/sandoche/Darkmode.js https://github.com/sandoche/Darkmode.js
- Call_in 7y agoDarkmode.js uses `mix-blend-mode` to invert the colors on the pages and offer a class based custom style system. Here you also have the class based custom styles but also have a CSS variables based styling system. You can chose what value will take a variable depending on the current state of the darkmode. See the readme of the github page for more informations, ask again if you need additional informations.
- tyscorp 7y agoIf you need an extremely quick way to implement dark mode, you can use the darkreader[0] npm package. I set it up for our app in ~30 mins. The only big downside I've seen so far is performance, but I haven't quantified it yet. [0] https://github.com/darkreader/darkreader#using-for-a-website https://github.com/darkreader/darkreader#using-for-a-website
- williamstein 7y agoI just tested this out on a complicated site and it is amazing! Thanks.
- htfu 7y agoSpeaking of dark mode. How bizarre is it that after all this time Apple finally puts something in iOS, and IT JUST MADE THINGS WORSE. In the beginning there was invert colors. Then came smart invert - it worked with some things, failed with others, but was generally pretty good. Dark mode (by way of prefers-color-scheme etc) should make things awesome in the long run, but at least for now all that's happened is to keep things dark I have to juggle fucking THREE different switches - and end up having to fall back to classic invert most of the time. Smart invert basically stopped functioning with iOS 13. Properly implemented they could've had a fallback css override a la DarkReader and just put an extra switch per-website, crowdsourcing the results, as well as keep their own database/system override for lazy developers with already-dark apps who refuse to respect wishes (nudge nudge, Spotify...). Ok, this is ranty, but this is such a weird regression touted as a "feature". Poor form.
- vinceguidry 7y agoThe only way dark mode can ever be done properly is if every single website and app developer implements it themselves. Every other way of doing it is a hack. Apple did what they could. At least this project makes it somewhat easier for websites to implement. For my purposes, all I need at this point is Quora. Goddamn it Quora, why can’t you see the light?
- aabhay 7y ago> Goddamn it Quora, why can’t you see the dark? FTFY
- zzo38computer 7y agoI think if a website designer does not use CSS then they should not need to implement dark mode either, because if no CSS is specified then the user's settings should be used, so they can have dark if they want it to be. (If a web page has no CSS, then I don't need to put in my own; just since they put in their own CSS rather than using my settings, I have to override them then my own.)
- woutr_be 7y agoWhile I agree with you that it's super annoying to be browsing in dark mode, just to open an app or website that hasn't implemented this. But I disagree that Apple should be doing all the work, I really don't want them pushing their design opinions even further upon us (no matter how great they might be) Not sure if this exists yet (although I think I've seen it before); a CSS parser that will automatically generate all the correct media queries to have a dark mode. Done by smartly inverting colours, possibly giving the chance to quickly override them yourself.
- NilsIRL 7y agoI think a before and after screenshot, with minimal configuration, would help to understand what it does, and see the "quality" of the results.
- Call_in 7y agoI'll do that for the next version, it is already planned, thanks for the feedback!
- iCarrot 7y agoIt has a demo page, "hidden" in the repo's description but not in README.md: https://colinespinas.github.io/darken/ https://colinespinas.github.io/darken/
- Call_in 7y agoYou have a badge "Demo Available" too, I'll maybe do a more clear link.
- kerng 7y agoJust a random note, I recently switched VSCode to a white background and loving it! I guess, I'm over dark mode everything. For me it seems to help focus better to code on white background.
- brandonmenc 7y agoAgree. It's hard to explain, but the white background feels like, psychologically "freeing" - if that makes any sense. It feels like everything is "open" and "fresh". Dark mode feels like being in a cave.
- ultrarunner 7y agoTotally opposite, which is why I love that it’s a choice now!
- month13 7y agoAs more apps have adopted MacOS' dark mode, I've been having a nice experience letting it change throughout the day.
- t0astbread 7y agoI sometimes switch to light mode when working in bright sunlight. Otherwise (especially at night) I prefer dark (pitch black with high contrast!) mode.
- julienreszka 7y agoWe evolved to detect predators in greenery. I use a light green theme. in Visual Studio Code settings.json edit those line : "workbench.colorTheme": "Default Light+","workbench.colorCustomizations": { "editor.background": "#e0ffec", },
- 0-_-0 7y ago> We evolved to detect predators in greenery. I use a light green theme. Do you spot bugs more easily in the greenery?
- 7y ago
- keyle 7y agoOK, but from a designer's perspective, you want to be careful with just inverting colours. The contrast is way too strong here from the demo you offered and the visited link 'purple' is already bleeding on black. Have a read of an article such as this one, and be smart about colour translation. You might need to calculate contrast or offer a contrast setting as a minimum, and watch for shadows. https://uxdesign.cc/turn-the-lights-off-designing-the-dark-mode-of-wego-ios-app-6c4967e59dd6 https://uxdesign.cc/turn-the-lights-off-designing-the-dark-m... Side note: I've been really happy with the "Dark Reader" plugin on various browsers. Have a look at it and see how it handles brightness (+/-) and contrast (+/-).
- Call_in 7y agoThis API do not invert colors, it uses CSS variables and classes for more customization. No mix-blend-mode or anything. The demo has been done quickly this afternoon, I'll probably change it for the next version.
- Tepix 7y ago> but from a designer's perspective, you want to be careful with just inverting colours he doesn't invert colours.
- chrismorgan 7y agoThe actual code behind this is short and straightforward: https://github.com/ColinEspinas/darken/blob/master/src/index.js https://github.com/ColinEspinas/darken/blob/master/src/index.... For myself, I think it gets the balance of complexity wrong: it focuses on shifting various things into JavaScript, rather than doing it all in CSS using the (prefers-color-scheme) media query, and rewriting media queries to achieve manual switching. As a demonstration of the alternative approach I advocate, see what I came up with for my own website: https://chrismorgan.info/blog/dark-theme-implementation/ https://chrismorgan.info/blog/dark-theme-implementation/. This uses native CSS techniques, working completely without JavaScript, merely using JavaScript to allow the user to manually switch, retaining that preference for future page loads and optimising page loading just about as far as is possible when doing it client-side to minimise the probability of a flash of inverted content if you manually switched to the opposite of what (prefers-color-scheme) would have chosen. The main thing that my approach doesn’t do that this thing does is dispatching an event, so that other JavaScript could conveniently be notified of a theme change. This is fairly deliberate on my part (I deliberately do all theme switching with CSS, and have no JavaScript that needs to change anything for dark mode), but could readily be added to what I wrote if desired. With my approach (for which I will also clarify that the JavaScript is deliberately written for compactness, not some theoretical notion of maintainability or extensibility), the example: <button id="dm-toggle">Toggle darkmode</button> <script> const darkmode = new darken({ toggle: "#dm-toggle", variables: { "--primary-color": ["#ffffff", "#000000"], "--secondary-color": ["#000000", "#ffffff"], } }); </script> … would be written more like this: <script> // (Add the button to the document in JS, // since it’ll only work if this JS runs anyway.) </script> <style> body { --primary-color: #ffffff; --secondary-color: #000000; } </style> <style media="screen and (prefers-color-scheme: dark)"> body { --primary-color: #000000; --secondary-color: #ffffff; } </style> (Two style blocks because my thing doesn’t deal with `@media … { … }` inline in CSS, because I don’t need it. You could make it do it if you really wanted to.) I find this approach much more manageable, and it allows adding custom CSS rules for dark mode (which I definitely use), rather than just setting CSS custom properties.
- brachi 7y agoVery interesting thanks. I'm looking for a balance in great UX and features with a minimalist approach to the code needed in the client. Trying to stay with vanilla javascript with little dependencies might be hard thougg. So many frameworks and old habits. Maybe wasm will change that.
- brachi 7y agoNeat! Using a browser add-on and brightness control of my displays improved my sleep. A simple github page showing a demo with the code next to it might be cool, and the README size can be cut in half.
- Call_in 7y agoThere already is a github page demo, look at the description of the github project or at the "Demo available" badge. I'll probably change the demo in the next update, it is too simple and ugly. Thanks for the feedback.
- mochialex 7y agowhy are people so obsessed with dark mode?
- julienreszka 7y agoDark mode is meant to be used in low light environment. It's a way to keep people up at night to show them more ads more frequently. People who aren't insane and who sleep at night have a good lighting in their environment and a light theme.
- 0-_-0 7y agoSundown here is 16:30. Do you think I can tell my employer that I need to go to sleep after?
- julienreszka 7y agoEver heard of artificial light?
- Tepix 7y agoThey don't like to be blinded by their white-background screens while using them in the dark.
- invalidusernam3 7y agoI think OP was referring to the sudden obsession with dark mode (in the past year or so). It's not like screens and night time are new things, so what changed in the past while to induce this dark mode craze?
- mochialex 7y agoExactly. Seems all of a sudden every app is releasing their dark mode that they claim “everyone has been long waiting for”.
- 7y ago
- kevsim 7y agoHaving recently worked on adding dark mode to our service [0], we found that the technical implementation was pretty easy (generous use of CSS custom properties and prefers-color-scheme). The design work to make it look good, have proper contrast, etc. is much harder. The article the people at Superhuman wrote [1] is a really good resource for this. [0] https://kitemaker.co https://kitemaker.co [1] https://blog.superhuman.com/how-to-design-delightful-dark-themes-7b3da644ff1f https://blog.superhuman.com/how-to-design-delightful-dark-th...
- paulodeon 7y agoWe recently launched dark mode for our email building app Milliner https://www.milliner.app/ https://www.milliner.app/. It allows you to build dark mode optimized email, and when you preview the email in dark mode, the whole app changes to dark mode. Because of this we use a manual toggle instead of prefers-color-scheme. We picked the colors carefully and changed things like shadows borders etc to make the interface look great in dark mode. Although a solution like OPs could be a quick and dirty way to get a basic dark mode implemented, you'll never get your site or app looking quite as good as getting a designer to look at it.
- meerita 7y agoI never change the mode of a website. I have rarely done so and it seems to me an absurd cost for nothing. If the site is well designed in light colors it shouldn't be a problem. If the site is badly designed then it would be normal to offer such a possibility. An operating system is different: you are 24 hours looking at it, it is normal to have display preferences but a website? The average number of visits to sites I have worked on has never exceeded 3 minutes.
- danielbln 7y agoFrankly, most of what I see of my OS these days is the status bar and the window decoration, a terminal window and maybe a file manager. Websites is what I stare at most of my day, and most of those are the same websites.
- colonwqbang 7y agoI feel you should be aware that "web developer" is misspelled on your website.
- Call_in 7y agoOh! Thanks for that, I'll fix the typo when I've got time
- teekert 7y agoSo, what's the easiest way for me to make HN dark? I have enough karma to change the color of the bar btw, I set it to C0C0C0 to make it stick out less.