Mint, a modern theme for Discourse 🌿

[meghna (Meghna Jalan)]

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

Install this theme

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!

---

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

[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]

It would also be great to be able to edit the CSS from the front-end, like with the default themes.

[CvX (Jarek Radosz)]

There are two small issues with the composer. The gear button has an always-on background, and the first button’s on-hover shape doesn’t match the curvature of the frame:

[meghna (Meghna Jalan)]

Fixed both the issues via:

UX: better composer button styling

[Pika (Patrick)]

I really like your theme and installed it.
My search banner background is not with rounded corners and full width.
How can I change this to your layout ?

[meghna (Meghna Jalan)]

There might be a possibility that another theme or component is interfering with the mint theme styling. Can you try disabling other themes/components that you may have installed?

[Pika (Patrick)]

it’s a clean install with inactieve Default theme and only these componets:

• discourse-search-banner
• Showcased Categories

[meghna (Meghna Jalan)]

That is odd. Can you PM me the URL of your Discourse instance and I can have a look?

[meghna (Meghna Jalan)]

@Pika

My search banner background is not with rounded corners and full width.

Banner issue is now fixed via:

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

There was also an issue in showcased categories plugin that Patrick brought into my notice. Fixed that too.

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

[Ivan_Rapekas]

Hi, I played with dark mode on device with nice Mint theme. I made some changes to support dark mode. Just for tests.

discourse-mint.zip (5.1 KB) It may contain mistakes of course For this reason I won’t create a PR from github.

I made some modifications for blocks of code, gitlab-style formatting, wide page etc… Mobile device did not test.

[meghna (Meghna Jalan)]

Thank you for the efforts here Ivan! I reviewed your work and there are some custom changes that does not need to be in the core. I’ll look into the dark mode specific changes and will make them in core after some more testing.

[Ivan_Rapekas]

You are welcome, Meghna! I think, it would enough to apply revert value to some elements with white.