よりスムーズなカラーパレット編集

お知らせ
1

コミュニティブランディング管理の次なる進化 — カラーパレット作成・編集のためのインターフェイス刷新 — をご紹介します！

このアップデートは、最近のカラーパレット管理の改善 および ダークモード・ライトモード処理の強化 を基盤とし、管理者がサイトの外観をさらにスムーズにカスタマイズできるようになります。

:sparkles: 新機能

新しいカラーパレットインターフェイスは、全体的な管理デザインシステムとシームレスに統合され、パレット管理を強力かつ親しみやすいものにする、統一された体験を提供します。

新しいカラーパレット編集インターフェイス。
新しいカラーパレット編集インターフェイス。1540×2029 286 KB

新しいインターフェイスには以下が含まれます：

  • モダンな管理インターフェイスの美学に合わせた統合デザイン。
  • 各色がどのように適用されるかを確実に把握できる明確な命名。
  • 新しいパレットの作成または既存のパレットの変更のためのスムーズなワークフロー。
  • ライトモードとダークモードの両方に対応する、編集インターフェイスから直接操作できるデフォルトパレットコントロール。

新しいパレットを作成する際、選択する前にベースパレットのビジュアルプレビューを確認できるようになりました：

ベースパレットのプレビュー。
ベースパレットのプレビュー。1214×790 44.5 KB

これは、パレットリストページ、ユーザー設定、テーマ設定など、カラーパレットを選択する他の領域でも利用可能になったプレビューと一致します。

:rocket: 新しいインターフェイスへのアクセス方法

新しいカラーパレットUIは、すべてのDiscourseサイトで利用可能です！以下の手順でアクセスできます：

  1. 管理 → 外観 → カラーパレット に移動します。

  2. 既存のパレットの編集をクリックするか、新規ボタンをクリックして新しいパレットを作成します。

この最新のアップデートは、Discourseコミュニティの外観をカスタマイズするための強力で使いやすいツールを管理者に提供するという、私たちの継続的な取り組みを表しています。

強化されたインターフェイスにより、メンバーのために美しくブランド化された体験を、必要な柔軟性とコントロールを維持しながら、これまで以上に簡単に作成できます。

新しいインターフェイスに関する質問やフィードバックはありますか？以下の返信でぜひお聞かせください！

「いいね！」 13
2

より細かい色設定を許可することは可能でしょうか？入力されたカラーコードの微妙な色合いを得るためには多くの計算が必要であり、それらすべてが一部のシナリオでうまく機能するわけではありません。通常はカスタムCSSで行いますが、Horizonテーマを設定したところ、CSSを編集する方法がありませんでした。そのため、結局はカラーパレット設定に属すると気づきました。

3

Horizon にカスタム CSS を追加するカスタムコンポーネントを追加できます。

「いいね！」 1
4

それは素晴らしいですが、私のポイントはもっと一般的でした（Horizonだけではありません）。カラーパレット機能がユーザーが望むようにカラースキームを切り替えることを可能にするはずであるならば、カスタムCSSはあまり役に立たないでしょう。カスタムCSSは各カラーパレットに割り当てる必要があります。アーキテクチャの観点から。

5

より細かいカラー設定でどのようなことをしたいのか、もう少し詳しく教えていただけますか？それによって、パレットUIで改善できる点があるか、あるいはカスタムCSSが最善の解決策かどうかが判断できます。

6

現在、問題となっているのは3次カラーです。例えば、選択した色が#f7b618だとします。これは明るい黄色で、どこかに表示させたい色です。ボタンカラーとしては見栄えが良いですが、ボタンのテキストは白です。しかし、ボタンのテキストを設定すると、他の色が変更されます。おそらく、テキストが明るくなるように、暗い色を選択することを想定しているのでしょう。

また、サイドバーの背景（Horizonテーマについて話しています）など、すべての種類のシェードが3次カラーによって計算されています。そして、それらの色を別の色（例えば単にグレー）にしたい場合があります。

ですから、色について少しこだわりがあり、ユーザーにカラーパレットを選択させたい場合（矛盾しているかもしれませんが）、カスタムCSSに基づいたカラーパレットを使用するかもしれません。

別の選択肢としては、12個のメインカラーだけでなく、任意のカラー変数を割り当てることができる高度なモードが考えられます。そうすれば、計算を停止し、UIを使用しながらすべての色を手動で調整できるようになります。

7

高度なモードは Create and share a color scheme でカバーされていると思います。

1つのカラースキームのみで何かを上書きするには、Targetable Color Schemes を使用できると思います。

「いいね！」 2
8

なるほど、Reference for full color customization でさらに詳細を見つけました。UI にも表示されていますね！素晴らしいです。ありがとうございます！

「いいね！」 2
9

すべて解決したようですね。カスタムCSSとTargetable Color Schemesコンポーネントの組み合わせは強力であり、追加のカラーフィールドも非常に役立ちます。

「いいね！」 1
10

はい、しかし、可能であればまずhttps://meta.discourse.org/t/reference-for-full-color-customization/255158を試すことをお勧めします。計算されたすべての変数にアクセスし、好みの値をハードコーディングするだけで十分かもしれません。CSSは必要ないかもしれません。しかし、必要であれば、Targetable Color Schemesは間違いなく良い方法です。

「いいね！」 1