Forum Dark Mode support

philwareham · 2019-03-15 16:05:56

I’ve just added support for Dark Mode in this forum (depends on OS and browser support – e.g. Firefox 67 and macOS Mojave). Let me know how it works for you.

After a period of testing here, I will also update our docs site and the Textpattern homepage/blog to support darkness too.

phiw13 · 2019-03-16 00:45:49

It seems to hold well with Safari TP.

As a side note, I find it interesting that you choose to go with cold blacks/greys (HSL(210,5%,**)) for the background colours. I rather choose to go with warmer blacks / greys (HSL(50,5%,**)). That also helps reduce the blue glare typical of contemporary screens.

philwareham · 2019-03-16 09:04:49

I followed the design cues in Apple’s Dark Mode recommendations to a certain extent. I guess their thinking is that people will night shift to warner hues to lessen blue glare late at night. It’s a fair point though – interesting to see where designers go with this.

jakob · 2019-03-16 09:36:05

Is this currently dependent on having a nightly version of Firefox or the technology preview of safari? Or can we test this manually (also in the txp admin area) … even if just by manually changing/adding a class or directive via the web inspector?

Something else: one thing I noticed on the forum is that on short posts the message pane (postright) doesn’t extend to the bottom of the post block (postbody).

phiw13 · 2019-03-16 11:50:31

philwareham wrote #317100:

I followed the design cues in Apple’s Dark Mode recommendations to a certain extent. I guess their thinking is that people will night shift to warner hues to lessen blue glare late at night. It’s a fair point though – interesting to see where designers go with this.

Hmm, but people use Dark Mode all day long… In my eyes (that is very personal experience), using cold / blueish dark tones makes that bleu glare harder all day long. But yeah, we’ll see how it plays out and what people use for their web apps – and how it will play out once iOS (next?) supports dark mode and once the Various Androids do.

(I use a yellow/orange toned desktop image on all my devices to reduce that blue glare a little)

phiw13 · 2019-03-16 11:53:40

jakob wrote #317101:

Is this currently dependent on having a nightly version of Firefox or the technology preview of safari? Or can we test this manually (also in the txp admin area) … even if just by manually changing/adding a class or directive via the web inspector?

Yes, I think so, as it relies to on Media Queries in the stylesheet. No other browser support those currently.

I think this issue might bring some more flexibility to the TXP admin interface. I think it might be a value addition.

philwareham · 2019-04-01 16:56:19

I have now implemented Dark Mode for the project homepage, and for the documentation, too. If you spot any obvious display glitches then let me know. Cheers!

jakob · 2019-04-01 20:41:55

Thanks Phil! I can now test it on Safari as of the last Mojave update.

phiw13 · 2019-04-08 08:42:54

philwareham wrote #317441:

I have now implemented Dark Mode for the project homepage, and for the documentation, too. If you spot any obvious display glitches then let me know. Cheers!

On the front page of the documentation site, the background on the container for the search field is a (very) light grey. That feels like blinding in dark mode. Uncomfortably so (it does not help that the search field itself is quite large). Perhaps make that background medium grey ?

Last edited by phiw13 (2019-04-08 08:45:04)

philwareham · 2019-04-08 08:46:01

phiw13 wrote #317530:

On the front page of the documentation site, the background on the container for the search field is a (very) light grey. That feels like blinding in dark mode. Uncomfortably so (it does not help that the search field itself is quite large). Perhaps make that background medium grey ?

Yep, that needs to be fixed eventually. I’ve not amended the colour of the zebra strips as yet.

philwareham · 2019-04-12 14:05:19

Zebra strips on the site are now dark too, if you are using Dark Mode.

phiw13 · 2019-04-14 09:47:04

philwareham wrote #317610:

Zebra strips on the site are now dark too, if you are using Dark Mode.

Thanks! Now less blinding in dark mode.

Btw, did you see that new icon in Safari’s developer tools, Elements tab. Next not the rulers icon, a new icon showed up that looks like and inverted window. Click and see what happens¹…

¹ source here (Dark Mode for the Web)

Textpattern CMS

Textpattern CMS support forum

#1 2019-03-15 16:05:56