I just needed to wait for availability, and then some minor CSS fiddling to get the logos inverted properly. Well, I went ahead and (hopefully) got it working real quick. Dark themes are now user-selectable.
Open your account preferences:
Got to Interface and change the Theme to Dark Test:
Don’t forget to hit Save Changes, et voila!
I am mostly relying on the default dark theme stuff that shipped with discourse, but if anything looks wonky just come back and let me know (screenshots help, btw). Before you report anything, after saving don’t forget to do a hard-refresh of your browser session.
Have fun! I hope this helps out a bunch of you that really wanted a dark background (pokes @DavidOliver)!
Just started testing the dark theme, looks fine so far… except that maybe it is a bit too dark? I would opt for a slightly lighter background, maybe halfway between the current one and the one used around the panel where posts are edited (see screenshot).
Good stuff. Personally, I like the white theme but may reduce the contrast soon.
@elGordo It isn’t an issue for me since I made a monitor preset for just for reading, but then I would have to change it to view the photography on the forums.
A wee nit. The logos are black on a black background. No biggie, other than they have associated anchors. Hovering around and looking at the status bar can find them.
By hard refresh, do you just mean F5? Or something else? I’m on Ubuntu 16.04 with Firefox.
Edit: Inspecting the area with a dropper, the background is #111111 and I am getting #0d0d0d as I cross over where the logo is. For me the difference is invisible.
On another system, Windows 10/PaleMoon, I am seeing the background as #111111 and the logo as #030303. The logos are faintly visible there.
Try Ctrl-Shift-R. We need to refresh and clear the cache to check. I’ll fire up my FF/Ubuntu later and test. (Thanks for taking the time to test this!)
@patdavid, this looks lovely. Many thanks! I much prefer how images are perceived in this theme as their shadows aren’t knocked out by the effect of the white on my pupils.
The light version of the logo isn’t showing in Firefox because the content property is in a selector for an element (#site-logo) rather than a pseudo element (e.g., #site-logo::before or #site-logo::after), which is against the spec. Whereas Chrome goes ahead and renders it anyway, Firefox doesn’t.
Ideally, instead of relying on CSS for the logo content you’d have the actual img src reflect the file to be used. If this isn’t possible and you need/want it done via CSS, let me know and I’ll see if I can get it working with a pseudo element selector. Having said that, I think the black logotype on the dark grey background actually works okay - it avoids distraction from the actual content. But I get why you’d like it white-out, too.
Yeah, I wasn’t sure if the content property would fly like that. Worth a shot.
I’ll dig some more and see if we can’t get it working right (wish we had a means for specifying alt site assets as part of a theme in discourse…). I might try setting the ::before property and see what’s what (failover is create a new node in the dom and overlay the logos).
Ok, thank you to everyone that pointed out the missing light logos! I was being kind of lazy and hack-y by abusing a CSS property, and now I’m doing things better (hopefully).
Those of you using FF and the dark theme should now see the correct light logos up top. (Thank you very much @DavidOliver for catching this and keeping me honest. ).
What’s neat to me is that you can set the dark theme only on specific devices if you want (so light theme on desktop for me, but dark for mobile. neat!).
But I get why you’d like it white-out, too.
Worth a shot.