カスタムカラーパレット作成の課題

mk0r · 2025 年 1 月 27 日午前 12:17

GitHub のテーマの about.json ファイルで色を定義して、完全にカスタムな配色を作成しようとしました。

残念ながら、サイトで尊重されているのは色の定義の一部だけです。

たとえば、JSON スキームで次のように定義しています。「\"success_low\": \"DDE2B2”,」

しかし、スタイルガイドでは var(--success-low) の異なる（計算された）色が示されています。

すべてのガイドを読みましたが、JSON パレットの定義がすべて使用されているわけではなく、代わりに Discourse が独自の値を計算しており、私の定義を尊重していないようです。

代わりに CSS 変数ファイルに色をハードコーディングする必要がありますか？これらは計算された値をオーバーライドしますか？どこでどのように行うべきですか？ライトモードとダークモードの両方で、すべての色を Discourse で定義したいです。計算された値はどれも好きではありません。

どのような助けでも感謝します。これらすべてのものがどのように機能するか、最終的な CSS で何が優先されるかなどを理解するのは非常に困難でした。

更新: この投稿は私のトラブルシューティングと矛盾しているようです。

そのため、Discourse がまだ色を自動生成している理由について、さらに混乱しています。

Lilly · 2025 年 1 月 27 日午前 12:43

最初の（success_low）にはアンダースコアがあり、2番目の（success-low）にはダッシュがあることに気づきました。

確認のために、カラーパレットがjsonファイルにどのように表示されているか、ここに貼り付けていただけますでしょうか。

mk0r · 2025 年 1 月 27 日午前 12:58

ありがとうございます。アンダースコアとダッシュをすべて確認します。変数すべてについて、適切な場所にダッシュとアンダースコアが配置された参照用のJSONファイルはどこかにありますか？

mk0r · 2025 年 1 月 27 日午前 1:02

元々は「ソーラライズド」テーマを参考にしました

mk0r · 2025 年 1 月 27 日午前 1:14

これは非常に混乱しています。スタイルガイドでは、ラベル付きCSS変数にはダッシュが使用されています。

しかし、この（および他の）例のスキームではアンダースコアが使用されています。

github.com/exodrifter/discourse-gruvbox

about.json

main

{
  "name" : "Gruvbox",
  "about_url" : "https://github.com/exodrifter/discourse-gruvbox",
  "license_url": "https://github.com/exodrifter/discourse-gruvbox/blob/master/LICENSE.md",
  "color_schemes": {
    "Gruvbox Light": {
      "primary": "3c3836",
      "secondary": "fbf1c7",
      "tertiary": "076678",
      "quaternary": "af3a03",
      "header_background": "f9f5d7",
      "header_primary": "282828",
      "highlight": "427b58",
      "danger": "9d0006",
      "success": "79740e",
      "love": "8f3f71",
      "primary_very_low": "fbf1c7",
      "primary_low": "d5c4a1",
      "primary_low_mid": "a89984",
      "primary_medium": "7c6f64",

This file has been truncated. show original

私は確かに一番賢いプログラマーではありませんし、長年この作業をしてきた人たちにとってはもっと明白で直感的でしょうが、これを読み解こうとすると気が狂いそうです。

ライトモードとダークモードの色がどのように使用されるのか、そのロジック全体を直感的に把握するのは本当に難しいです。多数のSCSSファイルや変換、JSON、管理GUI、そして（ある程度？）テーマとは独立したパレットの間で…

愚痴ってすみません。ただ、ここで少し苦労しています。

Lilly · 2025 年 1 月 27 日午前 1:30

こちらにも参考になる古いトピックがあります。

mk0r · 2025 年 1 月 29 日午前 1:26

残念ながら、そのスレッドでは問題は解決しませんでした。

まだ混乱しています。すべての色を設定する方法について明確なガイダンスはありませんか？また、JSONとCSS変数の正しい構文/名前は何ですか？

Lilly · 2025 年 1 月 29 日午前 1:47

これを見ましたか？

github.com/discourse/discourse

app/assets/stylesheets/common/foundation/color_transformations.scss

main

// standard color transformations, use these if possible, and add any new dark-light-diffs here
// any variables defined here can be added in theme color schemes
// all variables should have the !default flag

@use "sass:string";

// primary
$primary-very-low: dark-light-diff($primary, $secondary, 97%, -82%) !default;
$primary-low: dark-light-diff($primary, $secondary, 90%, -78%) !default;
$primary-low-mid: dark-light-diff($primary, $secondary, 70%, -45%) !default;
$primary-medium: dark-light-diff($primary, $secondary, 50%, -35%) !default;
$primary-high: dark-light-diff($primary, $secondary, 30%, -25%) !default;
$primary-very-high: dark-light-diff($primary, $secondary, 15%, -10%) !default;

// primary-numbers
$primary-50: dark-light-diff($primary, $secondary, 97%, -82%) !default;
$primary-100: dark-light-diff($primary, $secondary, 94%, -80%) !default;
$primary-200: dark-light-diff($primary, $secondary, 90%, -78%) !default;
$primary-300: dark-light-diff($primary, $secondary, 80%, -60%) !default;
$primary-400: dark-light-diff($primary, $secondary, 70%, -45%) !default;

This file has been truncated. show original

about.json ファイルに明らかに間違っている点は見当たりませんので、テーマの設定方法に何か別の問題があるのかもしれません。

具体的に、どの変数が機能していて、どの変数が機能していないのでしょうか？

テーマ開発に関するトピックを読みましたか？リポジトリに他の必須テーマファイルが不足している可能性があります。

mk0r · 2025 年 1 月 29 日午前 2:21

はい、読みましたが、見た限りではすべてのカラー変数の完全な参照はありませんでした。「solarized」テーマに基づいて about.json ファイルを作成しました。このテーマにはすべての変数が宣言されているように見えました。もう一度最初からやり直して、問題の原因を確認するために開発者ツールを使用します。

これまでのご協力に感謝します。

トピック		返信	表示
Reference for full color customization Dev	4	1306	2023 年 2 月 14 日
How do colors work and how to change them? Support ux	5	113	2025 年 3 月 20 日
Use Discourse Core Variables in your Theme Developer Guides how-to , theme-guides	0	11859	2018 年 1 月 9 日
How to add more options to color palettes? Support color-palettes	4	69	2025 年 8 月 15 日
Color definitions for more than light/dark color schemes Support	2	492	2024 年 1 月 6 日

カスタムカラーパレット作成の課題

関連トピック