☁️ Discourse Air Theme


How can I change the size of the welcome message please ?

If find it we have just to modify the CSS with a suitable size:

.custom-search-banner-wrap h1 {
    font-size: 3em;

Hello @jordan-vidrine
I use Air Theme with Topic List Thumbnails Theme Component - theme - Discourse Meta with the list mode & Air Theme. It works good but I’ve an issue I didn’t find how to resolve it.
I filled in the field desktop category page style to :
categories and recent topics

On the home page I have the categories ok but under the categories, the recent topics appear with a default template. And I would like to have the thumbnails with list mode instead.
How can I proceed please ?

For information the thumbnails with list mode works well inside the categories.


I do not believe that component is compatible with the topic list generated on the categories with recent topics page. All of the “Categories with…” pages are their own special template that this component will not affect.



I have an issue with [Double boxes bug “Modern Category + Group Boxes” Subcategories]. Any ideas how to fix ? (Double boxes bug "Modern Category + Group Boxes" Subcategories)

1 Like

This has been fixed :smile:


Can we edit the Category abbreviations in the boxes (as circled in this image)?

We’d really like to be able to update those abbreviations, as we have many categories with similar names (the names are iterations based on class/grade years), so they’re getting similar abbreviations. Also the abbreviations aren’t very meaningful for our community.

1 Like

You can replace the abbreviations with images:
Click the category → :wrench: wrench icon → Images

And if you want to hide just abbreviations, you could create a component and apply something like the following css:

.custom-category-boxes:not(.above-discovery-categories-outlet) .category-box .category-box-inner {
    .category-logo.no-logo-present {
        display: none;
        & + .category-details {
            grid-column: 1/3;
            padding: 1em 1.5em;
            width: 100%;


CleanShot 2023-12-11 at 20.24.12


CleanShot 2023-12-11 at 20.24.43


Hi @jordan-vidrine How can I show subcategories in the modern category box? I selected boxes and sub categories but I don’t see it showing up? Was this option not added to the component?


They are hidden by default, to show them, you will need to unhide them via custom CSS in a theme component.


Thanks, I found that out after I forked the repo. My issue is resolved.


Hello @jordan-vidrine, first of all congratulations for your theme which is very nice to use, however I’m new to discourse and I don’t know it very well but I want to add css but I can’t find the button to add custom css? Should I add a plugin to do this because on the default theme I could do it directly in the theme? Thank you in advance :slight_smile:


You can find info on how to customize your Discourse here → Beginner's guide to using Discourse Themes


I’m one more person who likes the theme, and starts my question by saying “thanks” and “well done”! :blush:

My question is: Is there a way to set default dark mode colour pallet?

Here’s what it looks like (with some bad Norwegian translation, sorry) where I’ve set the default theme, which is a light mode:

I’ve made custom pallets for light and dark mode (which are enabled as user selectable, and that works), but I can’t deactivate Air-Light and Air-Dark. And when I go to the site in Incognito with dark mode enabled on the device, I get served Air-Dark.

Oh, and another question: Where is the Dark Light Scheme Toggle supposed to be?

Clicking the profile pic top right gives me this when I’m logged into a test user:

And this when logged in as admin:

Here’s a link to my site, which is very much not done, if it helps to take a look. Thanks!

1 Like

Did you follow these guidelines?

This topic is for the dark light toggle component installed on the air theme. It should help you there. You can set it to be in the sidebar or the header.


Yes, the user can choose light and dark mode fine. What I’m working on is what a new user would see. The default before choosing.

If a new user comes to the site, and has light mode on the device, they get the pallet I’ve set in the screenshot. But if they have dark mode on the device, they get Air-Dark. That’s what I want to change.

Thanks for the link to the component! I didn’t realise it was a separate component. :slightly_smiling_face:


What do you want to show for users in dark mode?

1 Like

Ok, so I have four pallets installed/activated:

  • Mine-Light
  • Mine-Dark
  • Air-Light
  • Air-Dark

(I’d like to be able deactivate the last two, but that’s a separate issue. They’re nice! But I’m making a forum for a football (soccer) team, and have made pallets that correspond to the kit colours. :smiling_face:)

I have been able to set Mine-Light as the default pallet - so if a new user goes to the site with light mode on their device, they get served that.

But here’s the problem: If a new user goes to the site with dark mode on their device, they get served Air-Dark. And I want it to be Mine-Dark. (To get that now, they must manually select it in settings.)


What scheme do you have set here? → admin/site_settings/category/all_results?filter=dark%20mode


Ooh, setting my preferred scheme there worked - thanks! :raised_hands:t2:

A bit weird that I could only set default dark mode there (Site settings ➔ Basics), though - and only set default light mode in the theme settings. :upside_down_face:

I’d consider adding a little note, preferably with a link, under where you set the light mode in your theme settings. Something like:

This sets the default light mode pallet for your theme. Click here to set default dark mode./Go to Site settings ➔ Basics, to set default dark mode.

BTW., I’ve been having some fun with some transparecy and blur and your theme. :blush: (It gave me some z-index troubles, though - probably due to my noobness, which I’m still working out kinks with.) I especially liked how it gave the background swoosh some more weight!

Take a look if you want! (Still early days, though - as I assume you can see.)

1 Like

Hi there, this is Wayne Hsu from Niantic, Inc.
We are building our forum for 8thwall.com with Discourse Air Theme with custom color palette. And for some reason in the mobile view, the background of the main content container for the categories page (div id: main-outlet) is completely transparent and alpha is set to 0. I don’t see a way to update the color/alpha of the background.
I saw someone has a similar issue before
☁️ Discourse Air Theme - #187 by hequaye

And a suggestion was to change “desktop category page style” to something else in the settings (currently it’s set to Categories and Latest Topics), but I don’t see it’s helping as it’s setting for desktop view only.
Any thoughts on a solution on this?


Looks pretty nice!

1 Like