ダーク(またはライト)モードに特定のbodyクラスを追加する方法は?

現在、特定のクラスは存在しないようです。

こちら を見つけましたが、ダークモードとライトモードでテーマIDが同じであるため(おそらくカラースキームで定義されている)、機能しません。

短いスクリプトで解決できるでしょうか?そして、これをDiscourseのコアに追加することは可能でしょうか?

darkまたはlightモードのためにbodyに特定のクラスを追加する必要がある理由を説明していただけますか?

このコア機能では、必要なことができないのでしょうか?

フォーラムのスタッフが、この特定のかすかな茶色を生成する生成されたカラー変数(--tertiary-very-low)を気に入っていません。

彼らはそれを調整したいのですが、生成されたものであり、ダークモード用の親固有のクラスがないため、実際には変更できないようです。

しかし、この情報を見つけました。

それが有効かどうかはわかりません。まだ試すことができませんでした。今はやることが多すぎます:sweat_smile:。しかし、それが機能すれば、それで十分です。実際、さらに良くなるでしょう。

「いいね!」 2

フォーラムの調整を @Canapin さんと一緒に行っているので、ここでは「私たち」と言わせてください。Discourse のフランス語版にある「Café crème」というプリセットを使用してダークテーマを作成しました(「coffee」だと思います)。そして、:heart: の色を茶色ではなく赤に変更しました。

このテーマの奇妙な点は、ハイパーリンクの色がテキストとほとんど同じであることです。
そのため、埋め込みリンクの場合、ほとんど見えません。


(はい、最後の2単語「cliquez-ici」はウェブページへのリンクです…)

そこで、リンクを少し茶色にして目立たせようと考えました。しかし、カラーパレットの quaternary 設定を変更すると、多くの色が一緒に変わってしまいます。DM の後ろにある「バブル」の背景が、@Canapin さんの最初のメッセージに示されている茶色よりも、鳥の糞に近い色に変わってしまいます。一番上のメッセージボックス(「送信メールが無効になりました」ボックス)も、この同じ鳥の糞のような色に変わってしまいます。

そこで、最初に css を使用してハイパーリンクの色を変更しようと考えましたが、まだ方法がわかりません。

「いいね!」 1

これらのリンクにカスタムカラーを設定するには、CSSターゲットとして.cooked aを使用すると、うまくいくはずです。

コアシステムでは、ダーク/ライトカラーモードに対応するカラーを選択できるようになりましたが、次のようにダーク/ライトモード用のCSSメディアクエリを使用することもできます。

「いいね!」 1
@media (prefers-color-scheme: dark) {
    .cooked a, .d-editor-preview a {
        color: var(--primary-low-mid);
    }
}

作業は完了しました。ありがとうございました!

おっと。
いや、うまくいきませんでした。

もし私が間違っていたら訂正してください。prefers-color-scheme は、実際の Discourse の選択されたテーマではなく、デバイス の設定に基づいていますか?

私の Windows デバイスでは、ダークテーマを設定しました。そのため、デバイスの設定を使用するウェブサイトは、可能であればダークテーマを表示します。

しかし、私のフォーラムでは、ダークテーマではなく、意図的にライトテーマを使用することを選択しました。

ライトテーマを使用しているにもかかわらず、メディアクエリ prefers-color-scheme はロードされています。

ライトテーマ、ダークモードなし、

それでも、ダークテーマのルールが適用されています。

フルスクリーン:

「いいね!」 1

申し訳ありません。システム設定のダークモードをフォーラムで有効にするという意味だと誤解していました。

つまり、あなたは個人的にはライトカラースキームを使用していますが、ユーザーはダークカラースキームを使用しているということでしょうか?
以前のスクリーンショットではダークカラースキームが有効になっているように見えましたが、最近の返信ではライトカラースキームを使用していると述べられています。

こんにちは、すみません、特に同じ種類のものを異なる配色で2つ話していたので、明確ではありませんでした。また、私にとっては少し混乱しました。

それで、私の質問は次のようになります。Discourseでは、デバイスのダーク/ライトモードの設定に関係なく、どの配色を使用しているかを知るにはどうすればよいですか?

