Air Theme

[tynaut (Ty Correll)]

@dschwerin-teachforau

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.

You can replace the abbreviations with images:
Click the category → 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%;
        }
    }
}

Before:

After:

[digitaldominica]

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?

[jordan-vidrine]

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

[digitaldominica]

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

[Kevin7 (Kévin .)]

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

[jordan-vidrine]

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

[ErlendMS (Erlend Markussen Saltnes)]

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

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!

[jordan-vidrine]

@ErlendMS

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.

Did you follow these guidelines?

@jordan-vidrine

For this to work properly, at least 2 color scheme choices need to be enabled in your https://discourse.jordanvidrine.com/admin/customize/colors area. At least two colors need to have color scheme can be selected by users enabled.

Once this is done, users should be able to choose between two color schemes as their light and dark preferences in their user preferences interface menu.

@ErlendMS

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

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.

Dark/Light Mode Toggle

Summary Dark/Light Mode Toggle adds a clickable toggle color scheme button in the hamburger menu. The toggle switches between a light or dark color scheme for one theme. Repository Link https://github.com/discourse/discourse-color-scheme-toggle New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component This component allows a dark/light mode toggle icon on your Discourse forum. It will also au…

[ErlendMS (Erlend Markussen Saltnes)]

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.

[jordan-vidrine]

@ErlendMS

But if they have dark mode on the device, they get Air-Dark. That’s what I want to change

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

[ErlendMS (Erlend Markussen Saltnes)]

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. )

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.)

[jordan-vidrine]

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

[ErlendMS (Erlend Markussen Saltnes)]

Ooh, setting my preferred scheme there worked - thanks!

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.

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. (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.)

[Wayne_Hsu]

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?
Thanks!

[jordan-vidrine]

@ErlendMS

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

Looks pretty nice!

[HisFocus (Tim)]

I think the Air Theme is so nice, however, the option to edit (or add) CSS is not there when I visit ADMIN > CUSTOMIZE > Air Theme. Am I missing something? https://www.communiteq.com/ is hosting my site. This is what I see:

[Moin]

You have to add your own component

Discourse Air Theme

Go here admin/customize/themes Click on components Click Install Click create new & give it a name Click on the new component in the components list Click Edit Html/css Add the linked code above to the common css file. Add this new component to the currently used theme

[HisFocus (Tim)]

@Moin! I’m brand new to Discourse, but WOW! This just keeps getting better and better! Thank you so much!

Also, please accept my apologies, as I see that when reading through this thread, this question has been asked and answered about 5,000 times.

[Arkshine]

No need to apologize. It may not be commonly known that you can do that!

Here’s a guide if you want to explore the theme/components:

Beginner's guide to using Discourse Themes

This is a crash course in Discourse theme basics. The target audience is everyone who is not familiar with Discourse themes. If you’ve already used Discourse theme / theme components, this guide is probably not something you need to read. What are themes and theme components? A theme or theme component is a set of files packaged together designed to either modify Discourse visually or to add new features. Let’s start with themes. Themes In general, themes are not supposed to be compatible …

[ElComputer]

Thank you for the theme. I would like to use adobe fonts. do i have to edit the theme file? or what is the smartest way to do that?

I have also seen the header logo is kinda small and the ri%ght hand side search bar can and login can look more like a button than icon… is that a plugin/compontent or css