Hi folks,
Lobsters now respects your UI’s dark mode setting. Typically your browser chooses based on your OS/GUI layer (Gnome, MacOS, Android, IOS, Windows), but maybe your browser overrides it (Firefox, apparently not Chrome?).
This PR was substantial work by @kevinc. They did some great research on colorschemes and contrast guidelines. (They also caught dead code and small improvements along the way!) Thanks for all your help, Kevin.
I figured it was worth an announce post because everybody loves bikeshedding UI changes, as demonstrated on a previous attempt. If you have an opinion about tweaking the dark mode, please post a comment in this thread rather than on one of the PRs or issues. It keeps the discussion visible, where otherwise I’m probably the only person who’d see every note deep on a particular line of a closed PR.
Best wishes and easy reading,
- Peter
I’m not a big fan of pure black backgrounds, it feels a bit too « high contrast mode » instead of « dark mode ». I think a very dark gray would feel better to the eye. n=1 though, that’s just a personal feeling.
Thanks for the theme, it’s still great!
Agreed,
background-color: #222is better than #000.I’ll just put my +1 here. The pure black background with white text isn’t much better than the opposite to me (bright room, regular old monitor). I’ve been using a userstyle called “Neo Dark Lobsters” that overall ain’t perfect, but is
background: #222, and I’ll probably continue to use it.On my OLED phone, pure black probably looks great, but that’s the last place I’d use lobste.rs, personally.
Well, while we’re bikeshedding: I do like true black (especially because I have machines with OLED displays, but it’s also a nice non-decision, the best kind of design decision), but the white foreground here is a bit too intense for my taste. I’m no designer, but I think it’s pretty standard to use significantly lower contrast foregrounds for light on dark to reduce the intensity. It’s a bit too eye-burney otherwise.
You have put your finger on something I’ve seen a few times in this thread: The contrast between the black background and the lightest body text is too high. Some users’ wishes to lighten the background are about that, and others’ are about making the site look like other dark mode windows which do not use pure black, and therefore look at home on the same screen at the same time. (Both are valid.)
For me pure white and pure black is accessibility nightmare: that high contrast triggers my dyslexia and text starts to jump around, which starts inducing migraine.
As I default to dark themes systemwide and I couldn’t find way to override detected theme, this site is basically unusable for me right now. Usually in these cases I just close the tab and never come back, for this site I decided type this comment before doing that. Maybe some style change happens, manual override is implemented or maybe I care enough to setup user stylesheet.. but otherwise my visits will stop
No need to be so radical, you still have several options. Not sure what browser you’re using, but Stylus is available for Chrome/FF:
https://addons.mozilla.org/en-US/firefox/addon/styl-us/
It allows to override the stylesheet for any website with just a few clicks (and few CSS declarations ;))
I don’t mind the comment. There’s a difference between being radical because of a preference and having an earnest need. Access shouldn’t require certain people to go out of their way on a per-website basis.
It’s not radical, it’s an accessibility problem.
That’s great, thank you.
I wonder if I am an outlier in using the site on my phone at night frequently. Alternatively, maybe we could keep the black background only for the mobile style, where it’s more common to have an OLED screen and no other light sources in your environment.
I don’t use my phone much, especially not for reading long-form content, so I wouldn’t be surprised if I was the outlier. That sounds like a reasonable solution, but it’s not going to affect me (since I can keep using a userstyle), so I won’t push either way. I will +1 the lower-contrast comments that others have posted, if it remains #000 though - the blue links are intense.
The blue link color brightness is a point that not many have made. I think the reason I didn’t expect it is that I usually use Night Shift on my devices, which makes blue light less harsh at night. Do you think we should aim to solve this problem regardless of whether users apply nighttime color adjustment? Another way to ask this question: What do you think about dark mode blue links in the daytime?
Sorry if I’m misunderstanding, but to clarify, my above comment is in a bright room; I try to avoid looking at screens in dim light/darkness. The blue links just look kind of dark, and intensely blue. Just a wee reduction in saturation or something makes it easier to read.
Thanks for your work on this btw. I looked into contributing something a while back, but was put off after it looked like the previous attempt stalled out from disagreement. I’d take this over the bright white any day (and it turns out this really is nice on my phone, dark blue links withstanding). The css variables also make it relatively easy for anyone here to make their own tweaks with a userstyle.
I feel like I’ve taken up enough space complaining here, so I’ll leave a couple nitpicks then take my leave: the author name colour is a little dark (similar to links, it’s dark blue on black), and the byline could do with a brightness bump to make it more readable, especially when next to bright white comment text.
I appreciate the clarification and other details :)
+1 to separate mobile style.
My laptop is OLED and I’d still appreciate
#000thereI strongly agree.
I can’t put my finger on why, but I find very dark gray easier.
#222 is way better! thank you
I strongly disagree, and this black background looks and feels great to me! No one can ever seem to agree on the exact shade or hue of grey in their dark themes, so if you have the general UI setting enabled, you end up with a mishmash of neutral, cooler, hotter, and brighter greys that don’t look cohesive at all. But black is always black!
For lower contrast, I have my text color set to #ccc in the themes I have written.
Another user pointed out that pure black is pretty rare in practice, which makes this site stand out in an environment with other dark mode apps:
Does that affect your opinion like it did mine? I do see value in pure black, but suppose we treated the too-high-contrast complaint as a separate issue: Darkening the text could make the browser window seem too dim among the other apps.
I prefer the black even in that scenario. The contrast makes it easier to read imo.
Not all. If it gets swapped out for grey I will simply go back to my custom css, which I have used to black out most of the sites I visit, so no hard feelings.
Feedback is most welcome! Would you please include the type of screen you’re using (OLED phone, TFT laptop…) and the lighting environment you’re in (dark room, daytime indoors with a window, etc.)? And do you feel differently in different contexts?
I’ve got some comments about how I selected the colors in the PR, if that helps anyone think through what they would prefer.
Sure! I’m on my iPhone 12 so OLED phone. I tried in with dimmed lights and in the dark, but in both cases I think I’d prefer a lighter background color.
I disagree. Black is black. These off-gray variants just looks dirty and wrong to me.
I love this theme.
Lobste.rs group hug
In addition to style feedback, thanks to everyone who’s confirmed whether it functions properly on their platform + browser. I did my testing on macOS Safari 15, macOS Firefox, and iOS Safari 15.
Update
Besides feature requests, early feedback has identified a few topics that I want to recognize:
I have thoughts about actions to take, but I’ll wait and let more feedback come in during this day/night cycle.
Another update: I’ve prepared a revision PR, attempting to address the points above. Thanks to everyone for your feedback.
Thanks for doing this, it’s a great start!
For another data point, dark mode YouTube: https://imgur.com/a/UIZNDfY
Strap in!
Seriously though, datapoint from someone who uses light mode during day / dark mode during night: this looks great. I took my iPhone into a dark room & enabled dark mode and the contract was perfect, even with my godawful eyesight. Really impressive work all!
Is it possible to force the previous theme in the profile? On my desktop I have no problems, because I use my own Stylus override anyway, but on mobile my eyes hurt from this black/white contrast. I actually prefer to have a dark theme set up globally, but dark does’t mean it’s pitch black ;)
A manual setting was out of scope this time, but it could happen next if there is demand and a volunteer.
I can present to you how I solved it in my own project (similar in scope to lobste.rs) at https://littr.me. To see it in action, you click the “Invert colours” link in the site’s footer.
@danielrheath volunteered and this is live now: https://lobste.rs/s/3ebwng/i_really_don_t_like_lobste_rs_dark_theme
Cool. How can I turn it off? I use Firefox’s Dark Reader extension to theme all pages the same colour. I would appreciate a toggle for the lobste.rs dark mode please.
Instantly better with my setup, greatly appreciated! Thanks @kevinc and everyone else who worked on the PR.
Maybe I’m pretty much alone with this opinion, but I prefer my window theme/chrome dark but still read stuff in “light mode”, aka dark on light.
This was related to something I (erroneously?) brought up in the channel last night:
But it seems I’m simply using a wm/de (xfce) which doesn’t do this, so I guess it won’t magically switch when this goes live.
No real point to pro or con for this feature, but I found it surprisingly hard to just search for info if I could switch it off in the browser(s) I use. So much outdated info and “there should be a toggle in the settings” but it wasn’t. I guess that’s what you get for not caring about dark mode until now and just clicking that toggle manually on a few pages and apps.
You’re not. I’m the same. And I absolutely hate it when websites force a dark theme on me without giving me an option to change it.
I also use this pattern. I set mobile Firefox into dark mode to get the Firefox chrome to be dark, but often want websites to be light mode themed. I would very much like for the dark mode to be toggleable on the site (unless there’s a way to make Firefox still style its own chrome with a dark theme but send the prefers-light-mode header to websites?)
Please let us turn it off! I mean, for a default, or for not being logged in, fine, whatever, but it’s way too overcontrasted.
Looks lovely! My only suggestion would be to somehow add a toggle using some browser-local storage for folks (like me) who don’t have OS-level dark mode toggles.
A manual user theme setting was deemed out of scope for this change, but that doesn’t mean it can’t be added next. This is a great time to see if there is demand and maybe inspire someone to do it.
Makes sense, I imagine the user setting is just an additive setting on top of this change.
It’s pitch black. You are likely to be eaten by a grue.
I just deployed @kevinc’s fixes + tweaks based on this discussion.
Thanks! I hate it, can I disable it?
If it’s on for you, it’s because your browser reports that you prefer a dark color scheme via the prefers-color-scheme media query. The site will still be in light mode when your browser’s environment doesn’t ask for dark mode. That probably means your global OS setting is the switch you’re looking for.
This first effort didn’t build in a manual override, but that there is demand for it is not a surprise. It feels more and more likely that that will be added later.
However, if you do prefer dark color schemes but you hate this one, some more details could help us revise it.
Yeah, I use dark mode on the cellphone but don’t care for it much on websites. I upvote a manual switch for forcing it one way or another, but to be fair, I’m probably not gonna care that much one way or the other.
Yeah, I was also looking for an option to turn it off. I like that the OS theme is dark, but I prefer webpages to be in light mode. 🤷
Awesome! Thanks so much!
I just opened it in a very dark room, prepared to be blinded by white. But such a nice surprise! ❤️
Works fine on Firefox Android. Thanks!
Bikeshedding about colors aside, I really like the look of the tags in dark mode. Nice job.
Love it, thanks! I browse lobsters exclusively on my OLED phone, so I totally dig the black background. Wouldn’t mind less bright text, but I can live with this, too.
Thanks for this, looks great on mobile!
A bit of a tangential question: when not using any particular desktop environment in Linux, is there a way to make Firefox ask for dark or light mode. I love it that the phones switch automatically depending on time of day and would love this for the desktop but I wasn’t able to find any pointers on how to do that.
If you set
ui.systemUsesDarkThemeto1inabout:config, that should do it. Not sure about automating it though.Thanks! I’ll leave the automation for a rainy day but this is already great, thanks a lot.
I’m pretty sure changing the Firefox theme to a dark one changes the color preference too.
The style change appears to have broken visited links. Now there is no visual distinction between an unvisited link vs. a visited link, and I find it rather distracting.
Thank you! That’s a bug. I’ve filed it here.
I enjoy dark mode when it comes to UI chrome, but I find it hard to read in many cases.
How do I switch it back without changing my OS setting?
Please keep the black background, personally I like using dark mode in a dark room. It’s looking good to me right now :)
“Great research on colorschemes and contrast guidelines”, you say? #000 background and blue links?
Above all, do no harm ;)
The bg should be lighter, between #111 and #222 or something. And I would have chosen a warmer link color, orange or yellow - green even for that old terminal feeling. If they absolutely have to use blue, at least make it lighter.
The research kevinc did included resources like the WCAG contrast guidelines. Do you have some you could point to on how these changes would improve readability?
The WCAG 2.1 contrast guidelines is about minimum contrast. A bg color of #000 and a fg color of #FFF would get full score in that respect. My point is that the contrast is too much and that dark mode is about making it easy on the eyes.
I understand that I’m being a bit picky here and I do see that you have put a lot of work into this, but compared to popular dark mode color themes or applications defaulting to dark mode, they usually have contrast ratio at 10-12, not 16.
And using very saturated colors for text against a dark background will make the colors vibrate and make the text hard to read. This is kind of dark mode 101 and the reason for my initial snarky comment - which I apologize for :) An easy fix is to desaturate the color and make it lighter.
That being said, I do appreciate you taking the time to implement this!
Thanks for that. I took the tactic of keeping the same contrast ratios for different cases of black and white text as in light mode. WCAG AA had to do with the least visible text, for instance, the footer links and upvote counts were darkened in light mode to hit 4.5:1. Colored text did become paler for dark mode, just not by a lot.
By now many people have cited body text contrast being too high, and I’m inclined to agree that it doesn’t need to be as high in dark mode as in light mode. Whether to lighten the background has more to do with fitting into the OS environment alongside other dark mode apps and sites. Up to now that was a non-goal; I put the phone dark mode experience first. But I should not be surprised that so many Lobste.rs users prefer dark mode on their desktops in the daytime. :)
Most people’s physiology perceives lower contrast between black and blue than between black and other primary colors. I do appreciate the effort you and kevinc made and I get that design by committee is super frustrating generally not a recipe for success. But it does take tweaking to get a color palette to fit a perceptual model better than RGB.
Sources:
My goal for this PR was not to invent a new color palette but to choose dark-background appropriate variants of the existing palette. Entirely new colors were just out of scope this time.
Lightening the background is not an unexpected request, but we will want reasons. For examples of what we’ve thought through, check the pre-merge discussion in the PR.
“A dark theme uses dark grey, rather than black, as the primary surface color for components. Dark grey surfaces can express a wider range of color, elevation, and depth, because it’s easier to see shadows on grey (instead of black).
Dark grey surfaces also reduce eye strain, as light text on a dark grey surface has less contrast than light text on a black surface.”
– Material guidelines
I find it hard to read white on black, as it looks like headlights on a pitch black night to me, and I can’t see the text clearly, but I know it’s also the case that others need more contrast. When I’m reading dark-on-light, I need more contrast.
With a ‘softer’ look than black + white, the user should theoretically be able to set higher contrast as an option in their OS, but I have no idea how widely this is supported. I’ve just tried it with duckduckgo in Safari on MacOS and it did seem to work - though I’m not sure the page did anything itself.
–
“Prefer the system background colors. Dark Mode is dynamic, which means that the background color automatically changes from base to elevated when an interface is in the foreground, such as a popover or modal sheet. The system also uses the elevated background color to provide visual separation between apps in a multitasking environment and between windows in a multiple-window context. Using a custom background color can make it harder for people to perceive these system-provided visual distinctions.”
– Apple guidelines
I’m not sure you can find/use the system colours on the web.
Here’s a desktop screenshot with lobste.rs visible - notice that it’s the only black background on the screen.
Thanks for these details. In particular that screenshot is helpful.
It’s true that on your phone at night, the site may be your only light source. A goal of mine was that if any site is suddenly too bright for you, it shouldn’t be this one. But on your desktop, the site shares a lit environment with your other windows. The most common background color is perhaps a bit driven by fashion, but that’s a fact of life, so let’s deal with it. It is probably worthwhile to get along with the other windows on our screens.
Given that we already theme mobile CSS with a media query, what do you think about the phone use case?
I don’t think you should rely on detecting mobile to target OLED screens. OLED screens are gradually becoming available on tablets and larger screens, and not all mobile screens are OLED. I’ve been trying to figure out a way to target OLED for web design and I don’t know of a good way to do it.
It’s a shame that the prefers-color-scheme options are just light and dark, rather than e.g. light, dark, and black. It seems like some people want pure OLED black and some don’t, and I’m not sure you’ll ever get them to agree.
Personally I’ve decided to err on the side of assuming everyone has OLED, because I’d like OLED screens to get the energy savings when possible, and I just personally like the aesthetic. If it’s good enough for https://thebestmotherfucking.website/ it’s good enough for me.
Very dark gray is also efficient on OLED. It’s not a binary like #000 saves power and #222 is suddenly max power. I think power is just proportional to brightness?
Interesting; I hadn’t known that about OLEDs. Your statement is correct according to this 2009 Ars Technica article citing a 2008 presentation about OLEDs:
The article also has a table showing the power used by an OLED screen to display five example images of varying brightness. For mostly-white screens, OLEDs are actually less power-efficient than LEDs.
I don’t usually have dark mode set on my phone but I’ve just tried it and… it’s surprising.
The black background doesn’t have the same problem here. I can read text without it looking like headlights at night in the rain!
Maybe it’s due to OLED, or maybe something to do with the phone seeming to dynamically adjust brightness? No idea but it’s fine.
Thanks for the link. I’ve read through the discussion and I understand now that you have put some thoughts into this. That’s good enough for me :)
This is great!
Your timing (or mine) is bizarre: yesterday I started switching things over to dark mode when I realized that I was getting eyestrain on all the bright pages.
This looks good, thanks. Working in Firefox on Debian stable.
Thanks for respecting the browser settings instead of forcing dark mode nightmare on me. Much appreciated.
Thanks for the hard work as always and for shipping this UI improvement, about which I have absolutely no criticism or feedback of any kind.
YAY!
Very happy with pure black. On OLED context looks ideal and while a very small difference to dark gray, pure black saves a little more power which saves battery and helps reduce general power usuage everywhere. +1 for the planet.
Now if Lobsters could get the bare minimum Web App Manifest file to get Android browsers to display an Install prompt. Save to homesceen isn’t the experience I want as the browser relaunches to the index instead of taking me back to the tab I had open.
I consider myself a power user, but I can’t figure out how to avail of this new dark mode. I understand that the implication is “it will detect it based on either your browser or your OS”. I do believe I am in dark mode at the OS (WM) level. Chromium 94 under KDE Plasma.
Chrome on Linux has non-existent detection of OS level dark mode settings AFAICT, though with the multitude of WM/DE combinations and the myriad ways of interacting with them, it’s hard to fault Chrome for it.
My understanding is that there’s an XDG dark-mode standard forthcoming, but I can’t find where I thought I read that. Firefox on Linux seems to guess based on your GTK theme, which… ¯\_(ツ)_/¯
Another gotcha I just discovered is that if you have “resist fingerprinting” turned on in your Firefox privacy settings, prefers-color-scheme is ignored so that you can’t be sorted into a “dark mode” bucket.
The site uses a CSS media query with prefers-color-scheme. If you can figure out how that can be set by your browser on your desktop environment, it ought to take effect on this site. I’m afraid I don’t have any insight about how Chrome consumes environmental settings from Plasma.
There is a huge issue that with the dark theme, you can’t see links that were already clicked. They are all the same color when they shouldn’t be. In light theme and most other websites, already visited links are marked as such. Perhaps that’s a bug?
Thank you for adding the theme though. Also would love a manual white setting even when in dark mode.
That bug has been reported and logged, thank you!
Firefox’s dark mode reverses it so now it’s bright :(
It’s gorgeous. Thank you!
<3 <3 <3 for the team! I just love it!
I love it. Thank you @kevinc!
This is awesome, thank you!
This is a very welcomed change, thank you!!! I do a lot of late night lobsters reading and will no longer be blinded :D
This looks great - thanks to all for the work!
Woo this is great! Thanks @kevinc !!
Thank you so much
The lobsters crowd seem to be bad at bikeshedding today, or maybe they’re just lazy.
The colour scheme reminds me of something — some SaaS/editor I used briefly, I think? Can’t quite remember what. Was it inspired by anything specific?
Thank you.
I’d say I was influenced by my experience with macOS and iOS dark modes in stock apps, Apple’s design guidance on that topic, and some color contrast goals. I avoided inventing a new palette and just made adjustments for a dark environment. So for instance, colored text is a bit paler as if it emits its own light, rather than being a pigment on a lit page.
Thank you!
Yeeeeeaah!!!
Love. It.
Thanks, Lobsters team! <3
Awesome
This looks great!
[Comment removed by author]