フルカラーカスタマイズのリファレンス

開発
1

すべてのカラー変数を自分で選択できる、独自のカラースキームを2つ作成したいと考えています（計算値/変換値は好みではありません）。

これに関する参照資料はありますか？ この投稿の例のJSONファイル：

には、デフォルトで管理パネルからカスタマイズ可能な値がいくつかリストされているだけです。一方、WCAGのようなカラースキームでは、さらにいくつかの変数が公開されています。

この投稿では、高度なカラーカスタマイズのためのプラグインの作成について言及していました：Customizing colors - #10 by awesomerobot

しかし、計算値をバイパスして、オーバーライド可能なすべての名前付きカラー変数の参照JSONファイルがあれば、それは必要ないと思います。

「いいね！」 1
2

ブラウザで Discourse インスタンスを検査すると、スタイルタブですべてのルート変数名を見つけることができます。

image
image394×1320 110 KB

次に、JSON ファイルで追加の変数を宣言します。例：

{
  "about_url": null,
  "license_url": null,
  "name": "フルカラーテーマ",
  "color_schemes": {
    "Colors Light": {
      "primary": "222",
      "secondary": "fff",
      "tertiary": "08c",
      "quaternary": "e45735",
      "header_background": "fff",
      "header_primary": "333",
      "highlight": "ffff4d",
      "danger": "c80001",
      "success": "090",
      "love": "fa6c8d",
      "primary-very-low": "f8f8f8",
      "primary-low": "e9e9e9",
      "primary-low-mid": "bdbdbd",
      "primary-medium": "919191",
      "primary-high": "646464",
      "primary-very-high": "434343",
      "secondary-low": "4d4d4d",
      "secondary-medium": "gray",
      "secondary-high": "a6a6a6",
      "secondary-very-high": "ededed"
    },
    "Colors Dark": {
      "primary": "ddd",
      "secondary": "222",
      "tertiary": "0f82af",
      "quaternary": "c14924",
      "header_background": "111",
      "header_primary": "ddd",
      "highlight": "a87137",
      "danger": "e45735",
      "success": "1ca551",
      "love": "fa6c8d",
      "primary-very-low": "282828",
      "primary-low": "313131",
      "primary-low-mid": "7a7a7a",
      "primary-medium": "909090",
      "primary-high": "a6a6a6",
      "primary-very-high": "c7c7c7",
      "secondary-low": "bdbdbd",
      "secondary-medium": "919191",
      "secondary-high": "646464",
      "secondary-very-high": "313131"
    }
  }
}

良い点は、これらの変数がバックエンドにも表示されることです。

image
image1632×1747 210 KB

「いいね！」 6
3

投稿後、すべてがインスタンスの /styleguide > colors ページにもリストされていることに気づきました。これが完全なリストだと想定しています。

現在、説明的な変数（例：primary-high）と数値の変数（例：primary-800）の使用方法の違いと、独自のテーマを作成する際にこれをどのように考慮すべきかを知りたいと思っています。

4

私の知る限りでは、テーマやテーマコンポーネントで使用できる、より詳細に調整された追加の計算です。しかし、それらはDiscourseコアでは使用されていません。

もし、番号付きの値だけでカラーテーマを書きたい場合は、テーマで説明的な値を次のように再宣言できます。

:root {
  --primary-high: var(--primary-800);
}

しかし、その場合、プライマリとターシャリには番号付きの値しかありません。

「いいね！」 1
5

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