Discourse Vincent theme


(Joe) #22

:warning: DO NOT DO ANY OF THIS NOW. THIS IS JUST AN IDEA and the theme structure is not final yet

I think I’ve figured out a way to do this.

first you create your own empty theme.

Call it “Parent” for the sake of this post:

then install Vincent

then you add the SCSS variables in the common CSS section for the Parent theme:

then you add Vincent as a child theme or theme component of the Parent theme we just created:

Then you set the color scheme for the Parent to that of Vincent’s

As a child theme, Vincent will then inherit the variables from the Parent theme

This will allow you to change the variables safely and not have to worry about them being overwritten.

So you can for example change the gradient color to blue:

It will also allow you to rename the theme to whatever you like to match your app. For example Vincent, doesn’t really go with EVE. You can call the Parent theme EVE Midnight and that’s what would show in theme selection menu:

Now, let’s say a new version of Vincent comes out, well, you just go to Vincent and update… that’s all.

And the variables will be safe in your parent theme.




injecting the current color scheme variables into the Parent theme here would be a major plus. The variables could then be incorporated into child themes / theme components easily.

(Vincent) #23

Just a thought:


I wouldn’t capitalize first letters here. It might make sense in Internet-English but that’s about it.

On to the next matter… Did you think about changing the default font? I think it may give your theme even more character, but that’s just me :slight_smile:

Edit: about the overwriting of modified files when updating a theme – since themes are updated using git, would it be possible that:

  • when users make their first modification to a theme, Discourse creates a local branch for the theme;
  • users can now view DIFF when there’s a theme update via git;
  • then they may apply, discard, etc. changes, following their modifications.

(Joe) #24

v0.47 is out please update.

Fixes include:

slight color logic changes for improved readability like this:



This change also affects unread bubbles and a few other elements.

Also on the list of changes is fixing a bit of horizontal scroll that was present on mobiles.

mobile layout is improved and things fit better. More work is still needed.

I added support for Who’s online @8BIT :

@nawthor First-post flags are inside the post:

Reply flags are floating:

does this work for you? Further feedback welcome.

^ This is also fixed now. Thank you @_vincent :heart:

There may be a couple of minor other changes here and there.

v0.48 will be out tomorrow and it’s probably just going to be cleaner code and no further changes.

I will focus on fixing the smooth-scroll bug in Edge for v0.49 and further changes will follow in v0.50

I completely support that idea. Right now the theme uses Roboto - not the default font - for many reasons, let me know what other fonts you want me to look at.

I like where this is going but feel that it would be far beyond my skill to implement - Mad scripting skill over here :upside_down_face:

Thank you for all your time and feedback :heart::wine_glass::+1:

(Vincent) #25

That would be Discourse-side logic anyway.

I find Nunito very pretty


you’re doing a fantastic job! i’ll wait for tomorrow’s update and then provide even more feedback! can’t wait!


How do you change the background image and can an image also be added to the header bar?

(Joe) #28

v0.48 is out please update.

I’ve cleaned up the code for everything.

I will add support for multiple fonts and make it very easy to customize :+1:

That depends @Tyson, long story short, in order to keep scrolling performance high, a few things need to be taken care of. I am not finished with the background yet.

HOWEVER… (What follows is not yet supported and may be buggy / cumbersome)

Let’s say you want to change the background anyway,

Well you add this CSS

