# 在深色主题中使品牌标题栏的社交图标可见？

**URL:** https://meta.discourse.org/t/make-brand-header-social-icons-visible-in-dark-theme/312663
**Category:** Development
**Tags:** css, brand-header
**Created:** [2020年二月1日 00:54 UTC](https://meta.discourse.org/t/make-brand-header-social-icons-visible-in-dark-theme/312663 "2020-02-01T00:54:55Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![Anatolia](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/anatolia/32/133777_2.png) [@Anatolia](https://meta.discourse.org/u/Anatolia)
#### Post date: [2020年二月1日 00:54 UTC](https://meta.discourse.org/t/make-brand-header-social-icons-visible-in-dark-theme/312663/1 "2020-02-01T00:54:55Z")

</div>

如何使这些社交图标在深色主题中可见？我希望它们具有 100% 的不透明度并显示为白色。

![Screenshot_2](https://global.discourse-cdn.com/meta/original/3X/0/4/045941682bdfe1e10a834c545df07548e78721a2.png)

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [2020年二月7日 20:08 UTC](https://meta.discourse.org/t/make-brand-header-social-icons-visible-in-dark-theme/312663/2 "2020-02-07T20:08:53Z")

</div>

它应该已经适应您的配色方案并具有 1.0 的不透明度，但以防万一，请在您的主题 CSS 中添加以下内容：

```css
.b-header .panel > ul.icons a, .b-header .panel > ul.icons [class^="fa fa-"] {
    color: #fff;
    opacity: 1;
}

```

---

<div class="post-metadata">

### Author: ![Anatolia](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/anatolia/32/133777_2.png) [@Anatolia](https://meta.discourse.org/u/Anatolia)
#### Post date: [2020年二月7日 21:09 UTC](https://meta.discourse.org/t/make-brand-header-social-icons-visible-in-dark-theme/312663/3 "2020-02-07T21:09:17Z")

</div>

我已将此添加到 CSS 中，但没有任何变化。

我是否也应该在此处进行一些更改？

 ![image](https://global.discourse-cdn.com/meta/original/3X/6/8/68e320360509090f563cd873843d56924d6f63cc.png)

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [2020年二月7日 21:34 UTC](https://meta.discourse.org/t/make-brand-header-social-icons-visible-in-dark-theme/312663/4 "2020-02-07T21:34:41Z")

</div>

试试这个：

```plaintext
.b-header .panel .d-icon {
fill: #FFF;
}

```

---

<div class="post-metadata">

### Author: ![Anatolia](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/anatolia/32/133777_2.png) [@Anatolia](https://meta.discourse.org/u/Anatolia)
#### Post date: [2020年二月7日 22:21 UTC](https://meta.discourse.org/t/make-brand-header-social-icons-visible-in-dark-theme/312663/5 "2020-02-07T22:21:12Z")

</div>

这解决了问题，谢谢。

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [2024年六月18日 23:39 UTC](https://meta.discourse.org/t/make-brand-header-social-icons-visible-in-dark-theme/312663/6 "2024-06-18T23:39:37Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.