[Userstyle] Discourse Breeze Dark [on hiatus]

WaniKani API And Third-Party Apps
1

:warning: This is a third-party script/app and is not created by the WaniKani team. By using this, you understand that it can stop working at any time or be discontinued indefinitely.

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!

5 Likes
2

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!

3

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.

4

Omg, yes, thank you! A nice dark skin for the forums :3

5

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

6

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");}

image

7

I’ll probably end up doing something like that.
I really don’t want to leave it as it is right now.

8

A couple things:

  • It would be nice if the links had a different color than the rest of the text.
  • The quote box is still white as well as the reply input box and the more info box on an OP.
  • The indicator for unread replies could use the little blue/grey circle

Other than that I haven’t noticed anything glaring.

9

@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?

10

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 :grin:
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;}
1 Like
11

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.

12

Quick headsup :smile:

Screenshot_20171207_113849

1 Like
13

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

14

filter: invert(32%) brightness(110%) would be an option, but it makes the image a bit washed out

Screenshot_20171210_231058

15

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;
}
16

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.

17

@Kumirei you are now commited to my Git history :smile:

Screenshot_20171211_002214

2 Likes
18

Made any progress on this?

19

@valeth Is this on the backburner or abandoned?

2 Likes
20

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.

1 Like