Freecodecamp: ナイトモードでのコミュニティドロップダウンスタイリング

うーん、反対のことを試してみませんか？ テキスト自体に明るい灰色を使用して、暗い灰色を維持しますか？
誰かがPRを提出する準備ができたら、 @ systimotic QAを手伝います;）

ジャスティンに同意し、特定のカラーコードはここから取得できます
https://www.freecodecamp.com/design-style-guide/

@systimotic @raisedadead @hallaathrad
やあみんな、これはどうですか：

別の問題を開くつもりでしたが、これは介入するのに賢明な場所のようです...

誰かがこれに取り組むと言ったかどうかはわかりません-そうでない場合は、両方を修正する必要があることに同意した場合は、それを引き受けます！

うん..私は両方を修正する必要があることに同意しました。 ただし、このモーダルはステージングでは使用できなくなったことを覚えておいてください。

@ no-stack-dub-sackドロップダウンの修正を進めることができます👍
とにかく削除されているので、モーダルを残すのが最善かもしれません。

😕チェックしたところ、ステージングでモーダルを使用できます。 これは元に戻されたと思います。 一時的に戻ったのか、恒久的に戻ったのか、その状況はわかりません。
https://github.com/freeCodeCamp/freeCodeCamp/pull/11253で元に戻されました

@systimotic @raisedadeadわかりました、それで私は先に進んで両方を修正することができます-そしてそれが削除されてしまった場合-大したことはありません！

また、ドロップダウンが下にあるときにコミュニティボタンをクリックしてから、マウスをドロップダウンから外すと、緑に戻るのではなく、白のままになることにも注意してください。

これが意図的ではないと仮定すると、それも調べようとします。

@raisedadead @systimotic

ジャスティンに同意し、特定のカラーコードはここから取得できます
https://www.freecodecamp.com/design-style-guide/

これは実際に2つの良い点を提起します：

1. ナイトモードの色の多くは、このスタイルガイドにはいません
2. また、このスタイルガイドには「FreeCode Camp」のインスタンスがいくつかあり、問題ごとに変更する必要があります＃12472

しかし、私はこれをコードベースで見つけることができません、誰かがこれがどこにあるか知っていますか？

さて、ナビゲーションバーのボタンのフォーカススタイルの問題を修正するなど、見栄えがよく、ナイトモード/ブランドカラーを使用していると思うものを作りました。

そして、ここにドロップダウンがあります：

しかし、たとえば、お店に行ってから地図に戻るなど、クリックし始めると、スタイリングは明るい色に戻ります。 ページは一時的に「デイモード」に戻り、ナイトモードに戻ると、ドロップダウンスタイルが元に戻ります。 これがなぜであるかについてのアイデアはありますか？

これが私のコードです。main.lessの1073行目に挿入してください。

.hamburger-dropdown {
    .dropdown .dropdown-menu,
    .open a {
      background-color: @gray;
      a {
        color: @night-text-color;
        &:hover {
          background-color: #666;
          color: @brand-primary;
        }
      }
    }
    a:focus,
    a:active {
      background-color: #666 !important;
      color: @brand-primary !important;
    }
  }

モーダル-私はこれに少し取り組みましたが、他にもたくさんの問題があり、疲れすぎて今は入りません。 「バグ」モーダルもあるので...

このスタイルガイドには「無料コードキャンプ」の例がいくつかあります

マージ待ちのPRがあります。 参照https://github.com/freeCodeCamp/design-style-guide/pull/7

ドロップダウンで行ったことは気に入っています。テキストのコントラストを上げる（白くする）必要があるかもしれませんが、見た目はかっこいいです。

それは私には反応/静的ページの問題のように聞こえます。 ショップページにはありません
まだ反応するように変換されており、ナイトモードの好みは
ローカルに保存されているとは思いません。

ナイトモードの選択がサイト全体で持続しないことは別の問題であり、
誰かがそれを上げることができれば、私は最も義務付けられるでしょう。 私
現在GitHubにアクセスできません

月曜日に、2017年1月16日、mrugesh mohapatra [email protected]
書きました：

このスタイルガイドには「無料コードキャンプ」の例がいくつかあります

マージ待ちのPRがあります。 Ref freeCodeCamp / design-style-guide＃7
https://github.com/freeCodeCamp/design-style-guide/pull/7

私はあなたがドロップダウンでしたことを好きです、多分テキストはもっと必要です
コントラスト（より白く）ですが、かっこいいですね！

—
あなたは言及されたチームに所属しているので、これを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/freeCodeCamp/freeCodeCamp/issues/12538#issuecomment-272837258 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/ARtk5hIk55x-gDVJsymtMwSfkxmlxp8Wks5rS1TPgaJpZM4Lj7u0
。

@ no-stack-dub-sackホバー/アクティブなときに、灰色の上に緑色のテキストを掘っています。 読みやすいほどのコントラストがないようです。 濃い灰色のテキストで明るい灰色の背景はどうですか？

@systimotic @raisedadead @hallaathradしたがって、コントラストの向上に関するJustin＆Mrugeshのコメントによると、これは少し良く見えると思います。 @brand-primaryを15％暗くした@link-hover-color varを使用したので、それでも維持されます。ブランドグリーンのヒントですが、実質的により良いコントラストを提供します。 これはドロップダウン内にあり、ホバー、アクティブ、ナビゲーションリンクのフォーカスです。

そして、私はモーダルに関して別の問題を開き、そこにあるものの難しさを説明すると思います。

これは私には良さそうです。

素晴らしい!!! プルリクエストをもう持っていきましょう！ 😉

その上で！