Dark theme in discuss

Yo! In response to this previous post

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:

image

Got to Interface and change the Theme to Dark Test:

image

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)! :smiley:

8 Likes

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).

3 Likes

Yeah boy!

Once I figure out how to make themes, I’ll make several.

1 Like

Hint:

Dang you know how to make me work.

1 Like

A sincere thank you from my eyes, @patdavid ! As soon as I clicked “Dark Test”, my eyes relaxed. :grinning:

2 Likes

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.

Our regular pixls logo? Try a hard refresh, it should be a lighter logo. (If not, which browser/OS?)

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!)

Ctrl+Shift+R made no difference for me.

Tried another computer with Ubuntu 16.04/FF, where if I’ve ever been on discuss before it was a long time ago, and it also showed the logo as #0d0d0d.

Looked at my phone (Android/FF) and could not see the logos there either.

Tried opening discuss on Windows in FF and got the same value for the logos (#030303) as I did with PaleMoon on the same system.

FWIW, I would think that a light colored logo would be best in a dark theme. While it’s possible to see #030303 against #111111, it’s pretty faint.

Hmm. This stinks. I’ll fire up my FF later hopefully.

fwiw, here’s what you should be seeing (safari/iOS):

IMG_3136

It looks like this on my desktop computer (Firefox 55.0.3 (32-bit); Win7).

Hovering over Blog:

image

I can conform this Firefox bug on KDE neon. I’ll see if I can look at it.

Pictures loaded as shown by FF dev tool:

https://pixls-discuss.s3.amazonaws.com/original/1X/8ef34026c2b938a850419ce2a0f9a8b89cf47702.png

https://pixls-discuss.s3.amazonaws.com/original/1X/8ef34026c2b938a850419ce2a0f9a8b89cf47702.png

As show by QupZilla (webkit)
https://pixls-discuss.s3.amazonaws.com/original/1X/8ef34026c2b938a850419ce2a0f9a8b89cf47702.png
https://pixls-discuss.s3.amazonaws.com/original/1X/8ef34026c2b938a850419ce2a0f9a8b89cf47702.png

If you look at the CSS for #site-logo it looks like it isn’t getting rendered in FF.

@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. :slight_smile: But I get why you’d like it white-out, too.

1 Like

Yeah, I wasn’t sure if the content property would fly like that. :wink: 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).

@patdavid This is awesome! Thanks for the hard work - it looks great on my Nexus 5x! Reading posts before bed will way nicer now!

1 Like

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. :wink: ).

2 Likes

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!).

4 Likes