Mint Theme

	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

Features

A modern theme with a hint of mint.

Homepage (categories)

Latest

Topic

Advanced Search

This theme includes the following component:

• 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

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.

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 document

Perform check on document:

really nice theme

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

Thank you

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

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

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

Thank you so much Tomasz, appreciate it

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?

Thanks!

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"

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?

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

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:

Fixed both the issues via:

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 ?

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?

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

• discourse-search-banner
• Showcased Categories

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

Banner issue is now fixed via:

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

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.

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.

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

Hey! Thanks so much for the awesome theme!

I had a couple of quick questions about the category images and descriptions. At the moment the images are showing up quite small on the home page:

But they’re showing as normal size in the category edit settings:

Is there a way to maximise the size within the category box on the homepage?

Additionally, on the category page, is there a way to remove the image and/or description from the top of the page? Currently it looks like this:

Thank you so much in advance!

I have an issue on mobile, where the search in the banner is not shown. Does anyone know how to fix that?

@meghna Great theme! smooth and clean. Thanks for developing it!

Search bar is not showing on mobile and there is a rectangle around it on PC. Also, can’t find a custom CSS section to edit CSS. any suggestions/fix?

Thanks a lot for the theme.

This is by design. Search banner is not suited for mobile view.

Thank you!

As mentioned above search banner is intentionally disabled on mobile. I have fixed the search border issue via:

https://github.com/discourse/discourse-mint-theme/commit/dddfbb993ce4a144feb6bfe019a2109cb5ce322a

Hi folks,

Not sure if it was a change at some point or I’m just noticing it now because I’m branding the theme for myself. I noticed that the box shadow for the ‘more’ button is quite soft and fuzzy, especially when compared to the box shadow that exists for other buttons in the theme, such as new topic

More:

New Topic:

This theme is usually really consistent with its elements so it struck me as odd. I’m going to fix it in my version, but wanted to bring it up here.

Gorgeous!!! Love it!!!

Fixed in:

Thanks for bringing it to my notice

Is it possible to change the following:

• some default button colors are weird when selected (not matching the theme colors)
• default background (not of the search banner but of the full page)

Hello Meghna, this theme has some bug with this component (Showcased Categories).
Check this report: Showcased Categories - #45 by SidV

The “Post” button not showing up on “showcased categories” is an intentional design decision as per this code:

You can either fork the theme and make customizations as per your requirement or add a new theme component to enable post button by adding this CSS:

.custom-homepage-columns .col .header-wrapper .btn-primary {
  display: block;
}

I have this same problem. Is there a fix to this?

Kind regards

The profile page layout appears to be a bit broken (vs the stock dark theme):

Color Palette Editor does also look a bit funny.

Hi all. This is my first experience working with Discourse and servers in general. Tell me how to change the text on the banner, preferably in detail, otherwise I’m stupid =)

Welcome!

There is a theme component installed automatically with this theme.

It’s called Search Banner.

Usually theme components has settings or translations that you can change. To do so:

1. Go to Admin
2. Click on Themes
   
3. Click on Components and look for Discourse Search Banner component:
   
4. If you scroll down in the right panel, you will the translations. You can change them here:
   

If you are new to theme, I recommend reading the Beginner’s guide to using Discourse Themes!

Wow, turns out it’s so simple. Thanks a lot

Is it possible to change this green theme?

1. There is an extra space above the big block search - need it gone / if I click “recent” the space goes away - is this a bug?

2. How can I change the big green block to something of my brand / blueish

3. How can I make the header (Where the logo is) dark and so the logo will be the light version?

In the theme settings, you can edit the color palette:

I’m unsure why there is this CSS. You can overwrite it in a theme component:

.navigation-categories .search-banner {
  padding: 0
  margin: 0;
  height: auto
}

This is how the theme uses CSS for that specific banner.
You can adjust it to your needs.

.custom-search-banner-wrap {
  background: linear-gradient(
    270deg,
    var(--tertiary-medium) 0%,
    var(--tertiary) 100%
  );
}

Useful links:

• background - CSS: Cascading Style Sheets | MDN
• linear-gradient() - CSS: Cascading Style Sheets | MDN

This code didn’t work.

It does work on my side. Maybe it misses a height: auto, though.

Here is what I did. I created a theme component attached to the theme.

Inserted the CSS:

Then, the result:

You can see the custom CSS in the console:

Do you miss something in these steps?

That worked like a charm! Thank you so much!

It worked - does the custom CSS work throughout header etc etc etc? or would I need something specific for that?

WHERE is this box color coming from? I was able to “: none;” the circle on the other side…

This is the related CSS:

I think you can do the following:

#main-outlet:before{
  background: none;
}

Worked like a charm! Thanks!

Hi, I really like this theme, but the native mobile view looks horrible. If I manually switch the view to desktop in mobile, it does a perfect job of auto sizing to fit the device. I’m pretty new to discourse and unsure if this mobile view is a standard thing. Can I edit anything to make the theme look good on mobile. Thank you

Is it possible to change the text color within the search banner?

Sure,

You can create a new theme component, attach it to your theme, and add the following CSS:

.custom-search-banner-wrap {
    h1 {
        color: blue; /* headline*/
        
        &+p {
            color: red; /* subhead */
        }
    }
    
    .search-menu {
        .btn.search-icon.has-search-button-text {
            .d-icon {
                color: orange;  /* search button icon */
            }
            
            .d-button-label {
                color: orange;  /* search button text */
            }
        }
    }
}

Does it help?