Mint Theme

Customization Theme
,

AI-generated summary

The Mint Theme is an official Discourse theme described as modern with a “hint of mint.” The initial post by Discourse provides installation instructions, links to the repository, and screenshots of the theme’s appearance on the homepage, latest topics, and search pages. It specifies required settings, such as configuring the top menu and desktop category page style, and notes the inclusion of the Discourse Showcased Categories component. A welcome banner can be configured to appear on the homepage below the site header.

Community members have shared positive feedback and customization tips. IAmGav and P2W praised the design, while Rebecca_Chen asked how to remove the decorative square and circle in the background. tjot provided CSS code to remove these elements from desktop.scss. adalo_jesse inquired about changing colors, and meghna explained that users must fork the theme to modify variables.scss for background shapes and about.json for the secondary background color.

Technical issues were also addressed. cvx reported bugs with the composer’s gear button background and hover shapes, which meghna fixed via a GitHub commit. Pika noted that the search banner lacked rounded corners and full width; meghna confirmed this was fixed, along with an issue in the showcased categories plugin.

Additionally, Ivan_Rapekas shared a custom version of the theme supporting dark mode, code block styling, and wide page layouts, though he did not submit a pull request due to potential errors. Joe_Baylis asked about maximizing category image sizes on the homepage and removing images/descriptions from the top of category pages, highlighting minor layout concerns.

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

Install this theme

Features

A modern theme with a hint of mint. :slight_smile:

:herb: :ice_cube:

Homepage (categories)

Screenshot 2021-09-06 at 19.48.04
Screenshot 2021-09-06 at 19.48.041920×859 49.1 KB

Screenshot 2021-09-06 at 19.48.43
Screenshot 2021-09-06 at 19.48.431920×913 79.2 KB

Latest

Screenshot 2021-09-07 at 17.08.01
Screenshot 2021-09-07 at 17.08.011920×951 55 KB

Topic

Screenshot 2021-09-07 at 17.22.56
Screenshot 2021-09-07 at 17.22.561920×1400 120 KB

Advanced Search

Screenshot 2021-09-07 at 17.22.11
Screenshot 2021-09-07 at 17.22.111920×1421 127 KB

This theme includes the following component:

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

Welcome Banner

Go to Admin > Welcome banner (/admin/config/welcome-banner) page.

  • in Enabled on themes… dropdown select Mint Theme
  • in Page visibility dropdown select Homepage only
  • in Location dropdown select Below site header
  • 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.

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

Last edited by @yuriy 2025-12-03T14:01:14Z

Check documentPerform check on document:
67 Likes
Mint theme - How was this UI achieved?
How should I set up the same Mint theme section?
Our main screen looks very different with no top menu dropdowns, etc
Current Projects - September 2024
Mint theme - How was this UI achieved?
Deprecating the Search Banner theme component
2

really nice theme :slight_smile:

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

Thank you :smiley:

5 Likes
3

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

5 Likes
4

Beautiful theme! Thank you for creating this :slight_smile:

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 :pray:

3 Likes
5

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 :slight_smile:

6 Likes
6

Thank you so much Tomasz, appreciate it :smiley:

2 Likes
7

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?

2 Likes
8

Thanks! :slight_smile:

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%);

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"
9

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?

1 Like
10

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

image
image215×148 1.77 KB

12

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

image
image990×124 22.3 KB

1 Like
14

Fixed both the issues via:

https://github.com/discourse/discourse-mint-theme/commit/56157bbae8aeb0c809b2ec5f172597b18d423894

2 Likes
15

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 ?

16

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?

17

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

  • discourse-search-banner
  • Showcased Categories
18

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

1 Like
19

Banner issue is now fixed via:

https://github.com/discourse/discourse-mint-theme/commit/5e76e1ed3c248a6492e7fe77996ac98362a83a68

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

https://github.com/discourse/discourse-showcased-categories/commit/ad42b5c615dab017a7d0d99927445929587f6d39

4 Likes
20

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

изображение
изображение1389×1541 255 KB

discourse-mint.zip (5.1 KB) It may contain mistakes of course :slight_smile: 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.

1 Like
21

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.

1 Like
22

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

1 Like