私の理解が正しければ:
私のデバイス(Windows 10)がダークモードに設定されていても、Discourseでライト配色を選択した場合、フォーラムのCSSにあるメディアクエリ (prefers-color-scheme: dark) は、いずれにしても「true」のようなものを返し、ネストされたルールが適用されます。これは、フォーラムでライト配色を選択した場合でも(Windowsがダークモードに設定されていても)同様です。

したがって、DiscourseのHTMLコードで、現在ライトまたはダーク配色を使用しているかどうかを知るにはどうすればよいですか?「light-color-scheme」や「dark-color-scheme」のような親クラスが見つかりませんでした。そのため、CSSで特定の配色を区別/ターゲットにして、一方または他方のみのルールを作成することはできません。

「いいね!」 1

明確にしていただきありがとうございます。理解しました。

現在選択されているカラースキームに基づいて、ボディにクラスを追加することはありません。

さらに詳しくお伺いしてもよろしいでしょうか?現在選択されているダークスキームで、当社のカラー関数が --tertiary に対して生成する色がお気に召さないためでしょうか?

ボディクラスを通じて、現在達成できないと感じていることは何でしょうか?

はい、その通りです :slight_smile:

この質問を読んでみると…生成された色を置き換える唯一の方法が、私の知る限りでは

:root {
  --primary-medium: #666666;
}

なのですが、ルートセレクターであるため、html要素やbody要素のクラスでは :root よりも前にカラースキームをターゲットにすることはできないからです。
なので…どうでしょう。

要するに、特定のカラースキームに対して、特定の生成色を変更したいということです。 :person_shrugging:

もし不可能でも、大した問題ではありません。カラースキームの色についていくつか実験を行い、生成された色には現在十分に満足しています。 :slight_smile: もっと良くできるかもしれませんが、大きな問題からは程遠いです。 :slight_smile:

「いいね!」 1

必要であれば、一種の隠し回避策があります。

フォルダを作成し、その中にabout.jsonファイルのみを追加することができます。

私は実際に、組み込みのカラー関数に依存するのではなく、独自のバリアントを指定したかったため、solarized lightカラーテーマを作成するためにこれを行いました。

以下は、私が作成した実際のabout.jsonファイルです。

その後、この「テーマ」をインストールすると、このカラーテーマがフォーラムにインストールされます。その時点で、他のテーマでも利用できるようになります。

{
  "name": "Solarized Light",
  "component": false,
  "license_url": null,
  "about_url": null,
  "authors": null,
  "theme_version": null,
  "minimum_discourse_version": null,
  "maximum_discourse_version": null,
  "assets": {
  },
  "color_schemes": {
    "Solarized Light": {
      "primary": "002B36",
      "primary-high": "4C6869",
      "primary-medium": "7E918C",
      "primary-low-mid": "A4AFA5",
      "primary-low": "D6D8C7",
      "primary-very-low": "F0ECD7",
      "secondary": "FCF6E1",
      "secondary-very-high": "E8E6D3",
      "secondary-high": "97A59D",
      "secondary-medium": "6C8280",
      "secondary-low": "325458",
      "tertiary": "0088cc",
      "tertiary-high": "329ED0",
      "tertiary-medium": "7EBFD7",
      "tertiary-low": "D6E6DE",
      "quaternary": "e45735",
      "header_background": "FCF6E1",
      "header_primary": "002B36",
      "highlight": "ffff4d",
      "highlight-high": "BCAA7F",
      "highlight-medium": "E3D0A3",
      "highlight-low": "FDF9AD",
      "danger": "e45735",
      "danger-low": "F8D9C2",
      "success": "009900",
      "success-medium": "4CB544",
      "success-low": "CFE5B9",
      "love": "fa6c8d",
      "love-low": "FCDDD2"
    }
  },
  "modifiers": {
  },
  "learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}
「いいね!」 2

これは、Discourse のインストールをより深く行っていた、ずっと昔に見たことを覚えています!

間違いなく良い回避策です。ありがとうございます。少しハッキーかもしれませんが、それは適切な解決策と見なすことにします。

「いいね!」 1

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