#background {
    background: url(https://i.imgur.com/hxPlUEk.jpg); // <-- Change this to the background image url
    background-size: cover;

And then go to

Then to:

highlight the src attribute and delete it!
And the final code there should look like this:

Then click save.

The will be overwritten after every update and need to be redone again, so I won’t recommend doing it.

I will make this a lot easier as I get nearer to v1.0

The end result if you do it right is this

Let me know if you need more help.

Do you mean like a logo or like a background for the header?

(Joe) #29

v0.49 is out.

Buggy background scrolling is now fixed on IE / Edge (mouse wheel / track-pad / arrow scroll) .

Please confirm on your end. :wine_glass:

(Joe) #30

v0.50 is out please update.

I focused on readability.



Still more work needs to be done there.

The default Discourse post highlight is now back - albeit a bit faster than default.

I had disabled it temporarily as I was trying to get my head around it.

@dax was kind enough to explain it here:

It now follows 2 variables set at the top. One for color and the other for duration.

On the overall, things should feel much snappier now.

There other minor fixes here and there.

Finally, I started to work on Vincent Light (Not included in the repo yet) will update when it’s ready to release.

(Keyboardstaff) #31

Vincent Light It looks very good!:blush:

(Michael Howell) #32

I don’t see any difference between the before and the after.

(Vincent) #33

Line spacing and font weight. Subtle – very well thought.

(Joe) #34

Thank you for the feedback @notriddle

First things first, let me share the problem I’m trying to fix and I won’t go into too much detail unless you’re interested.

When I look at white text on a dark background, my eyes see something like:

The text is always fuzzy and I have trouble reading. This is easy to get through if it’s just a few lines but after reading paragraph after paragraph for 15 or 20 minutes my eyes feel the strain.

@_vincent is correct :+1: :wine_glass:

I did increase the line height for paragraphs from 1.5 to 1.6 and added a slight margin to list items for a similar result.

I would have loved to reduce the font-weight further but it was already at 300 and going to 200 on such a thin font creates way to much aliasing when I scroll.

So, I added these:

-webkit-font-smoothing: antialiased; // <-- this one is present by default in Discourse
-moz-osx-font-smoothing: grayscale;
text-shadow: -0.07em 0 #222, 0 -0.07em #111, -0.07em 0 #111, 0 0.07em #222;
-webkit-text-stroke: 1px rgba(0,0,0,0.1);

Here are a few more samples of what that does: (Before and after pics both have the same line-height of 1.6)

IE before with highlight

IE after with highlight:

IE before:

IE after:

As for a webkit based browser, here’s Chrome,

Chrome before with highlight:

Chrome after with highlight:

Chrome before:

Chrome after:

I found that the changes reduced the glare around the text and made it easier for me to read big chunks of text.

With all of that being said, I will still continue to try to improve readability because I personally have an issue with white text on a dark background.

Suggestions / tips / feedback always welcome :wine_glass:

(Joe) #35

v0.51 is out please update.

This is somewhat of a “major” update. I’m moving away from the purple background and towards a more unified color palette. I’m also trying to make sure everything remains clean and maintainable.

With that said, I may have broken a few things here and there unintentionally, if something bugs you, please let me know.

Long story short, here’s a screenshot:


  • 11% reduction in code (common CSS)
  • !important is now down to 3
  • removed text shadow from links and text in quote blocks as it’s not needed.

(Joe) #36

The thin header is now back in the form of an optional theme component.

More information here:


Just wanted to say @lll I am loving watching these theme updates - its nice to see some solid themes coming through :slight_smile: and also with some productive updates of whats being done taking into account everyones feedback!


using the newest…i see this:

i’m using Vincent Dark. menu is hard to read!

(Diego Barreiro) #39

Hi :wave:

I love this theme, but there are some glitches:

(Joe) #40

This is awesome! :heart:

Thank you so much @mikechristopher :blush: Your kind words are very encouraging.
It’s great to know that the updates have some use.

I’ve been receiving some terrific feedback in this post (more than I could ever ask for ) so it’s only right that I match the amount of effort put in into these very helpful bug reports :+1:

v0.52 Is out please update

:sweat_smile: I agree. Fixed

I also missed this one earlier @8BIT but… this:

is now fixed. Mentions will have a different color and so will hashtags:

Awesome @barreeeiroo I’m glad you like it!

It looks like you have a bit of custom styling going. here’s what the list-controls element looks by default on Vincent

I’d be happy to help make things work together but it would have to be in a custom child theme specific to your Discourse.

Let me know.


This looks like some kind of signature, one that I have not seen before in Discourse. I don’t know how you created it, but I tried to go to the same page to get the selectors needed to style it and it was not there any more.

Can I get a link to a page where I can see this?


this theme keeps getting better and better! a few styling issues… one related to plugin:

21 PM

maybe left align “Online”

that’s a lot of space on the footer…

42 PM

seeing the “replying” while creating a response is off a bit.