1. 22
    Dark/Light mode? meta

I’ve seen several sites now that provide a light/dark mode that will change the background from e.g. white to black respectively, and alter the foreground text and other colours to match.

Would it be good to add this kind of feature to lobste.rs?

  1.  

  2. 14

    It turns out this might be handled on a pure CSS level in some browsers: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

        1. 3

          I prefer pre-made styles when there’s a good one available: https://userstyles.org/styles/136068/neo-dark-lobsters

          1. 1

            userstyles was found to be malicious wasn’t it?

            1. 3

              The company that bought userstyles.org and Stylish is shady, yes, but if you’re implying they’re tampering with style downloads, I’ve never heard this. Stylus was forked form Stylish shortly after the acquisition.

              UserCSS is becoming increasingly popular, and almost half of my installed styles are installed straight from their Git repos, eg.:
              https://gitlab.com/maxigaz/gitlab-dark#install-with-stylus

              See also https://openusercss.org/.

              1. 3

                Thanks for this (and to @rain1); I’ve documented this on the about page.

                1. 1

                  Stylus still uses the userstyles site though, and the devs were hostile went i asked about this. It’s suspicious.

                  UserCSS looks like it might better, thanks for the rec.

                  it is also possible to do your own custom themes in dark reader, less convenient than extensions designed for that but just letting people know.

            2. 1

              See also Dark Background and Light Text for Firefox. Works on mobile, too. I edit the background color to be #000000 across the web.

            3. 4

              I’d lean towards keeping stuff like this out of the Lobsters codebase and doing it with browser plugins instead. There looks to be plenty of satisfactory options there. And I have a feeling that it would turn into a huge, complex thing trying to satisfy everybody’s preferences for exactly how they wanted the UI to look.

              1. 3

                Thank you for letting us, the users, provide feedback on this!

                Those who need alternative UIs for browsing web pages, especially those as well-written and simple as lobste.rs, already have the appropriate tools installed. The fact that you are using HTML and CSS correctly means that, in my opinion, this issue is already solved.

                Every site does not have to implement every UI option or preference. The browser does that, which is why it is called a user agent.

                1. 2

                  Personally I don’t think it’s a priority. However, the site code is open source, so given a good CSS and a relatively simple way to switch on a user basis it shouldn’t be too hard for someone to submit a PR.

                  1. 2

                    I’m really no web dev, so I wouldn’t even attempt that, I’m hoping someone with those skills sees this ;)

                  2. 1

                    here is the one I use with stylus, based off reddit’s dark mode background-color

                    body { background-color: #1b1b1c !important }
                    .cur_url, p, body { color: #aaa !important; }
                    input[type="text"], textarea, .select2-choices input, .select2-container-multi .select2-choices {
                      background-color: #aaa !important;
                    }
                    .comment:target { background-color: #2c2c2d; }
                    
                    1. 1

                      I’d prefer this as as in the evening even on minimal brightness lobsters hurts my eyes a bit.

                      I’d prefer if I’d need not use external plugins for this, as I already have to trust too many third party stuff, and have no capacity to audit them, thus I’d not use it that way… (Thinking of the userstyles fiasco, for example)

                      As others have pointed out modern browsers support this via pure CSS media queries, so I’d like suggest using that.

                      On Windows 10 I use the accessibility feature for the visually impaired to have an inverted colour filter for Win+Ctrl+C and usually this solves my problem.

                      1. 1

                        Dark mode (light grey on black/dark grey text) has less of a chance of causing myopia compared to black on white text, so yes.