# 空气主题

**URL:** https://meta.discourse.org/t/air-theme/197703
**Category:** Theme
**Tags:** air-theme
**Created:** [2021年七月20日 20:24 UTC](https://meta.discourse.org/t/air-theme/197703 "2021-07-20T20:24:30Z")
**Posts on this page:** 20
**Page:** 14

<div class="post-metadata">

### Author: ![tynaut](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tynaut/32/276689_2.png) [@tynaut](https://meta.discourse.org/u/tynaut)
#### Post date: [2023年十二月12日 02:24 UTC](https://meta.discourse.org/t/air-theme/197703/463 "2023-12-12T02:24:57Z")

</div>

[quote=“Danielle Schwerin, post:462, topic:197703, username:dschwerin-teachforau”]  
我们非常希望能够更新这些缩写，因为我们有许多类别名称相似（名称是基于班级/年级年份的迭代），因此它们会得到相似的缩写。而且缩写对我们的社区来说意义不大。  
[/quote]您可以用图片替换缩写：  
点击类别 → 🔧 扳手图标 → 图片

![CleanShot 2023-12-11 at 20.25.22](https://cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/optimized/4X/a/4/9/a49cf0aa79e876065a4259818c10f2023612468a_2_690x41.png)

如果您只想隐藏缩写，可以创建一个组件并应用类似以下的 CSS：

```plaintext
.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](https://global.discourse-cdn.com/meta/original/4X/8/9/f/89f2e3702d160fe3395881c3865365b642ec591b.png)

之后：

 ![CleanShot 2023-12-11 at 20.24.43](https://global.discourse-cdn.com/meta/original/4X/7/d/9/7d9da2ca8201c78f3ae2df69796d9b63fef1de3c.png)

---

<div class="post-metadata">

### Author: ![digitaldominica](https://avatars.discourse-cdn.com/v4/letter/d/97f17d/32.png) [@digitaldominica](https://meta.discourse.org/u/digitaldominica)
#### Post date: [2023年十二月24日 01:18 UTC](https://meta.discourse.org/t/air-theme/197703/464 "2023-12-24T01:18:49Z")

</div>

您好 @jordan.vidrine，我该如何在现代类别框中显示子类别？我选择了“框”和“子类别”，但没有看到它显示出来？此选项未添加到组件中吗？

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [2023年十二月26日 14:17 UTC](https://meta.discourse.org/t/air-theme/197703/465 "2023-12-26T14:17:00Z")

</div>

默认情况下它们是隐藏的，要显示它们，您需要通过主题组件中的自定义 CSS 来取消隐藏它们。

---

<div class="post-metadata">

### Author: ![digitaldominica](https://avatars.discourse-cdn.com/v4/letter/d/97f17d/32.png) [@digitaldominica](https://meta.discourse.org/u/digitaldominica)
#### Post date: [2023年十二月26日 15:45 UTC](https://meta.discourse.org/t/air-theme/197703/466 "2023-12-26T15:45:17Z")

</div>

谢谢，我在 fork 了该仓库后就知道了。我的问题已解决。

---

<div class="post-metadata">

### Author: ![Kevin7](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kevin7/32/110326_2.png) [@Kevin7](https://meta.discourse.org/u/Kevin7)
#### Post date: [2024年一月10日 20:43 UTC](https://meta.discourse.org/t/air-theme/197703/469 "2024-01-10T20:43:57Z")

</div>

您好 @jordan.vidrine，首先恭喜您的主题非常棒，但是我是 Discourse 新手，对它不太了解，但我想添加 CSS，却找不到添加自定义 CSS 的按钮？我应该为此添加插件吗，因为在默认主题中我可以直接在主题中进行操作？ 提前感谢您 🙂

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [2024年一月10日 21:52 UTC](https://meta.discourse.org/t/air-theme/197703/470 "2024-01-10T21:52:56Z")

</div>

您可以在此处找到有关如何自定义 Discourse 的信息 → [Beginner's guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966)

---

<div class="post-metadata">

### Author: ![ErlendMS](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/erlendms/32/355598_2.png) [@ErlendMS](https://meta.discourse.org/u/ErlendMS)
#### Post date: [2024年一月18日 08:24 UTC](https://meta.discourse.org/t/air-theme/197703/471 "2024-01-18T08:24:28Z")

</div>

我还有一个人喜欢这个主题，我的问题是：“谢谢”和“做得好”！😊

我的问题是： **有没有办法设置默认的暗模式颜色方案？**

这是我设置默认主题（浅色模式）时的样子（抱歉，挪威语翻译得不好）：

 ![CleanShot 2024-01-18 at 09.18.01@2x](https://global.discourse-cdn.com/meta/original/4X/3/b/d/3bd205a68788fa0c4220771eac1e323abb48e05c.png)

我已经为浅色模式和暗模式创建了自定义方案（它们可以作为用户可选项启用，并且有效），但我无法禁用 Air-Light 和 Air-Dark。当我以隐身模式访问设备上启用了暗模式的网站时，我会被提供 Air-Dark。

* * *

哦，还有另一个问题： **暗光方案切换器应该在哪里？**

当我登录一个测试用户时，点击右上角的个人资料图片会显示这个：

 ![CleanShot 2024-01-18 at 09.21.06@2x](https://global.discourse-cdn.com/meta/original/4X/5/7/8/57821abb22336431d0b6678ed245907172c95880.png)

当我以管理员身份登录时，会显示这个：

 ![CleanShot 2024-01-18 at 09.23.17@2x](https://global.discourse-cdn.com/meta/original/4X/e/b/5/eb505a20d2e4dac894bec9fddbf613e8e41609d4.png)

[这是我的网站链接](https://nettsida.no)，还没完成，如果能帮到您的话。谢谢！

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [2024年一月18日 18:47 UTC](https://meta.discourse.org/t/air-theme/197703/472 "2024-01-18T18:47:53Z")

</div>

> [@ErlendMS](#):
>
> 我已经为浅色和深色模式制作了自定义调色板（它们已启用，用户可选，并且有效），但我无法禁用 Air-Light 和 Air-Dark。当我以隐身模式访问网站时，设备已启用深色模式，我获得了 Air-Dark。

您是否遵循了这些指南？

> [@jordan-vidrine](#):
>
> 为了使其正常工作，您需要在 `https://discourse.jordanvidrine.com/admin/customize/colors` 区域启用至少 2 个配色方案选择。至少需要启用两个颜色的 `color scheme can be selected by users`。
> 
> ![image](https://global.discourse-cdn.com/meta/original/3X/b/7/b70d149b335128a5f71914db3f703def1f48376b.png)
> 
> 完成此操作后，用户应该可以在其用户偏好设置界面菜单中选择两个配色方案作为他们的 `light` 和 `dark` 偏好设置。
> 
> ![image](https://global.discourse-cdn.com/meta/original/3X/1/8/184e79ce3851b9feb965117b68a97e5e7de00b93.png)

> [@ErlendMS](#):
>
> 哦，还有另一个问题： **深色浅色方案切换按钮应该在哪里？**

此主题是关于安装在 air 主题上的深色浅色切换组件的。它应该能帮助您。您可以将其设置在侧边栏或标题中。

> [@Dark/Light Mode Toggle](https://meta.discourse.org/t/dark-light-mode-toggle/215585?u=jordan-vidrine):
>
> discourse2Summary 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.hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-color-scheme-toggle](https://github.com/discourse/discourse-color-scheme-toggle)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Features This component allows a dark/light mode toggle icon on your Discourse forum. It…

---

<div class="post-metadata">

### Author: ![ErlendMS](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/erlendms/32/355598_2.png) [@ErlendMS](https://meta.discourse.org/u/ErlendMS)
#### Post date: [2024年一月18日 19:01 UTC](https://meta.discourse.org/t/air-theme/197703/473 "2024-01-18T19:01:46Z")

</div>

是的，用户可以很好地选择浅色和深色模式。我正在研究的是新用户会看到什么。选择之前的默认设置。

如果新用户访问网站，并且设备上开启了浅色模式，他们将看到我截图中设置的调色板。但如果他们的设备上开启了深色模式，他们将看到 Air-Dark。这就是我想改变的。

* * *

感谢您提供的组件链接！我之前不知道它是一个单独的组件。🙂

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [2024年一月19日 02:24 UTC](https://meta.discourse.org/t/air-theme/197703/474 "2024-01-19T02:24:19Z")

</div>

> [@ErlendMS](#):
>
> 但如果设备开启了深色模式，他们就会看到 Air-Dark。这正是我想要更改的。

您希望为深色模式用户显示什么？

---

<div class="post-metadata">

### Author: ![ErlendMS](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/erlendms/32/355598_2.png) [@ErlendMS](https://meta.discourse.org/u/ErlendMS)
#### Post date: [2024年一月19日 16:29 UTC](https://meta.discourse.org/t/air-theme/197703/475 "2024-01-19T16:29:58Z")

</div>

好的，我已经安装/启用了四个调色板：

- **Mine-Light**
- **Mine-Dark**
- **Air-Light**
- **Air-Dark**

（我想停用后两个，但那是另一个问题。它们很棒！但我正在为一支足球队创建一个论坛，并制作了与球衣颜色相匹配的调色板。☺）

我已经能够将 **Mine-Light** 设置为默认调色板 - 因此，如果新用户在设备上使用浅色模式访问网站，他们将获得该调色板。

**但问题来了：如果新用户在设备上使用深色模式访问网站，他们将获得 _Air-Dark_。而我想要的是 _Mine-Dark_。** （要现在获得它，他们必须在设置中手动选择。）

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [2024年一月22日 21:01 UTC](https://meta.discourse.org/t/air-theme/197703/476 "2024-01-22T21:01:59Z")

</div>

你在这里设置了什么方案？-\> `admin/site_settings/category/all_results?filter=dark%20mode`

---

<div class="post-metadata">

### Author: ![ErlendMS](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/erlendms/32/355598_2.png) [@ErlendMS](https://meta.discourse.org/u/ErlendMS)
#### Post date: [2024年一月24日 12:39 UTC](https://meta.discourse.org/t/air-theme/197703/477 "2024-01-24T12:39:23Z")

</div>

**太好了，设置我偏好的方案奏效了——谢谢！🙌🏻**

不过，有点奇怪的是，我 **只能** 在那里（网站设置➔基础）设置默认的_深色_模式——而在主题设置中 **只能** 设置默认的_浅色_模式。🙃

我建议在主题设置中设置浅色模式的地方添加一个小提示，最好附带一个链接。比如：

> 这将设置您主题的默认浅色模式调色板。_点击此处_设置默认深色模式。/前往 **网站设置➔基础** ，设置默认深色模式。

* * *

顺便说一句，我用了一些透明度和模糊效果，并结合了您的主题玩了一下。😊（不过这给我带来了一些z-index的麻烦——可能是因为我还是个新手，还在努力解决这些问题。）我尤其喜欢它如何让背景的“swoosh”效果更有分量！

**如果您想看，[请看这里](https://nettsida.no/)！** （不过，正如您可能看到的，还处于早期阶段。）

---

<div class="post-metadata">

### Author: ![Wayne\_Hsu](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/wayne_hsu/32/358235_2.png) [@Wayne\_Hsu](https://meta.discourse.org/u/Wayne_Hsu)
#### Post date: [2024年一月26日 22:19 UTC](https://meta.discourse.org/t/air-theme/197703/478 "2024-01-26T22:19:34Z")

</div>

您好，我是来自 Niantic, Inc. 的 Wayne Hsu。  
我们正在使用 Discourse Air 主题和自定义调色板为 [8thwall.com](http://8thwall.com) 构建我们的论坛。但出于某种原因，在移动视图中，类别页面主内容容器（div id: main-outlet）的背景完全透明，alpha 设置为 0。我找不到更新背景颜色/alpha 的方法。  
我之前看到有人遇到了类似的问题  
[Air Theme - #187 by hequaye](https://meta.discourse.org/t/discourse-air-theme/197703/187)

并且有人建议在设置中更改“桌面类别页面样式”为其他选项（目前设置为“类别和最新主题”），但这似乎没有帮助，因为它只针对桌面视图设置。  
您对这个问题的解决方案有什么想法吗？  
谢谢！

 ![image](https://global.discourse-cdn.com/meta/original/4X/4/7/f/47f9fd9f95fff6ef1092f706ace59aff17aad936.jpeg)

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [2024年一月29日 16:19 UTC](https://meta.discourse.org/t/air-theme/197703/480 "2024-01-29T16:19:13Z")

</div>

> [@ErlendMS](#):
>
> **[看看](https://nettsida.no/)吧！** （不过，正如我猜你所见，还处于早期阶段。）

看起来很不错！

---

<div class="post-metadata">

### Author: ![HisFocus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hisfocus/32/346278_2.png) [@HisFocus](https://meta.discourse.org/u/HisFocus)
#### Post date: [2024年二月15日 21:53 UTC](https://meta.discourse.org/t/air-theme/197703/481 "2024-02-15T21:53:53Z")

</div>

我认为 Air 主题非常好，但是当我访问 **ADMIN** \> **CUSTOMIZE** \> **Air Theme** 时，没有提供编辑（或添加）CSS 的选项。是我遗漏了什么吗？[https://www.communiteq.com/](https://www.communiteq.com/) 正在托管我的网站。这是我看到的内容：

 ![Screenshot 2024-02-15 164959](https://global.discourse-cdn.com/meta/original/4X/6/8/9/689792a87d801e269718ec9f43253a25a7a6d858.png)

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [2024年二月15日 21:58 UTC](https://meta.discourse.org/t/air-theme/197703/482 "2024-02-15T21:58:59Z")

</div>

您必须添加自己的组件

> [@Air Theme](https://meta.discourse.org/t/discourse-air-theme/197703/322?u=moin):
>
> 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

---

<div class="post-metadata">

### Author: ![HisFocus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hisfocus/32/346278_2.png) [@HisFocus](https://meta.discourse.org/u/HisFocus)
#### Post date: [2024年二月15日 22:44 UTC](https://meta.discourse.org/t/air-theme/197703/483 "2024-02-15T22:44:18Z")

</div>

@Moin！ 我是 Discourse 的新手，但哇！ 这个东西越来越棒了！ 非常感谢！

另外，请接受我的道歉，因为我在阅读这个帖子时，发现这个问题已经被问过并回答了大约 5000 次。

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [2024年二月15日 23:25 UTC](https://meta.discourse.org/t/air-theme/197703/484 "2024-02-15T23:25:08Z")

</div>

没必要道歉。你这样做可能并不广为人知！😄

如果你想探索主题/组件，这里有一份指南：

> [@Beginner's guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966):
>
> 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 …

---

<div class="post-metadata">

### Author: ![ElComputer](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/elcomputer/32/361327_2.png) [@ElComputer](https://meta.discourse.org/u/ElComputer)
#### Post date: [2024年二月17日 04:46 UTC](https://meta.discourse.org/t/air-theme/197703/485 "2024-02-17T04:46:24Z")

</div>

谢谢你的主题。我想使用 Adobe 字体。我必须编辑主题文件吗？还是有更聪明的方法？

我还注意到标题徽标有点小，右侧的搜索栏和登录可以看起来更像一个按钮而不是图标……这是插件/组件还是 CSS？

[上一頁](https://meta.discourse.org/t/air-theme/197703.md?page=13)

[下一頁](https://meta.discourse.org/t/air-theme/197703.md?page=15)
