Dark theme for Discourse
Started working on a userstyle for the WaniKani forums a while back, but abandoned the project because I was too busy with work and such.
Now I want to revive it again.
It’s still heavily work in progress, and I’m looking for feedback in how it could be improved.
You can install it from userstyles.org.
You can either comment here directly, or open an issue on GitLab or GitHub.
Feedback is very appreciated!
One thing I noticed, the like button stays gray for things you’ve already liked (instead of turning pink), and the “WaniKani Community” header is still in black text. Otherwise, I like it so far!
Thanks.
The community header is an image, and the text is included in that.
I could apply a filter to change that, but that would modify the entire image and it would look weird.
Omg, yes, thank you! A nice dark skin for the forums :3
If it wasn’t your intention to put the username below the avatar, which takes up a lot of vertical space, you should know that it’s the topic-body width which is causing it. I’m mentioning this only because I’ve had some trouble with it working on my transparent theme, but you’re better at this than I am, so perhaps you already knew that.
I can also mention that the annoying border at the bottom of the window is the top border of the reply box, which isn’t obvious. 
I won’t be using the style since I have my own, but it looks nice, good work 
What I’ve done with my WIP is just change the image out for a version with with white text. Not as flexible as a filter, but it’s much nicer than leaving it black.
.d-header .title img[src$="ef1160d65be1c1c3e7fe4b6d3a66ae97bcb1eafd.png"] {
content: url("https://i.imgur.com/te3wMyh.png");}
I’ll probably end up doing something like that.
I really don’t want to leave it as it is right now.
A couple things:
Other than that I haven’t noticed anything glaring.
@Kumirei Coloring the little overlay effect for new posts was a pain wasn’t it? Could maybe share how you did that to save valeth a bit of time?
Haha, yes, it was. I had the inspector open, went to a new post, quickly selected the element, and took a screenshot of its properties 
If Valeth’s interested this is what I ended up with (the animation name was supposed to be temporary, but I never changed it)
@keyframes kumirei {
from {background-color: rgba(194,111,220,0.3);}
to {background-color: transparent;}}
.topic-body.highlighted {
animation-name: kumirei;}
Had a chance to work on this some more? I want to use it, but want to wait until it’s a little less WIP.
Quick headsup 
@Kumirei I tried the image replacement, but this is Chrome specific and does not seem to work in Firefox (which kinda makes it completely useless for me, because that’s my main browser).
So unless Viet (or somebody from the WK team) changes the header to be more easily styled, we kinda have to accept an unreadable “WaniKani Community” text.
Unless I find some other solution.
I can still add it, but for me it will be just dead code.
filter: invert(32%) brightness(110%) would be an option, but it makes the image a bit washed out
Oh, you’re right. I hadn’t gotten as far as to test it in FF. Got it working with this, however
.d-header .title .logo-big {
width: 398px;
height: 60px;
box-sizing: border-box;
padding-left: 398px;
background: url("https://i.imgur.com/te3wMyh.png") no-repeat;
background-size: contain;
}
Hmmm, interesting.
So you are basically “pushing” the image out of view.
Clever.
And it works like a charm.
Well, this removes one major issue.
Made any progress on this?
I’m currently using the Discourse Dark theme and am not developing this theme at the moment.
Not sure if I’ll get back to finishing it.
But the project is open source, so if anybody wants to pick it up then feel free to do so.
