Dark theme in discuss

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

I was actually reading replies on this thread and the logo went from dark to light before my eyes as the page auto-refreshed. Cool coincidence. :slight_smile:

1 Like

The logo doesn’t size properly on ff mobile :wink: @patdavid

I was just messing with it to get it working right. It should with a fresh load? (otherwise, screengrab if you get a moment).

Oh there it is! Nice

1 Like

I like the dark theme, but the color/brightness difference between the caught-up and unread threads text in the list is very slight—hard for me to distinguish.

The dark theme is very influx, I’ll try and do a bit better :slight_smile:

What does everyone think of this version of the dark theme? The only thing I think I don’t like is the reply button color.

1 Like

I agree, the bottom reply button is the one thing that looks wonky with this version, and the problem is that its background is too light in color. For my personal taste, the page background could be a little darker than #484848 or #545454 (depending on the part of the page you look at), but it’s exactly that: personal taste. This is pretty easy on the eyes other than that one button. I could look at this for an extended period of time without getting tired eyes, and that’s the whole point, isn’t it? :+1:

@elGordo beat me to the reply. I am a slow poster :slight_smile:.

I haven’t kept the dark theme on for extended use but I think it still needs some tweaking.

Remarks (What I am noticing as I write this post.)

  1. The Reply (box) button is not as consistent and polished as the white theme’s.
    a. It is grey scale; could use some color.
    b. It darkens on hover rather than lighten like Bookmark, etc.
    c. Text vs background contrast could be higher.

    BTW, the Tracking button’s circle disappears on hover and could also use some color.

  2. The usernames could be brighter. In the white theme, it is brighter than the name and has greater contrast against the background.

    image

PS

  1. I forgot to mention that it might be nice for guests to be able change the theme as well without registering or logging in.

Thank you for your replies! I did this in about 15 minutes, so it still needs some tweaking, yes. I’m going to use it for a little while and see what else comes to me.

Also, we can have multiple themes. Discourse don’t expose theme editing to non-administrative users so far as I know, but I’d be happy to upload and name themes that people come up with.

Part of the look of this is certainly due to my love of the zenburn theme. I’ve tried to move away from this theme several times, but it is like glued into my brain. It isn’t the darkest, but it is sufficient and I find the contrast to be very pleasing and readable. Zenburn doesn’t tire my eyes like other themes seem to do.

The theme is just a handful of colors for the base (named as @darix suggested :wink:):

"fifty shades of gray": {
  "primary": "F0F0F0",
  "secondary": "484848",
  "tertiary": "c0c0c0",
  "quaternary": "f0f0f0",
  "header_background": "252525",
  "header_primary": "f0f0f0",
  "highlight": "303030",
  "danger": "e99f9f",
  "success": "b2e8c7",
  "love": "d22e54"
}

I haven’t really moved beyond this yet. I’d welcome any additions that make sense to this color scheme as well.

Noted, I’ll try and look into this in the future. Thank you.

I noticed this earlier tonight too. I’ll have a look into it as well.

This would need to happen upstream in Discourse; there isn’t much I can do about it, I don’t have the necessary skill.

Not a bad theme at all. It’s pretty similar in terms of contrast to the “Base 16 Tomorrow Dark” theme I use in Atom, although that uses different colors for different parts of syntax).

Sounds fun. How would one create a theme and test it without being an admin?

Find the colors listed above and use your browser’s dev tools to change them.

Firefox doesn’t appear to have a CSS editor where I can search and replace. (The current version also stalls randomly :cry:.) Any suggestions?

Interesting tidbit is that the forum appears to have 132 unique colors, including the ones with transparency. That is a lot of colors! :smile::sweat_smile: