# Discourse Hub ナビゲーションボタン - 設定可能か？

**URL:** https://meta.discourse.org/t/discourse-hub-nav-buttons-configurable/172486
**Category:** Support
**Created:** [2020 年 12 月 7 日午後 12:19 UTC](https://meta.discourse.org/t/discourse-hub-nav-buttons-configurable/172486 "2020-12-07T12:19:40Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![simonb](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simonb/32/202531_2.png) [@simonb](https://meta.discourse.org/u/simonb)
#### Post date: [2020 年 12 月 7 日午後 12:19 UTC](https://meta.discourse.org/t/discourse-hub-nav-buttons-configurable/172486/1 "2020-12-07T12:19:40Z")

</div>

みなさん、こんにちは！👋

Discourse Hub モバイルアプリの上部にあるナビゲーションボタンを色で設定できるかどうか、ご存知の方はいらっしゃいますか？それらはアプリ自体の一部なのか、それとも特定のフォーラムの一部なのか、はっきりしません。

ユーザーの一人が以下のスクリーンショットを送ってきました：

 ![](https://global.discourse-cdn.com/meta/original/3X/3/4/34ca88b2d9d73eb23aaafc61256a6c2a7fd69776.jpeg)

どうやら、ヘッダーの色がフォーラムからそのまま引き継がれているようです。

もし、そのナビゲーションアイコンを白にできる方法があれば素晴らしいのですが（フォーラム自体の検索とメニューについては既に白にしています）。

Hub アプリを通じていくつかの他のインスタンスを確認したところ、これらのアイコンは常に同じ色でした。そのため、ほとんどの人がデフォルトのままにしているか、Hub アプリを使っていないか、あるいは設定できないかのいずれかだと思います。

---

<div class="post-metadata">

### Author: ![Robert\_McIntosh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/robert_mcintosh/32/259239_2.png) [@Robert\_McIntosh](https://meta.discourse.org/u/Robert_McIntosh)
#### Post date: [2020 年 12 月 7 日午後 12:54 UTC](https://meta.discourse.org/t/discourse-hub-nav-buttons-configurable/172486/2 "2020-12-07T12:54:04Z")

</div>

コミュニティメンバーの一人（偶然にも私自身ですが）が、この問題が私たちのコミュニティにも影響していると指摘してくれましたが、私たちは非常に異なる色を使用しています。

 ![image](https://global.discourse-cdn.com/meta/original/3X/b/d/bd29f06edceed80d9bc3608387ef40a17fe43da0.jpeg)

---

<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 年 12 月 7 日午後 2:36 UTC](https://meta.discourse.org/t/discourse-hub-nav-buttons-configurable/172486/3 "2020-12-07T14:36:28Z")

</div>

こんにちは、@simonb さん、@Robert_McIntosh さん、

はい、これらのアイコンの色は設定可能です。ただし、まずお伝えしたいのは、これらのアイコンのデフォルトの色は `header_primary` という色変数から派生していることです。Sphere コミュニティでは、テーマがその変数から生成される色を上書きしていますが、通常のヘッダーボタンに対してのみです（これは当然といえば当然で、iPad 用のナビゲーションは iPad でのみ表示されるためです）。

簡単な対処法としては、ヘッダーアイコンに使用している同じ CSS を DiscourseHub のナビゲーションアイコンにも追加する方法があります。その際、`.footer-nav .d-icon` 要素をターゲットにする必要があります。

より良い対処法は、テーマ内のその上書きを削除し、`header_primary` 色変数自体を変更することです。これにより、他のヘッダーテキスト（タイトルなど）にも影響が及びますが、機能するはずです。

結果を教えてくださいね。

---

<div class="post-metadata">

### Author: ![simonb](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simonb/32/202531_2.png) [@simonb](https://meta.discourse.org/u/simonb)
#### Post date: [2020 年 12 月 7 日午後 5:08 UTC](https://meta.discourse.org/t/discourse-hub-nav-buttons-configurable/172486/4 "2020-12-07T17:08:56Z")

</div>

> [@pmusaraj](#):
>
> 簡易的な修正方法として、ヘッダーのアイコンに使っている同じ CSS を DiscourseHub のナビゲーションアイコンにも適用することを提案します。その場合、`.footer-nav .d-icon` 要素をターゲットにする必要があります。

これではうまくいかないようです。検索やメニューオプションが再びグレーになってしまいました。私が間違っている可能性も十分にあります 😂

> [@pmusaraj](#):
>
> より良い修正方法としては、テーマ内のオーバーライドを削除し、`header primary` 色変数を修正することです。

申し訳ありませんが、意味がわかりません！どのように修正すればよいのでしょうか？使用している水色は当社のブランドカラーなので、変更できません。

---

<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 年 12 月 7 日午後 5:21 UTC](https://meta.discourse.org/t/discourse-hub-nav-buttons-configurable/172486/5 "2020-12-07T17:21:37Z")

</div>

ご安心ください。お客様ですので、サイト内の SCSS を直接修正いたしました。ヘッダーの主要な色に関するカラー生成機能が、お客様のカラーテーマでは完全に機能しなかったため、オーバーライドを使用しました（この件については社内で課題を提起します）。

---

<div class="post-metadata">

### Author: ![simonb](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simonb/32/202531_2.png) [@simonb](https://meta.discourse.org/u/simonb)
#### Post date: [2020 年 12 月 7 日午後 7:53 UTC](https://meta.discourse.org/t/discourse-hub-nav-buttons-configurable/172486/6 "2020-12-07T19:53:31Z")

</div>

@pmusaraj さん、本当にありがとうございます！とても感謝しています！❤
