Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dark theme / night mod for PC #637

Open
vladimircicovic opened this issue Feb 1, 2019 · 26 comments · May be fixed by #1026
Open

Dark theme / night mod for PC #637

vladimircicovic opened this issue Feb 1, 2019 · 26 comments · May be fixed by #1026

Comments

@vladimircicovic
Copy link

@vladimircicovic vladimircicovic commented Feb 1, 2019

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

@pushcx
Copy link
Member

@pushcx pushcx commented Feb 4, 2019

You can accomplish this with a user style.

This is also a dupe of #404.

@pushcx pushcx closed this Feb 4, 2019
@pushcx
Copy link
Member

@pushcx pushcx commented Mar 1, 2019

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
Copy link

@adriangoransson adriangoransson commented Nov 22, 2019

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
Copy link
Contributor

@magikid magikid commented Nov 22, 2019

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
Copy link

@adriangoransson adriangoransson commented Nov 23, 2019

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

@soc
Copy link
Contributor

@soc soc commented Feb 11, 2020

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
Copy link
Member

@pushcx pushcx commented Feb 12, 2020

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

@pushcx pushcx reopened this Feb 12, 2020
@soc
Copy link
Contributor

@soc soc commented Feb 12, 2020

@pushcx Cool, thanks!

@soc
Copy link
Contributor

@soc soc commented Feb 12, 2020

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

@pushcx
Copy link
Member

@pushcx pushcx commented Feb 13, 2020

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
Copy link
Contributor

@soc soc commented Feb 13, 2020

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
Copy link
Contributor

@soc soc commented Feb 13, 2020

Submitted a PR in #823.

@pushcx
Copy link
Member

@pushcx pushcx commented Feb 14, 2020

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

@soc
Copy link
Contributor

@soc soc commented Feb 14, 2020

Great! :-)

@pushcx
Copy link
Member

@pushcx pushcx commented Jul 14, 2020

Done by @soc in #823.

@pushcx pushcx closed this Jul 14, 2020
@nikhiljha
Copy link
Contributor

@nikhiljha nikhiljha commented Jul 14, 2020

image

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

image

@pushcx
Copy link
Member

@pushcx pushcx commented Jul 14, 2020

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

@nikhiljha
Copy link
Contributor

@nikhiljha nikhiljha commented Jul 14, 2020

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

@pushcx pushcx reopened this Jul 14, 2020
@pushcx
Copy link
Member

@pushcx pushcx commented Jul 14, 2020

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
Copy link
Contributor

@nikhiljha nikhiljha commented Jul 14, 2020

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
Copy link
Contributor

@soc soc commented Jul 14, 2020

@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
Copy link
Member

@pushcx pushcx commented Jul 14, 2020

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
Copy link

@adriangoransson adriangoransson commented Jul 14, 2020

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.
Screen Shot 2020-07-14 at 16 49 54

@soc
Copy link
Contributor

@soc soc commented Jul 15, 2020

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
Copy link
Contributor

@kconner kconner commented Sep 13, 2021

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
Copy link
Member

@pushcx pushcx commented Sep 13, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

7 participants