Thème Mint

[Discourse]

	Summary	Mint - A modern theme with a hint of mint.
	Preview	Preview on Discourse Theme Creator
	Repository Link	https://github.com/discourse/discourse-mint-theme
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme

As this is an official theme maintained by the Discourse team, support issues, bug reports, ux suggestions, and requests for dev advice can be made in the respective categories here on Meta, and tagged with the appropriate theme tag. Click on a link below to get one started.

 Support  Bug  UX  Dev

Features

A modern theme with a hint of mint.

Homepage (categories)

Latest

Topic

Advanced Search

This theme includes following components:

• Discourse Search Banner
• Discourse Showcased Categories

Tips

Discourse Settings

Following setting changes are required for this theme to render properly:

• top menu needs to be set to category, latest, new, unread, top
• desktop category page style needs to be set to Boxes with Subcategories

Discourse Search Banner

In the options for the discourse-search-banner theme component, following changes are required for this theme to render properly:

• show-on options needs to be set to homepage
• plugin-outlet options needs to be set to above-main-container ^[1]
• background image can be set as per your requirement

Discourse Showcased Categories

In the options for the Showcased Categories theme component, following changes are required for this theme to render properly:

• select the feed one category and feed two category as per your requirement
• fill in the feed one title and feed two title as per your requirement
• recommended value for max list length is 3.

Let me know how this theme can be further improved. Enjoy!

Hosted by us? Themes are available to use on our Standard, Business, and Enterprise plans.

---

1. As of Oct. 4th 2022 and this commit, the theme itself will automatically set and order the theme components into the correct outlets. ↩︎

Last edited by @JammyDodger 2024-06-17T20:58:09Z

Check document

Perform check on document:

[IAmGav (Gavin Perch)]

really nice theme

I might even test it out with royal blue (my favourite colour) on my test site.

Thank you

[P2W (Mike Riddick)]

@meghna churning out the amazing themes. Looks great. I will deploy and play.

[Rebecca_Chen]

Beautiful theme! Thank you for creating this

I was wondering if it was a way for me to remove the square and circle in the background? Appreciate anything that can point me in the right direction

[tjot (Tomasz)]

remove

#main-outlet:after  {
  content: "";
  display: block;
  position: fixed;
  z-index: -1;
  width: 500px;
  height: 500px;
  border-radius: 2000px;
  background: $color-blue;
  right: 1px;
  top: -57px;
}

#main-outlet:before {
  content: "";
  display: block;
  position: fixed;
  z-index: -1;
  width: 300px;
  height: 300px;
  border-radius: 30px;
  background: -webkit-linear-gradient(146deg, rgba(74,247,255,.08) 55%, rgba(143,236,202,.52) 100%);
  // background: linear-gradient(146deg, rgba(74,247,255,.08) 55%, rgba(143,236,202,.52) 100%);
  background: linear-gradient(4deg, rgba(143,236,202,.29) 55%, rgba(74, 247, 255, 0.08) 100%);
  left: 70px;
  top: 350px;
  transform: rotate(74deg);
  transform-origin: 0 100%;
}

from desktop.scss and you should be good to go

[Rebecca_Chen]

Thank you so much Tomasz, appreciate it

[adalo_jesse (Jesse Haywood)]

This theme is awesome. Thank you for making this! I’m new to the Discourse scene. I know how to upload this theme, but I’m not sure how to change certain things. What I want to change are the colors of the blocks in the back (the circle and square). Additionally, I would like to change the background color. Do I download the theme file and edit it there, then create my own theme? Or is there an easier way?

[meghna (Meghna Jalan)]

@adalo_jesse

This theme is awesome. Thank you for making this!

Thanks!

@adalo_jesse

Do I download the theme file and edit it there

Yes. To change the colors you need to fork the theme and update the color code as per your requirement. Here’s how you can do it:

In variables.scss change the color code as per your liking:

$color-blue: #e5f8ff;
$color-square-gradient: linear-gradient(4deg, rgba(143,236,202,.29) 55%, rgba(74, 247, 255, 0.08) 100%);
$color-square-webkit-gradient: -webkit-linear-gradient(4deg, rgba(143,236,202,.29) 55%, rgba(74, 247, 255, 0.08) 100%);

@adalo_jesse

I would like to change the background color

To change the background color update the secondary color in about.json (note that this will also change text color of some buttons):

"secondary": "F6FBFC"

[Nick_Chomey]

I love this theme - it fits our project’s branding perfectly! However, if I turn on dark mode, the theme is messed up. Is this to be expected? Is there a way to prevent users from turning on dark mode?

[Nick_Chomey]

Il serait également formidable de pouvoir modifier le CSS depuis le front-end, comme avec les thèmes par défaut.

[cvx (Jarek Radosz)]

Il y a deux petits problèmes avec l’éditeur. Le bouton d’engrenage a un arrière-plan toujours actif, et la forme au survol du premier bouton ne correspond pas à la courbure du cadre :

[meghna (Meghna Jalan)]

Corrigé les deux problèmes via :

UX: better composer button styling

[Pika (Patrick)]

J’aime beaucoup votre thème et je l’ai installé.
L’arrière-plan de ma bannière de recherche n’a pas de coins arrondis et n’est pas pleine largeur.
Comment puis-je le changer pour qu’il corresponde à votre mise en page ?

[meghna (Meghna Jalan)]

Il est possible qu’un autre thème ou composant interfère avec le style du thème mint. Pouvez-vous essayer de désactiver les autres thèmes/composants que vous auriez installés ?

[Pika (Patrick)]

C’est une installation propre avec le thème par défaut inactif et uniquement ces composants :

• discourse-search-banner
• Showcased Categories

[meghna (Meghna Jalan)]

C’est étrange. Pouvez-vous m’envoyer l’URL de votre instance Discourse par message privé et je pourrai y jeter un œil ?

[meghna (Meghna Jalan)]

@Pika

L’arrière-plan de ma bannière de recherche n’a pas de coins arrondis et n’occupe pas toute la largeur.

Le problème de bannière est maintenant résolu via :

UX: custom banner styling for mint theme (#3)

Il y avait aussi un problème dans le plugin “showcased categories” que Patrick m’a signalé. Je l’ai également résolu.

UX: fix header for showcased category boxes (#11)

[Ivan_Rapekas]

Salut, j’ai joué avec le mode sombre sur un appareil avec un joli thème Mint. J’ai apporté quelques modifications pour prendre en charge le mode sombre. Juste pour des tests.

discourse-mint.zip (5.1 Ko) Il peut contenir des erreurs bien sûr Pour cette raison, je ne créerai pas de PR à partir de github.

J’ai apporté quelques modifications pour les blocs de code, le formatage de style gitlab, la page large, etc… Je n’ai pas testé sur mobile.

[meghna (Meghna Jalan)]

Merci pour vos efforts, Ivan ! J’ai examiné votre travail et il y a des modifications personnalisées qui n’ont pas besoin d’être dans le cœur. Je vais examiner les modifications spécifiques au mode sombre et les apporterai au cœur après d’autres tests.

[Ivan_Rapekas]

De rien, Meghna ! Je pense qu’il suffirait d’appliquer la valeur revert à certains éléments blancs.