# 新的默认导航样式和简化的配色方案

**URL:** <https://meta.discourse.org/t/new-default-nav-style-and-simplified-color-scheme/312597>\
**Category:** Announcements\
**Created:** [2024年六月24日 13:45 UTC](https://meta.discourse.org/t/new-default-nav-style-and-simplified-color-scheme/312597 "2024-06-24T13:45:47Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [2024年六月24日 13:45 UTC](https://meta.discourse.org/t/new-default-nav-style-and-simplified-color-scheme/312597/1 "2024-06-24T13:45:47Z")

</div>

# 变更内容

不久之后，我们的“顶部菜单”以及类似的导航（有时称为导航胶囊）将在整个 Discourse 中拥有更新、更一致的样式。

**顶部菜单**

之前：  
 ![image](https://cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/optimized/4X/1/1/d/11df31266fb80dc0afb0f274980590fd5b884bd0_2_690x37.png)

之后：  
 ![image](https://cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/optimized/4X/f/e/8/fe86ca0a9895592c4065eb4016e02382e2e93628_2_690x41.png)

**个人资料菜单**

之前：

 ![image](https://global.discourse-cdn.com/meta/original/4X/e/2/1/e2168037c14c3822dc835f56fdc79db3bc18a949.png)

之后：

 ![image](https://global.discourse-cdn.com/meta/original/4X/8/e/5/8e51bbb3ecdd0f2a0986c9c1a847fc5707f516f6.png)

# 为什么会改变？

这使我们能够简化默认 CSS 并移除默认 Discourse 主题中“四级”颜色的使用。多年来，许多主题都使用了这种颜色，因此它仍然可用于自定义 CSS。

默认情况下，这种颜色与“危险红色”非常相似，这使得像突出显示活动过滤器这样的事情变得困难……因为在这种状态下，它看起来像一个错误：

之前：  
 ![image](https://global.discourse-cdn.com/meta/original/4X/f/5/3/f53aa075fe344b98ac07cf04c12506a0851ad566.png)

之后：  
 ![image](https://global.discourse-cdn.com/meta/original/4X/8/2/a/82aa9a92e8e91d2fc532e33d89c3d2eb27d0990b.png)

# 如何在主题中更改？

随着这次更新，我们还通过 CSS 自定义属性使在主题中更改这些导航颜色变得更加容易。我们有一些新变量：

```css
:root {
  --d-nav-color: var(--primary);
  --d-nav-bg-color: transparent;
  --d-nav-color--hover: var(--primary);
  --d-nav-bg-color--hover: var(--d-hover);
  --d-nav-color--active: var(--tertiary);
  --d-nav-bg-color--active: transparent;
  --d-nav-border-color--active: var(--d-nav-color--active);
  --d-nav-underline-height: 0.125em;
}

```

因此，您无需添加多组自定义 CSS 来更改每个导航实例，而是可以根据需要更改变量。例如：

```css
:root {
  --d-nav-color--active: mediumorchid;
}

```

应用此 CSS 将产生：

![image](https://global.discourse-cdn.com/meta/original/4X/9/9/6/996645c779c331804fcd0448d558fce78e756307.png)

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

## 这个下划线来自哪里？

您可能会注意到，活动导航项的“下划线”没有使用 `border-bottom` CSS 属性。而是使用 `::after` [伪元素](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#what_is_a_pseudo-element) 应用的。  
现有主题可能已在使用 `border` 属性，因此此方法有望使删除我们的下划线变得更容易，如果它与现有样式冲突。要删除：

```css
:root {
  --d-nav-underline-height: 0;
}

```

![image](https://global.discourse-cdn.com/meta/original/4X/a/7/0/a708c8caa1af5b7cb77d2c2edc256a341de6b71e.png)

## 如果我更喜欢旧样式怎么办？

使用新的 CSS 变量可以很容易地恢复到以前的样式。在您的主题中，您可以应用：

```css
:root {
  --d-nav-color--hover: var(--quaternary);
  --d-nav-bg-color--hover: var(--quaternary-low);
  --d-nav-color--active: var(--secondary);
  --d-nav-bg-color--active: var(--quaternary);
  --d-nav-border-color--active: var(--primary-medium);
  --d-nav-underline-height: 0;
}

```

![image](https://global.discourse-cdn.com/meta/original/4X/2/1/a/21aa74929589964f44015752f4b903af7a329085.png)

如果您只想更改此导航的一个实例，可以将变量更改范围限定为 ID 或类，例如 `#navigation-bar` 而不是 `:root`：

```css
#navigation-bar {
  --d-nav-color--hover: var(--quaternary);
  --d-nav-bg-color--hover: var(--quaternary-low);
  --d-nav-color--active: var(--secondary);
  --d-nav-bg-color--active: var(--quaternary);
  --d-nav-underline-height: 0;
}

```

![image](https://global.discourse-cdn.com/meta/original/4X/e/4/0/e404a2f146cb5bd75689e44b171c8f9220cfe50e.png)

另一个例子：

```css
.user-navigation {
  --d-nav-bg-color--active: lightcyan;
}

```

![image](https://cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/optimized/4X/2/e/5/2e50b658bd3e6751db3098df53b921ea9606b277_2_690x68.png)

不确定如何更改 CSS？请查看 [Making custom CSS changes on your site](https://meta.discourse.org/t/make-css-changes-on-your-site/168101)

目前就这些！一如既往，如果您有任何问题或在此过程中遇到任何问题，请告知我们。 🚀

---

_[View the full topic](https://meta.discourse.org/t/new-default-nav-style-and-simplified-color-scheme/312597)._