8 ms·
Building dark mode on Stack Overflow
- shakermakr 7y agoWhen you have your OS set to dark mode and a site blinds you with it’s whiteness...you see the total UX fail. UX is about the U. If they’ve specified I want things black on contrast, then support it. Because they expect it. Post shows how feasible it is...and users, the U, will respect you for it and keep coming back. Otherwise your first impression is simply blinding and not in a positive way
- arkitaip 7y agoThis literally happened as I switched from TFA to this HN post...
- ken 7y agoIn a sense, I suppose it is one aspect of accessibility. It's not a "total UX fail", though. You can still read the text and accomplish your task, even if the brightness isn't ideal. Speaking of blinding, it's too bad the other aspects of accessibility aren't as popular. When screen reader support was broken, they didn't write blog posts about fixing it.
- nikivi 7y agoHope GitHub is next to release dark mode
- userbinator 7y agoAs someone who really really hates the "reduce contrast" trend, I personally thought the screenshot labeled "have to do better than this" was the most readable. The one after that just looks faded. Then again, I also find it funny that "dark mode" is heralded as something revolutionary, when long ago people could customise UIs far more. You can still do that with userstyles, another thing that seems to have gotten mostly ignored these days...
- zzo38computer 7y agoI agree, I prefer the high contrast too. I also agree about customization, I would suggest using proper CSS classes and HTML and so on in order to allow better user customization with user styles and stuff like that, rather than relying on the service provider. Web pages without CSS can use the settings (for colours, font sizes, etc) specified by the user, so someone should not complain about the lack of CSS, and more so too you should not use CSS too much on web pages I think. (But if you do, ensure you do not do it wrong; if you set the foreground colour you must also set the background colour and vice versa. But don't specify colours at all unless you need to use multiple colours in your document.)
- endorphone 7y agoI don't think anyone heralded it as revolutionary. It's an affordance to the reality that it's a different experience using devices in darkness than in brightness. Mobile screens make dark situations more prevalent. As to UI customization, often that was an inconvenient cop out not a great enabler. "We don't want to figure this out so just change things yourself, but then you'll switch PCs or reinstall and you'll lose all of those customizations and you'll never do it again and you will forever leave everything vanilla". Is it worth websites making a big deal about? No, not really... At most it should put a little badge when it detects the dark mode CSS allowing unwilling users to disable it, but it doesn't seem like something that gets dragged on as long as it has by a couple of sites.
- blt 7y agoI agree - it has a nice high contrast and I didn't really see any significant flaws.
- deleted 7y ago[deleted]
- thaumasiotes 7y ago> I personally thought the screenshot labeled "have to do better than this" was the most readable. The one after that just looks faded. Hm. I like the "better" one more. However, it's cheating -- the first screenshot displays a lot of white text in the filters and the text of the questions. The text of the questions is most of what I find off-putting about the first screenshot. The second screenshot displays no white text at all. The filters menu isn't visible. The text of the questions isn't visible. Text that's gray in the second screenshot is also gray in the first screenshot. What kind of comparison is this?
- BubRoss 7y agoI'm not sure choosing a color scheme for your CSS is really 'building' anything.
- userbinator 7y agoI remember using a forum software on a site long ago (around the late 90s/early 2000s timeframe) where one of the options in the user preferences page let you adjust the colours of various things --- and not as in "pick from these limited choices", but as in "enter the CSS colour value, either a name or #hex", and I believe it saved them for every user since you'd only see them when logged in. Does anyone else remember what that could be?
- OGWhales 7y agoColor customization was popular, hard to say
- arkitaip 7y agoIt could be a major undertaking for a sufficiently complex site like Stackoverflow, just like the article illustrates, because there just so many UI elements to re-color.
- BubRoss 7y agoThinking that choosing colors is a major undertaking is one of the most preposterous things I've read in here in a long time. Everything in this article should take a morning at most. People need to stop pretending trivial things are difficult just because they want to write a blog post.
- dwaltrip 7y agoDesign is an actual discipline that people work hard at to produce the results that they do. Colors are a core aspect to UI design.
- 7y ago
- ssivark 7y agoI think site/application-specific toggling of dark mode is a fundamentally broken idea, since the default on the web is white background pages. It’s an awful experience to turn up the brightness when viewing dark pages, when most pages you open will be white by default! Ideally, all portals must support theming modes, but I’d like the switching to be seamless, to prevent such nasty surprises. Maybe based on a standard (something like the site delivers both CSS sets, and logic in the browser chooses which ones to display, or suitably “invert” the default)
- saagarjha 7y agoYou're thinking of prefers-color-scheme, which already exists and is adopted by Stack Overflow.
- satvikpendem 7y agoJust use a web extension like Dark Reader, it renders dark mode for all pages.
- beders 7y agoIt is comical we are getting excited about a bunch of CSS files and other assets. As others have pointed out: Desktop apps never had this problem and decent operating systems gave you much more freedom to adjust the color style to your liking. Now we have half-assed solutions running in a hypertext display engine. Amazing! ;)
- noahtallen 7y agoIIRC, Windows and macOS only offered built in dark mode in the system UI components until the last year or two, and definitely don’t offer much color customization freedom... except for the global highlight or accent color
- deleted 7y ago[deleted]
- userbinator 7y agoIt used to be far more customisable for Windows; this is Windows 2.03: https://guidebookgallery.org/pics/gui/settings/appearance/win203-1-1.png https://guidebookgallery.org/pics/gui/settings/appearance/wi... 3.11: https://guidebookgallery.org/pics/gui/settings/appearance/win31-1-2.png https://guidebookgallery.org/pics/gui/settings/appearance/wi... 95: https://guidebookgallery.org/pics/gui/settings/appearance/win95-1-2.png https://guidebookgallery.org/pics/gui/settings/appearance/wi... ...and that dialog remained almost unchanged up until Windows 7: https://www.dedoimedo.com/images/computers_new_2/windows-7-settings-border-color.png https://www.dedoimedo.com/images/computers_new_2/windows-7-s... Unfortunately, after Win7 it was removed, and they basically took away customisation completely in Win10.
- noisem4ker 7y agoWhat's left of customization is the choice of an "accent color", plus light and dark modes.
- jussij 7y ago
- megavolcano 7y agoDark Reader extension does a better job than their design, what a waste of time, effort and cash.
- nhumrich 7y agoDark reader actually has a js library you can add to your site to allow people to essentially toggle it on, wothout having the extension. Dark mose for free, basically.
- musicale 7y agoRearranging the deck chairs won't save stackoverflow.com.
- why-oh-why 7y agoIf you think StackOverflow needs to be “saved” you’re deathly mistaken. Just because some complain about it it doesn’t mean that it’s failing.
- the_jeremy 7y agoIt won't die until something else replaces it. I have ~5k rep there from answering >100 questions. I dislike how they've managed ... most recent interactions, but there's not a site that I could use instead.
- ucarion 7y agoThe article mentions they use Bezier curves over the HSB colorspace. > I used Lyft’s amazing Colorbox to help normalize our colors. Instead of a naive linear scale at 10% increments, I used bezier curves—a vast improvement at the more extreme ends of the scale. Linear HSB is very naive, but HSB is still quite naive. It's just a cylindrical version of a color space optimized for displays, not human perception. I don't understand why they wouldn't instead opt for the CIELAB color space, or its cylindrical equivalent. IBM does this, and it gives them effortless support for dark mode, by just flipping the luminance component of colors: https://www.ibm.com/design/language/color https://www.ibm.com/design/language/color You can visualize the CIELAB behind IBM's color scheme here: https://cielab.io/ https://cielab.io/ (go to "IBM Carbon")
- butz 7y agoGreat, now every visit from private mode shows huge "dark mode" banner. How about just using prefers-color-scheme media query?
- FpUser 7y agoI can not digest dark mode when working with the text. I know it is individual as I saw that many programmers do use it. To each their own I guess.
- dreamcompiler 7y agoThis is a good article. I'll bookmark it and probably refer to it in future. That said, why does everybody care about Dark Mode so much these days? It's an interesting problem; I worked on it 20 years ago and solved it adequately for my own purposes. But it's not a very important problem, especially right now.
- sqs 7y agoDark mode is much more readable for many people. That’s why it matters. In my opinion as a user, it’s as much of an improvement as going from a UI with tiny fonts to one with legible text sizes. And once most sites and apps you use have a dark theme, the ones that don’t become even more jarring and noticeable.
- j88439h84 7y agoI think apple added support so everyone else did too?
- PunksATawnyFill 7y agoHahaha, NO. Apple was the LAST to enable a non-inverse color scheme... so far behind that Windows had abandoned it in the meantime after 30 years!
- userbinator 7y agoThat said, why does everybody care about Dark Mode so much these days? My guess is that people either don't know/can't be bothered to adjust their monitors' brightness and contrast to a comfortable level, so they're left at the default which is usually eye-burningly bright, and they're trying to work around this in software by reducing brightness and contrast. Unfortunately this also means those who do have their monitors adjusted comfortably are subjected to much worse contrast.
- Can_Not 7y agoI have had many devices where "minimum brightness" is brighter than the brightest I would have actually wanted.