색상은 어떻게 작동하며, 어떻게 변경하나요?

pHneutre · 3월 20, 2025, 10:12오전

제목이 다소 광범위해서 죄송합니다. 이 문제에 대해 꽤 오래 고민해 봤는데, 적절한 튜토리얼은커녕 설명조차 찾을 수 없었습니다.

Discourse에서 어디든 색상을 변경해야 할 때마다 저는 다음 순서를 따릅니다:

해당 색상이 테마 컴포넌트에서 관리되는가? 아니라면,
/admin/customize/colors에서 관리되는 것처럼 보이는가? 아니라면,
개발자 도구를 열어 일치하는 CSS를 찾으려 합니다.

하지만 이후로는 막막해집니다. var(--primary-low) 같은 것을 발견하는데, 이 변수들이 어디서 정의되는지 모르겠거든요. /admin/customize/colors의 기본(primary) 색상 개념과 관련이 있어 보이긴 하지만요. 그래서 질문드립니다:

이런 var() 값들은 어떻게 정의되는 건가요?
일관되게 수정하는 권장 방법은 무엇인가요?

Canapin · 3월 20, 2025, 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-selected-text-color: var(--primary);
  --d-selected-hover: #{$selected-hover};

This file has been truncated. show original

예를 들어 --primary-medium를 오버라이드하려면 테마에 다음을 추가할 수 있습니다:

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

그러나 SCSS 변수가 필요한 색상 변환 함수를 사용하는 방법을 저는 알지 못합니다.

"코어 및 테마 변수가 이제 모든 SCSS 파일이 컴파일되기 전에 주입됩니다"라고 했으므로 @import "common/foundation/variables";가 필요하지 않다는 것을 알 수 있지만, 그래도 작동하지 않았습니다. 마이크를 더 잘 아는 사용자에게 넘기겠습니다

ondrej · 3월 20, 2025, 1:13오후

스타일 가이드를 확인할 수 있습니다.

색상의 경우 /styleguide/atoms/colors도 확인할 수 있습니다. 사이트 설정에서 'styleguide’를 검색하여 활성화해야 합니다.

예: Discourse Meta

pHneutre · 3월 20, 2025, 1:24오후

와, 스타일가이드는 처음 들어보는 거네요. 감사합니다.
그러면 @Canapin 님이 말씀하신 대로, 이 스타일을 수정하는 유일한 방법은 사용자 지정 CSS를 사용하는 거죠? ( 원하시면 확인해 드릴게요)

awesomerobot · 3월 20, 2025, 1:37오후

이 방법은 아마도 가장 쉬울 것이며, 자동으로 생성된 모든 색상에서 작동합니다.

또한 여기 Override values for auto-generated color variables 에 설명된 대로 테마의 about.json 파일에서 색상을 재정의할 수도 있습니다.

글		댓글	조회수
Referencing Discourse theme color variables in custom theme component? Product Support css	3	229	3월 21, 2025
Use Discourse Core Variables in your Theme Developer Guides how-to , theme-guides	0	12313	1월 9, 2018
Styling Discourse with variables: Show & Tell Development dev-news	1	386	8월 5, 2025
Reference for full color customization Development	3	1557	2월 14, 2023
Challenges creating a custom color palette Development	8	424	1월 29, 2025

색상은 어떻게 작동하며, 어떻게 변경하나요?

Related topics