1. 37
  1.  

  2. 7

    I’ve hacked dark mode for three sites (one my own). My own was dead simple. The two others had two problem that I don’t see mentioned in these guides.

    The big routine problem has been images that either are antialiased against white (and look horrible when the background is far from white), or that show something irregular, but are filled with white “background” pixels instead of being transparent. Fixable by asking the graphics-wallah to remake those.

    The big unusual problem I had was that some pictures’ information content depend on having a high contrast between a dark part of the picture and the picture’s surrounding background. Detectable only by looking at all the pages, fixable not really.

    Make sure to look through the site afterwards if you add dark mode anywhere.

    1. 5

      Ranty further comment: $#@!%@# whoever thought it was a good idea to send email with a specified foreground colour, leaving the choice of background colour to the recipeient’s email reader. “Pale blue on the background of your choice” is unreadable for me during the day, “black on the background of your choice” in the evening.

      1. 2

        There’s probably another good rant about inspecting images for quality automatically. Heck, I don’t know whether that transparent cat uses an appropriate alpha channel. It’s a good point.

        1. 2

          Make sure to look through the site afterwards if you add dark mode anywhere.

          Agreed on this. Even if images aren’t an issue, there is always some kind of design element that needs its colors adjusted, but hasn’t thought of earlier.

          For those who don’t want to mess in their browser’s about:config: Install “Dark Website Forcer”.

          (for people interested in more examples of sites with dark mode, here is the one I built some months ago: soc.me)

        2. 4

          @pushcx I checked the lobste.rs repository and CSS and there seems to be nothing active to add this functionality to lobste.rs. How open would you be to a PR for this?

          1. 3

            I also like adding a toggle interface on the page, which saves the value to localstorage in case the user prefers one or the other. At that point, I just override the prefers-color-scheme logic with the saved value in Javascript if needed.

            Coincidentally, I did this to my blog yesterday – here’s the dark mode logic.

            1. 2

              Ah nice, thanks for this! I’ve been thinking about implementing something like this also. This will save me some time. :-)

            2. 2

              Sadly the prefers-color-scheme CSS query isn’t too well supported (yet). Therefore I opted to use a simple JS snippet to toggle sheets. I’ve written a little article on it a while back here: https://timvisee.com/blog/dark-mode-toggle-on-static-website/

              1. 2

                If you want to know whether your browser supports it or not I wrote this page some time ago: https://prefers-color-scheme.bejarano.io

                1. 2

                  It’s supported by Firefox, Chrome and Edge. That’s like 99.999% of the browser market. :)

                  1. 1

                    Isn’t the browser market 50% android 25% windows and 25% miscellaneous, and prefers-color-scheme works on one of those “miscellaneous” varieties?

                    1. 1

                      It really just depends on whether you’re including China or mobile browsers.

                      1. 1

                        Android and Windows aren’t browsers…

                        Firefox, Chrome, Safari and Edge all support this.

                        1. 1

                          I tested Chrome earlier today, and found no way to actually use this functionality on that particular device. If it can’t be used, does it really work (GP’s word) or is it really supported (your word)?

                          The javascript-based alternative mentioned upthread delivers the functionalty all the way to actual users, today. Personally I chose to use prefers-color-scheme because it’s cleaner and the device support will get there eventually.

                          1. 1

                            https://caniuse.com/#feat=prefers-color-scheme filtered by usage relative % of tracked desktop browsers, 79%. Chrome support = ✔

                            After that, it depends on how your device chooses to deliver your preference. It works fine for me on Windows, but for example I couldn’t imagine 99% of Linux systems managing to cobble together the sequence of interprocess interfaces needed to communicate color scheme preferences to a web browser. I personally don’t know about or think of Mac OS. Obviously, it’s a progressive enhancement anyways, so it’s not like talking about CSS grids or flexbox.

                    2. 1

                      caniuse reports it works on around 76% globally.

                      1. 1

                        If you look at how many browsers parse that CSS and handle it, the figure is 76%. If you look at how many users have a light/dark UI toggle and a browser that uses the toggle to handle the CSS, the figure is much lower.

                        Still.

                    3. 2

                      The approach with custom CSS properties is the right one. I’ve initially sprinkled stylesheets with @media alternatives for each rule, which not only is super verbose, but also makes it impossible to make JS-based switcher/override for the style.

                      1. 1

                        This post inspired me to experiment, and I quite like how it turned out for my website, so thank you for that!

                        1. 1

                          How do you enable this preference as an end user? Is it OS specific or browser specific?

                          1. 1

                            Months ago I wrote this little page that lets you know whether your browser supports the prefers-color-scheme CSS media query or not: https://prefers-color-scheme.bejarano.io

                            1. 1

                              Just change your theme to dark mode on iOS or Android, or whatever OS. I’ve included instructions on the post on how to manually test it in Firefox.

                            2. 1

                              Good one! Could be even better if this blog had an option for a dark mod so we could test it live (even due he shared pictures there)

                              1. 1

                                On macOS, opening System Preferences and toggling between light and dark changed the appearance of the site for me.

                                1. 1

                                  There’s instructions on how to test it in the post.