色はどのように機能し、どうやって変えるのですか？

pHneutre · 2025 年 3 月 20 日午前 10:12

申し訳ありませんが、件名が広範になりますが、この問題について悩んでおり、適切なチュートリアルや説明を見つけることができませんでした。

Discourse でどこかの色を変更する必要があるときは、常にこの手順に従っています。

テーマコンポーネントで色が管理されていますか？そうでない場合は、
/admin/customize/colors で管理されているように見えますか？そうでない場合は、
開発者ツールを開き、一致する CSS を見つけようとします。

しかし、その時点で迷ってしまいます。var(--primary-low) のようなものを見つけ、それらがどこで定義されているのか全く分かりませんが、/admin/customize/colors のプライマリカラーの概念に関連しているように見えます。したがって：

これらの var() はどのように定義されていますか？
これらを一貫して変更するための推奨される方法はありますか？

Canapin · 2025 年 3 月 20 日午前 11:15

色はここで（計算されて）定義されています：

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

CSS変数はここで定義されています：

github.com/discourse/discourse

app/assets/stylesheets/color_definitions.scss

main

// This file maps all SCSS color variables to CSS custom properties.
// It is compiled to CSS separately from the rest of the app.
// The source variables come from color_transformations.scss and variables.scss
:root {
  color-scheme: #{schemeType()};

  --scheme-type: #{schemeType()};
  --primary: #{$primary};
  --secondary: #{$secondary};
  --tertiary: #{$tertiary};
  --quaternary: #{$quaternary};
  --header_background: #{$header_background};
  --header_primary: #{$header_primary};
  --highlight: #{$highlight};
  --danger: #{$danger};
  --success: #{$success};
  --love: #{$love};
  --d-selected: #{$selected};
  --d-hover: #{$hover};
  --always-black-rgb: 0, 0, 0;

This file has been truncated. show original

例えば --primary-medium を上書きしたい場合は、テーマに以下を追加できます：

:root {
    --primary-high: red;
}

しかし、SCSS変数が必要なカラー変換関数の使用方法が分かりません。

@import "common/foundation/variables"; は必要ないことは分かっていますが、「コアおよびテーマ変数は、SCSSファイルがコンパイルされる前に注入されるようになりました」が、それでも動作しませんでした。より知識のあるユーザーにマイクを渡します

ondrej · 2025 年 3 月 20 日午後 1:13

スタイルガイドを確認できます

色については /styleguide/atoms/colors も確認できます。「styleguide」で検索してサイト設定で有効にする必要があります。

例: https://meta.discourse.org/styleguide/atoms/colors

pHneutre · 2025 年 3 月 20 日午後 1:24

スタイルガイドについて初めて知りました。ありがとうございます。
Canapinさんがおっしゃったように、これらのスタイルを変更するにはカスタムCSSが唯一の方法だと理解していますが、よろしいでしょうか？（よろしければ「いいね」をお願いします） ()

awesomerobot · 2025 年 3 月 20 日午後 1:37

この方法は、おそらく最も簡単で、自動生成されたすべての色に機能します。

しかし、テーマの about.json ファイルで色を上書きすることもできます。これは、Override values for auto-generated color variables で説明されています。

system · 2025 年 4 月 19 日午後 1:37

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

トピック		返信	表示
Use Discourse Core Variables in your Theme Developer Guides how-to , theme-guides	0	11857	2018 年 1 月 9 日
Referencing Discourse theme color variables in custom theme component? Support css	4	72	2025 年 4 月 20 日
Styling Discourse with variables: Show & Tell Dev dev-news	1	164	2025 年 8 月 5 日
Reference for full color customization Dev	4	1306	2023 年 2 月 14 日
Challenges creating a custom color palette Dev	8	149	2025 年 1 月 29 日

色はどのように機能し、どうやって変えるのですか？

関連トピック