Dark Mode

Someone asked for a “dark mode” option, and since the WordPress update is out of the way with no serious issues, I went ahead and hunted down a plug-in to add that. It requires JavaScript of course, but it’s pretty slick. I put the control at the bottom of the sidebar on the right (or very bottom of the page on mobile). It looks this:

Night Mode

That’s also a working control, if you’d like to try it right now.

Anyway, I may refine it a little bit, but I’ll probably stick with the normal view myself for the most part, so let me know if you encounter any problems (e.g. things that become invisible, hard to read, etc).

Loading Likes...

22 Replies to “Dark Mode”

  1. I looked at dark mode, I prefer normal, however I now have the issue that in spite of turning dark mode back off.. every time I refresh the home page.. dark mode comes back on…. it’s most annoying that normal mode won’t stay SET.. dark mode is a little *too* dark for my taste..

    • That’s… odd. And a bit worrying. But as long as it only started doing that after you turned it on manually, you should be able to get rid of it by clearing your cookies, or this cookie specifically:

      nudeworldorder.net         wpNightMode

        • Damn. I don’t know what could be causing this. I really hope I don’t have to get rid of dark mode, because I put a moderate amount of work into setting it up and it seems to work well for most users, but I definitely don’t intend for it to be the default mode.

          My only guess at the moment is that maybe it’s some kind of conflict with the page caching. plug-in. I have turned off caching for diagnostic purposes (it’s probably not viable to leave it off permanently).

          Please let me know if you’re still experiencing this problem.

          Also, if you (and Beardy if you’re reading) could tell me what browser you’re using that might help. The frustrating thing is it seems to work fine in mine, so I can’t really do much to debug it on my own.

          • I’m using Firefox 56 on Linux. I came on to light mode this time, but I’ve not restarted the browser since my previous visit.

            I’ve just loaded the site for the first time in Chromium 71.0.3578.98 and it defaulted to light mode, but I’ve not viewed it in that browser previously so I have no comparison.

            • Well, that’s not particularly conclusive, but thanks for the report.

              Wish I could figure out exactly where it’s going wrong.

            • After restarting Firefox I’ve arrived in light mode, which is good. Particularly if you’ve re-enabled caching.

            • I had not done that yet, actually. I’ll turn it on now. Let me know if the problem comes back, and we might have a clue about the culprit.

            • A couple of visits, both before and after browser restarts and I’ve not seen dark mode. I’ve not tried turning it on and then back off, but unless you want me to do more testing I think the cache change on the server may have solved it.

            • Probably better to leave well enough alone.

              It’s odd though, I admit I don’t really understand the internals well enough to say for sure, but it doesn’t really seems like turning caching off and then on again a couple days later should have fixed anything… But if it did, that’s great!

  2. Thanks for the screenshots, Autoskip. Cross-device compatibility can really be a pain, but I found a weird CSS hack that might help. Please tell me if it looks any better now.

    I also noticed the email address problem in the mean time, but thanks for reporting that too. The email address is an image of course (as a primitive anti-spam measure), so it doesn’t get styled with the text. I’m gonna do a quick fix on that now by adding a background color, I should really find a better way to handle that eventually though.

    • The drop-down is working perfectly now (the background still looks a little odd, but I suspect that’s just because I’m not used to it).
      For the email address, might I recomend you use the same border system that you use for the image captions?

      • Heh, I just assumed the shading was how it always looked. I didn’t do anything to change that part on purpose. But if it’s working I think that’ll have to do.

        Could you expand on the “border system” idea? Not sure exactly I know what you mean, or how it would apply to the email address.

        • It looks like the drop-down background is the same as in light mode, it’s just that the dark background changes the perceived ballance.
          As for what I was thinking of with the email image, if you have a white drop shadow then the text will be readable regardless of the background that it’s on.
          Speaking of text, what font are these comments using? I rather like it, and would like to use it elsewhere as well.

          • Georgia maybe? Fonts are another tricky thing, because unless you actually embed the font itself (which I have not) the browser will substituent whatever it thinks is closest if the exact font isn’t available.

            So to be clear, are you saying the comments are in a different font then the rest of the text? Because for me, the only things that use another font are the menu and headings, which use a sans-sarif font (Ariel on PC, I’m guessing an Apple device would use Helvetica).

            • Georgia looks about right.

              I’d specified the comments because that was where I’d paid atention to it – I like maths and when I made the numbered list of problems I’d found I noticed that this font uses lowercase numbers (a less used sizing of numbers to make them fit better in the middle of sentinces).

  3. Thanks for the feedback. I fixed the worst problem, the invisible text in single-line input fields. And I made “Site Navigation” on mobile more visible. Some of the other mobile-specific stuff might take a bit more hunting. It kind of translates the site for mobile automatically, so it’s not as obvious how to adjust it. But I’ll see what I can do.

    Incidentally, the reason for the invisible text is it was designed make the text in the currently selected text box black, vs. gray for the others. On a white background that emphasized the selected box, but of course on black it was hidden. I changed it to make the text blue instead. Is this annoying? The other obvious choices would be white, or just leaving it gray even when focused. Feel free to weigh in if you don’t care for the blue.

    I might have fixed the month drop-down, by setting it to be blue when focused also, but it doesn’t come out the way you describe on my phone, so honestly I have no clue if that helped or not. Please let me know.

    P.S. I think it will remember your setting if you create an account and sign in. This might be the first practical reason to do so.

    • The blue text in active fields is a little jarring, but it does work.

      The month drop-down is coming up as an iOS generated selector when I tap on it, so the active colour was never a problem, but the button to open it looks like a grey button with an odd texture in the lighter area (the only place that you can see the “Select Month”) – the blue text when active somehow doesn’t improve it…

      • OK, I don’t have an iOS device, and it doesn’t look like that on Android (or PC). Any chance you could give me a screenshot of how it looks for you? You can send it using the Submission form, or whatever’s easiest. Ideally I’d like to see two images, one with with the drop-down unselected and one with it open, to help me understand what’s going on.

  4. I personally like dark mode, but when I was filling in the “Name” and “Email” things to post this comment, I couldn’t see what I was typing, and I can see what I’m typing in this comment field just fine while in dark mode. ( I hope you understand… )

  5. I’m using this in mobile mode (iOS DuckDuckGo) and have found four problems:

    1: The navigation bar is the same colour as the background, making it no more than a rather missable “Site Navigation” text.

    2: Having the switch down the bottom requires quite a bit of scrolling to get to (and again, is rather missable) could it get moved to just below the navigation bar?

    3: The “Name”, “Email”, “Website”, “Search” and Tag Combination fields have invisible text whenever you are typing in them.

    4: The select month dropdown is a near unreadable grey text on grey gradient.

Leave a Reply to Autoskip Cancel reply

Your email address will not be published. Required fields are marked *

Characters: 0
0

DMCA / Report Abuse