Dark theme / night mod for PC

[vladimircicovic]

Could you please add night mode / dark theme for lobster site so ppl who reading could use it.
Thank you.

[pushcx]

You can accomplish this with a user style.

This is also a dupe of #404.

[pushcx]

I saw a dark mode screenshot by @lattera go by on Twitter, he suggested the Dark Reader browser extension. Hope this works out for you.

[adriangoransson]

Would it be of interest to add a dark mode using the CSS prefers-color-scheme feature?

Pros:

• No plugin necessary.
• Pretty good support and works on mobile.
• Toggle is on system level and needs no custom UI or per user storage.

I see no explicit downsides except that it requires some more CSS. And the obligatory disagreements on how a dark theme should look.

Edit: this seems to have been brought up already https://lobste.rs/s/ntcqzp/dark_mode

[magikid]

I like the prefers-color-scheme option but I agree with @pushcx in #404 that this should probably be in a meta thread on lobsters.

[adriangoransson]

@magikid I agree, but I haven't registered yet. 😀 Would you mind sending me an invite?

[soc]

I apologize for resurrecting this thread.

I'd be happy to provide a PR implementing a dark mode based on prefers-color-scheme, if this doesn't go against #404 (comment).¹

The good thing about prefers-color-scheme is that the concern raised in the comment regarding

A single toggle to a dark theme seems OKish if someone can suggest a good place in the UI for it

is not an issue, as prefers-color-scheme does not require any toggle or UI change to work.

---

¹ There are two ways I'm able to read @pushcx comment, either as "I'll consider implementing this if there is overwhelming demand" or as "I'll accept an implementation if there is overwhelming demand". If it's the former, I'm happy to provide a PR.

[pushcx]

Sounds like a great approach that doesn't make the site any more complicated. I'd merge a PR for it.

[soc]

@pushcx Cool, thanks!

[soc]

Is there a way to get a Lobste.rs instance running without the database setup mentioned in the README?

[pushcx]

No, without the database it would have nothing to present. If you don't want to do the setup hassle, I'd say just Save pages in your browser as "web page, complete" and you'll have the css files in front of you to tweak and reload in the browser without any gem/rails/db hassles. When you're done, copy it into the repo and submit a PR.

[soc]

Ah, thanks! I came up with a similar way: Editing the CSS file in the IDE and just pasting it into the style editor in the browser tools.

I factored out all the relevant CSS colors to variables already – which will make it much easier to adjust things (also with users' own userstyles that some may prefer).

This brings me to the question: Are we supporting IE11? (Then I'll also add the required polyfill.)

(I tried switching to ActiveRecord's sqlite adapter, instead of the mysql one, but that didn't work ...)

[soc]

Submitted a PR in #823.

[pushcx]

We don't serve js to logged-out users and MS still hasn't apologized for 90s IE, so, no.

[soc]

Great! :-)

[pushcx]

Done by @soc in #823.

[nikhiljha]

I just opened lobsters on my phone and the low-contrast is kinda killing my eyes; can we revert and bikeshed colors some more (or at least make sure we conform to the WCAG guidelines)?

Edit: Another Screenshot

[pushcx]

When you mention WCAG Guidelines, are you thinking of the color contrast guidelines or something else?

[nikhiljha]

Yes, the color contrast guidelines. Thanks for the clarification.

[pushcx]

There's no way I'm plugging in every single possible pair of colors into a rando tool one at a time for those vague guidelines, but it's moot as I reverted in 65b0b34. Browser support is insufficient for development. We can revisit when that's there.

[nikhiljha]

As for testing colors, there are existing dark theme colors we can just copy. I think Apple's are pretty good, but there are others.

---

As for browser support, this is pretty much complete. p-c-s works on:

• All Apple Devices
• Modern versions of Android (10+)
• Windows (Firefox, Chrome, Most Chrome Derivatives)
• Linux (Firefox)

In all the above cases, dark theme is configured in the OS settings, not the browser settings, which seemed to be confusing people in IRC. The only major missing player is Chrome on Linux.

[soc]

@pushcx Re:

Firefox support is half-baked. There's no user or devtool UI to toggle between
states, inspecting an element always shows the style for ::selection instead of
the element, and it lists the name of a color variable with no way to see the
value of the variable or where it is set. Punting until it's debuggable.

I also realized that I lost the ability to switch between light mode and dark mode, because my Gtk theme is now correctly marked as a dark theme, which makes Firefox pick the dark CSS theme by default and ... Firefox lacks the ability to switch back to light mode. Yikes.

[pushcx]

Yeah. I'm not opening my wm config, restarting my browser, or waiting twelve hours to toggle back and forth between light and dark. Let alone dealing with devtools showing the wrong selector and having no view into variables.

[adriangoransson]

Strange that Firefox doesn't have the option to switch manually, even in the "developer edition". There's always extensions though.

@pushcx As for debugging, am I missing something? I can inspect variables just fine by hovering over them. The root namespace is inherited and its definition is shown last. Although one annoying issue with the extension is that I need to reselect the dom element to update the ruleset.

Image below of what I mean. Though it is not from lobste.rs.

[soc]

There's always [Dark Website Forcer] though.

@adriangoransson that's the one I'm using, and it doesn't work due to the issues mentioned above.

[kconner]

If I've understood all this, the task remaining is to choose a nice set of colors for dark mode that pass WCAG color contrast guidelines, then prepare a PR with an un-revert of 65b0b34 plus the color changes. Is that accurate?

If so, I'd be happy to take that on this week. I'm on macOS and iOS and could solicit spot checks from other platforms.

[pushcx]

Yep, you understand correctly, and I appreciate you volunteering. The browser dev tooling has caught up and now this is straightforward to test and debug.