ダークモードまたはライトモードに基づいてCSSアイテムを変更する方法?

検索しても決定的な答えが見つからなかったのですが、ダークモードとライトモードでCSSの項目を別々に変更したいです。

Discourseでこれを実現する最善の方法は何ですか?

「いいね!」 1

このトピックがお役に立つかもしれません。

CDCK がホストしているエンタープライズ顧客であるため、color_definitions.css を編集できないと思います。彼らに連絡する必要があるでしょう。

ありがとう、リリー!

「いいね!」 2

独自のCSSで上書きできると思います。別のテーマやコンポーネントで。 これがどのように機能するかわからないので、今日いじってみて、ダークモードとライトモードのCSS条件を作成できるかどうかを確認します。これは可能だと思います。

「いいね!」 1

ダーク/ライトモードに基づいて変更したいCSS要素は何ですか?

テーマのCSS/HTMLの編集(color_definitionsスタイルシート)のカラー定義タブにカラー定義を追加できます。

返信が遅くなり申し訳ありません!エキスパートレスポンス投稿の上部にあるハイライトされた*バーの色を変更したいのですが、ライトテーマとダークテーマでバーを異なる色でハイライトしたいと考えていました。

「いいね!」 1

どういう意味か分かりません。スクリーンショットを提供していただけますか?

ハイライト** すみません、携帯のタイポです!

「いいね!」 1

間違っていると証明されるのは嬉しいですが、CSSで信頼できるチェック方法はないと思います。

@sp-jordan-violet 通常は、ダークおよびライトカラー スキームのカラー変数を使用するのが一般的です。ブラウザインスペクターを使用して現在の値を確認できます。カラー スキームに応じて切り替わる新しい変数を追加することはできないと思いますが、選択できる変数はかなり多く、任意のカスタム宣言で使用できます。たとえば、

.topic-avatar {
  height: unset;
  align-self: stretch;
  background-image: linear-gradient(
      to right,
      transparent -40%,
      var(--secondary) 80%
    ),
    linear-gradient(
      to bottom,
      var(--tertiary-300) 0%,
      var(--highlight) 50%,
      var(--quaternary-low) 100%
    );
}

は、次のような投稿のハイライトを提供できます :rainbow: :slight_smile:

「いいね!」 2

はい、私も同感です。JavaScript / CSSソリューションも試しましたが、まだ何も機能していません。

「いいね!」 1

わあ、このアイデアすごく気に入りました!

「いいね!」 2

それは本当にクールに見えます。よくできました :slight_smile:

「いいね!」 1