# Discourse Vincent theme
**URL:** https://meta.discourse.org/t/discourse-vincent-theme/76662
**Category:** Theme
**Tags:** broken
**Created:** [December 23, 2017, 12:49pm UTC](https://meta.discourse.org/t/discourse-vincent-theme/76662 "2017-12-23T12:49:19Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [December 23, 2017, 12:49pm UTC](https://meta.discourse.org/t/discourse-vincent-theme/76662/1 "2017-12-23T12:49:19Z")
**This post is a WIP**
**Beta** testers needed for a new theme.
* * *
**Theme repo:**
> [GitHub - discourse/discourse-vincent-theme: v0.77 · GitHub](https://github.com/discourse/discourse-vincent-theme)
## Compressed Screenshots:
_will look much better on your screen, image compression cases artifacts / blur. Also, I will update the screenshots as the theme takes shape_
**Homepage**
**Composer**
**Topic page**
**Topic replies**
* * *
> **Color schemes**
>
> **Vincent Dark Blue**
>
> 
>
> **Vincent Dark Red**
>
> 
>
> **Vincent Dark Green**
>
> 
>
> **Vincent Dark Magenta**
>
> 
>
> **Vincent Dark Orange**
>
> 
>
> **Vincent Dark Teal**
>
> 
* * *
> **custom backgrounds**
>
> (these are samples only, you need to provide your own background images)
>
> 
>
> 
>
> 
* * *
## Installation:
> [@Installing a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682):
>
> bookmark This is a guide for installing and managing themes and theme components in Discourse. person_raising_hand Required user level: Administrator Installing and customizing themes can significantly improve the look and feel of your Discourse site. You can easily import and manage themes and their components through the Discourse admin panel. This guide covers: Importing new themes and theme components Adding theme components to a theme Managing automatic updates Additional resourc…
**Don’t forget to set the color scheme to one of the color schemes that come with the theme**
* * *
The thin header is optional. If you want the thin header you need to add a theme component which you can find here:
> [@Thin Header](https://meta.discourse.org/t/thin-header-theme-component/77220):
>
> discourse2Summary Thin Header reduces the height of the default Discourse header.eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/thin-header)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-thin-header-theme-component](https://github.com/discourse/discourse-thin-header-theme-component)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Features Before After It reduces the header height by about …
* * *
This is a beta theme. Kindly report any issues in this post.
## Feedback / suggestions welcome
---
### Author:  [@schap](https://meta.discourse.org/u/schap)
#### Post date: [March 10, 2020, 3:23pm UTC](https://meta.discourse.org/t/discourse-vincent-theme/76662/261 "2020-03-10T15:23:10Z")
Anyone having issues with creating Categories? Everytime I click the hamburger menu it just adds a “+” under neath and does not take me anywhere.
---
### Author:  [@cjk77](https://meta.discourse.org/u/cjk77)
#### Post date: [March 11, 2020, 11:09am UTC](https://meta.discourse.org/t/discourse-vincent-theme/76662/262 "2020-03-11T11:09:39Z")
Same behavior here ☹
I’d not noticed, as I haven’t created a new category for a while.
---
### Author:  [@simon](https://meta.discourse.org/u/simon)
#### Post date: [March 11, 2020, 5:21pm UTC](https://meta.discourse.org/t/discourse-vincent-theme/76662/263 "2020-03-11T17:21:15Z")
> [@schap](#):
>
> Anyone having issues with creating Categories?
I just tested this and am running into the same issue. It seems that the code that’s used to create the category admin dropdown has changed on Discourse. Updating the theme to use the following code to create the dropdown seems to fix the issue:
```javascript
{{#if showCategoryAdmin}}
{{categories-admin-dropdown
onChange=(action "selectCategoryAdminDropdownAction")
}}
{{/if}}
```
We will get this fixed very soon.
---
### Author:  [@schap](https://meta.discourse.org/u/schap)
#### Post date: [March 17, 2020, 12:03pm UTC](https://meta.discourse.org/t/discourse-vincent-theme/76662/264 "2020-03-17T12:03:26Z")
> [@simon](#):
>
> {{#if showCategoryAdmin}} {{categories-admin-dropdown onChange=(action “selectCategoryAdminDropdownAction”) }} {{/if}}
Newbie question but where would I apply this?
---
### Author:  [@simon](https://meta.discourse.org/u/simon)
#### Post date: [March 17, 2020, 7:33pm UTC](https://meta.discourse.org/t/discourse-vincent-theme/76662/265 "2020-03-17T19:33:45Z")
> [@schap](#):
>
> where would I apply this?
I applied it by editing the theme’s `/head` section. I replaced this block of code:
```javascript
{{#if showCategoryAdmin}}
{{categories-admin-dropdown
create=createCategory
reorder=reorderCategories}}
{{/if}}
```
with:
```javascript
{{#if showCategoryAdmin}}
{{categories-admin-dropdown onChange=(action "selectCategoryAdminDropdownAction") }}
{{/if}}
```
Having to manually edit the theme isn’t ideal though. We will get this fixed so that the change can be made by clicking the theme’s “Update to Latest” button.
---
### Author:  [@Anatolia](https://meta.discourse.org/u/Anatolia)
#### Post date: [March 26, 2020, 11:08pm UTC](https://meta.discourse.org/t/discourse-vincent-theme/76662/266 "2020-03-26T23:08:22Z")
How can I change the main text color of this theme?
Also this issue still continues:
> [@InceptionTime](#):
>
> While in a category, the top bar isn’t aligned properly and a button is visually broken:
Those ‘‘new’’ and ‘‘unread’’ menus should be invisible unless there’s a new topic as it is on original Discourse theme.
> [@Johani](#):
>
> Finally, I started to work on Vincent Light ( **Not** included in the repo yet) will update when it’s ready to release.
Is it still on progress?
---
### Author:  [@Bill](https://meta.discourse.org/u/Bill)
#### Post date: [April 19, 2020, 2:13pm UTC](https://meta.discourse.org/t/discourse-vincent-theme/76662/267 "2020-04-19T14:13:33Z")
Yes, same thing for me. I fixed it by switching to a different them, creating the category, then switching back to the Vincent theme.
---
### Author:  [@Bill](https://meta.discourse.org/u/Bill)
#### Post date: [April 19, 2020, 2:39pm UTC](https://meta.discourse.org/t/discourse-vincent-theme/76662/268 "2020-04-19T14:39:35Z")
How do I get access to the extra color schemes shown in the original thread? I want to switch to the Dark Green one but I only see Vincent Dark available in my settings.
---
### Author:  [@CaZsm](https://meta.discourse.org/u/CaZsm)
#### Post date: [September 1, 2020, 3:28pm UTC](https://meta.discourse.org/t/discourse-vincent-theme/76662/270 "2020-09-01T15:28:24Z")
Since this topic has been moved to #customization:theme:broken-theme, it seems likely that this theme is no longer being maintained. I have a set of tweaks I use on our forum with a chrome extension since vincent worked well enough on its own, but we didn’t have the resources to maintain our own fork. They’re a little bit opiniony, make some tweaks for personal taste, don’t cover everything, and may be a little outdated or intended to fix bugs that were fixed officially by now, but maybe they’re useful to someone.
```css
/ ************************************
Mobile-specific fixes / tweaks
************************************ /
/* Fix bad padding */
.form-vertical,
.user-main .about .primary,
.user-main .about .secondary,
.user-main .user-content {
padding: 15px;
}
/* Fix header logo cut off at bottom */
.d-header #site-logo {
max-height: 2.6em;
}
/* Fix inconsistently sized lock/unlist messages, fix mysterious space on right side of threads somehow */
.small-action {
width: 100%;
}
/* Fix youtube embeds not being centered */
.lazyYT-container {
margin: 12px 20px;
}
/* Fix topic list padding on tablets */
#list-area .contents tbody td {
padding: 10px 15px;
}
/ ************************************
Generic and desktop-specific fixes / tweaks
************************************ /
/* Fix font getting overridden by .font-helvetica on html */
html {
font-family: "Assistant", sans-serif !important;
}
/* Square category color badges */
span.badge-category-bg, span.badge-category-parent-bg, span.badge-category-parent-bg+.badge-category-bg {
border-radius: 0;
}
.badge-wrapper.bullet .badge-category-parent-bg,
.badge-wrapper.bullet .badge-category-parent-bg+.badge-category-bg,
.extra-info-wrapper .badge-wrapper.bullet .badge-category-parent-bg {
width: 4px;
min-width: 4px;
}
span.badge-category-parent-bg {
border-right: 1px solid rgba(0,0,0,0.2);
}
span.badge-category-parent-bg+.badge-category-bg {
border-left: 1px solid rgba(0,0,0,0.2);
}
/* Fix threads being too skinny and in strange alignment with controls at bottom of page */
.topic-post {
max-width: 758px;
}
.topic-post .embedded-posts {
width: 758px;
}
#topic-title .title-wrapper {
margin-left: 0;
margin-right: 0;
width: 758px;
}
#topic-title, .posts-wrapper {
margin: 0;
width: 758px;
}
html.desktop-view.not-mobile-device .topic-body {
max-width: 758px;
}
.topic-body {
width: 100%;
}
/* Fix poor contrast on thread list sort labels when new thread banner is visible */
.show-more.has-topics .alert {
background: rgba(40,42,49,1);
}
.alert.alert-info {
background: rgba(19,20,24,1);
}
/* Make code blocks blend better */
p>code, li>code, pre>code {
background: rgba(255,255,255,0.09);
}
/* Fix youtube embeds missing padding */
.lazyYT.lazyYT-container {
width: 100% !important;
}
/* Fix category left colored lines not reaching bottom of category container */
.category-list tbody .category {
display: table-cell;
}
/* Better subcategory layout (desktop only) */
.not-mobile-device .category-list .subcategories {
display: flex;
flex-direction: column;
}
.not-mobile-device .category-list .subcategories .subcategory .badge.new-posts {
display: inline-block;
margin: 0 5px;
}
.not-mobile-device .category-list .subcategories .subcategory {
height: 21px;
align-items: center;
}
/* Highlight pinned posts */
.topic-list-item.pinned {
background: rgba(200,200,255,0.06);
}
.topic-list tbody tr:nth-of-type(even).pinned {
background: rgba(200,200,255,0.04);
}
/* Better appearance and contrast on disabled New Topic button */
.list-controls #create-topic[disabled],
.list-controls #create-topic.disabled {
background-color: rgba(255,255,255,0.04);
color: #888
}
.list-controls #create-topic[disabled]:hover,
.list-controls #create-topic.disabled:hover {
background-color: rgba(255,255,255,0.06);
}
.list-controls #create-topic[disabled] svg,
.list-controls #create-topic.disabled svg {
color: inherit;
}
/* Larger letter spacing for better readability */
* {
letter-spacing: 0.2px;
}
/* Larger fonts for better readability */
a {
font-size: 95%; /* theme sets 90% */
}
.search-link .blurb {
font-size: 1em;
}
/* Fix wrongly colored UI on search page */
.search-container .search-advanced-sidebar .search-advanced-title,
.search-container .search-advanced-sidebar .search-advanced-filters {
background: rgba(255,255,255,0.04);
}
.search-container .search-advanced-sidebar .search-advanced-title.btn {
background: rgba(255,255,255,0.04);
}
.search-advanced-options {
background: rgba(0,0,0,0.3);
margin-bottom: 10px;
}
/* Fix floating border around composer for profile bio */
.user-preferences .bio-composer {
border: none;
}
/* Fix collapse button exiting frame on profile page */
.user-main .about .details .primary,
.user-main .about.collapsed-info .details .primary {
width: auto;
}
/* Fix post notice size and border color */
.post-notice {
width: calc(100% - 1.6em);
border-top: none;
}
/* Fix post links container size */
.post-links-container {
margin-left: 0;
}
/* Fix bio scroll bar not being to the right */
.user-main .about .details .primary .bio {
max-width: none;
}
/* Category link hightlighting */
.category-list .subcategories .subcategory .badge-wrapper:hover .category-name {
color: white;
}
.category-list .subcategories .subcategory .badge-wrapper .category-name {
transition: color 0.3s;
}
/* Fix hidden posts being split horizontally by unhide link */
.post-hidden {
position: relative;
}
.post-hidden .expand-hidden {
position: absolute;
top: 36px;
left: 0;
z-index: 1;
}
.post-hidden .post-menu-area,
.post-hidden .expand-hidden {
opacity: 0.5;
}
}
```
---
### Author:  [@P2W](https://meta.discourse.org/u/P2W)
#### Post date: [September 1, 2020, 8:15pm UTC](https://meta.discourse.org/t/discourse-vincent-theme/76662/271 "2020-09-01T20:15:03Z")
Would love to try this out when it’s fixed.
---
### Author:  [@TotalSoft](https://meta.discourse.org/u/TotalSoft)
#### Post date: [September 6, 2020, 5:33pm UTC](https://meta.discourse.org/t/discourse-vincent-theme/76662/272 "2020-09-06T17:33:41Z")
One of the most beautiful themes. 😍
Why did you stop developing the theme @Johani? I can help with a sum of money if you or someone else can continue the work for all of us.
---
### Author:  [@jsha](https://meta.discourse.org/u/jsha)
#### Post date: [November 23, 2021, 7:31pm UTC](https://meta.discourse.org/t/discourse-vincent-theme/76662/274 "2021-11-23T19:31:52Z")
FYI, we have found a recent display problem that manifested using this theme: [Hosted: Message body resizing while scrolling](https://meta.discourse.org/t/hosted-message-body-resizing-while-scrolling/209959).
I see there were commits pushed to the theme repo 21 days ago, so I think it is still being maintained: [Commits · discourse/discourse-vincent-theme · GitHub](https://github.com/discourse/discourse-vincent-theme/commits/master).
---
### Author:  [@darkpixlz](https://meta.discourse.org/u/darkpixlz)
#### Post date: [July 12, 2022, 2:53am UTC](https://meta.discourse.org/t/discourse-vincent-theme/76662/275 "2022-07-12T02:53:30Z")
Is there any solution to this?
---
### Author:  [@MoltonMontro](https://meta.discourse.org/u/MoltonMontro)
#### Post date: [September 25, 2022, 8:38pm UTC](https://meta.discourse.org/t/discourse-vincent-theme/76662/276 "2022-09-25T20:38:31Z")
> [@darkpixlz](#):
>
> Is there any solution to this?
I know that this is a couple months late, but…
Nowadays, I use my own fork of the project which doesn’t suffer from these problems. But if you’d like a simple CSS solution, I still have some of my older fixes.
Here’s a couple of the ones you might find to be relevant:
```css
/* Fixes excessive padding at top of page.
* NOTE: This should get rid of the big gap b/n your page content & the top of the page.
*/
#main-outlet {
padding-top: 1.8em;
}
/* Wrap should be centered, and only take up a certain width of the screen.
* NOTE: This specific one may help to fix your topic/posts layout issue!
*/
.wrap {
max-width: 1110px;
/* max-width: 60vw;*/
}
/* Fixes issues with the layout of the Categories list.
* NOTE: There's far better ways to do this.
*/
#topic-footer-buttons, .top-title-buttons, .user-badge, #user-card.show-badges .more-user-badges, .category-list tbody .category, .nav-pills>li, .layouts-nav-button>li {
display: revert;
}
.nav-pills>li {
display: flex;
}
/* Make bolded text actually bold.
* NOTE: Alternatively, change the default font-weight for the theme to 400.
* The original project has it set to 300 as the default weight used by everything, which causes bold/strong text to use something like 400 as they're set to "bolder".
* On most fonts, that is literally indistinguishable from 300.
*/
b, strong {
font-weight: 700;
}
/* Removes margin on the container for internal crosslinks listed under posts. */
.post-links-container {
margin-left: 0;
}
/* Improves design of "last visit" text in topic list. */
.topic-list .topic-list-item-separator .topic-list-data span {
color: var(--primary);
border: 1px solid var(--secondary-very-high);
font-weight: bold;
}
.topic-list .topic-list-item-separator .topic-list-data span {
background-color: var(--secondary);
}
/* Improves design of "last visit" text in topic post. */
.small-action.topic-post-visited .topic-post-visited-line {
border-bottom: none;
}
.small-action.topic-post-visited .topic-post-visited-line .topic-post-visited-message {
color: var(--primary);
border: none;
font-weight: bold;
}
.small-action.topic-post-visited .topic-post-visited-line .topic-post-visited-message {
background-color: transparent;
}
```
---
### Author:  [@twofoursixeight](https://meta.discourse.org/u/twofoursixeight)
#### Post date: [October 29, 2022, 5:42pm UTC](https://meta.discourse.org/t/discourse-vincent-theme/76662/277 "2022-10-29T17:42:14Z")
Vincent theme bugs out on mobile when using it.
It also has no theme selector for some reason:
Compared to a different theme:
---
### Author:  [@darkpixlz](https://meta.discourse.org/u/darkpixlz)
#### Post date: [October 29, 2022, 5:57pm UTC](https://meta.discourse.org/t/discourse-vincent-theme/76662/278 "2022-10-29T17:57:26Z")
Seems like that’s made it worse.
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [October 29, 2022, 6:11pm UTC](https://meta.discourse.org/t/discourse-vincent-theme/76662/279 "2022-10-29T18:11:50Z")
This theme is currently tagged as #broken, so will likely not be compatible with the Latest versions or theme components.
---
### Author:  [@darkpixlz](https://meta.discourse.org/u/darkpixlz)
#### Post date: [October 29, 2022, 7:33pm UTC](https://meta.discourse.org/t/discourse-vincent-theme/76662/280 "2022-10-29T19:33:37Z")
Definitely sad, this was a great theme when it worked.
---
### Author:  [@Kartoon](https://meta.discourse.org/u/Kartoon)
#### Post date: [February 8, 2023, 3:28pm UTC](https://meta.discourse.org/t/discourse-vincent-theme/76662/281 "2023-02-08T15:28:24Z")
Somehow this had been working the same as always (with that css posted further up in the topic that fixed the borders) for me until I stupidly saw a new update today…
Now it says there’s an error
`Error: @use rules must be written before any other rules. ╷ 4 │ @use "sass:math"; │ ^^^^^^^^^^^^^^^^ ╵ /var/www/discourse/common.scss 4:1 root stylesheet`
And is COMPLETELY completely broken now lol.
If your install was previously still working like mine was it’s easy to fix. Download the theme from github, open common.css and change
```plaintext
// functions --------------------------------------------------------------------------------
// Calculate brightness value
@use "sass:math";
@function brightness($color) {
@return math.div(red($color) + green($color) + blue($color), 255 * 3);
}
// to base color
```
(This is the new change that broke it) to how it used to be below
```plaintext
// functions --------------------------------------------------------------------------------
// Calculate brightness value
@function brightness($color) {
@return (red($color) + green($color) + blue($color)) / (255 * 3);
}
// to base color
```
Which is what it had, then zip and upload to your site and use your own new installation. Or try to fix what he broke to see what he was trying to do.
Keep in mind this will upload it as an entirely new theme, and it’ll no longer be linked to the github if there’s future updates, so you might want to keep the original install (un-selectable) in case it gets fixed/support is picked back up. On the flip side installing it yourself allows to to fix or change what you want since it’s not actively managed anymore
[Next page](https://meta.discourse.org/t/discourse-vincent-theme/76662.md?page=2)