mk0r
1월 27, 2025, 12:17오전
1
GitHub에서 내 테마의 about.json 파일을 수정하여 완전히 사용자 정의된 색상 스킴을 만들려고 시도했습니다.
불행히도 사이트에서는 제 색상 정의 중 일부만 적용되고 있습니다.
예를 들어, 제 JSON 스킴에서 "success_low": "DDE2B2",라고 정의했는데,
스타일 가이드에서는 var(--success-low)에 대해 다른(계산된) 색상을 표시하고 있습니다.
모든 가이드를 읽어봤는데, JSON 팔레트 정의가 모두 사용되지 않는 것 같고, 대신 Discourse가 일부 값을 자체적으로 계산하여 제 정의를 무시하는 것으로 보입니다.
대신 CSS 변수 파일에 색상을 하드코딩해야 하나요? 이렇게 하면 계산된 값을 덮어쓸 수 있을까요? 어디서 어떻게 해야 하나요? Discourse의 라이트 모드와 다크 모드 모두에서 모든 색상을 정의하고 싶습니다. 계산된 값은 전혀 마음에 들지 않습니다.
도움 주시면 감사하겠습니다. 이 모든 것이 어떻게 작동하는지, 최종 CSS에서 무엇이 우선순위를 갖는지 등을 이해하기가 매우 어려웠습니다.
업데이트: 이 게시글은 제 문제 해결 과정을 반박하는 것 같습니다:
As of v2.3.3 (released early September) you can now override our automatically-generated SASS color variables ($primary-low, $primary-medium, etc) in remote themes (you can not yet do this directly via the admin UI.)
To override one of these colors you need to add it to the color_scheme section of your theme’s about.json file. Once you’ve done that you can see the override listed within your color scheme in /admin/customize/colors.
"color_schemes": {
“My_colors”: {
"primary": "000000…
그래서 왜 Discourse가 여전히 색상을 자동 생성하는 것인지를 더 혼란스럽게 만들었습니다.
Lilly
1월 27, 2025, 12:43오전
2
mk0r:
예를 들어, 제 json 스키마에서는 다음과 같이 정의합니다: "success_low": "DDE2B2”,
하지만 제 스타일 가이드에서는 var(--success-low)에 대해 다른(계산된) 색상이 표시됩니다.
첫 번째(success_low)에는 언더스코어가 있고, 두 번째(success-low)에는 대시가 있는 것을 확인했습니다.
json 파일에 표시된 대로 색상 팔레트를 여기에 붙여넣으시면 확인해 드릴 수 있습니다.
mk0r
1월 27, 2025, 12:58오전
3
감사합니다. 밑줄과 하이픈을 모두 확인해 보겠습니다. 모든 변수에 대해 하이픈과 밑줄이 올바르게 배치된 참고 JSON 파일이 어딘가에 있을까요?
mk0r
1월 27, 2025, 1:02오전
4
처음에는 “solarized” 테마를 참고로 사용했습니다
mk0r
1월 27, 2025, 1:14오전
5
정말 혼란스럽습니다. 스타일 가이드에서는 라벨이 붙은 CSS 변수에 대시(-)를 사용하는데:
반면 이 예시(그리고 다른 예시들)에서는 밑줄(_)을 사용하고 있습니다:
{
"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",
show original
솔직히 코딩에 그다지 능숙하지는 않은 편이라, 오래 일해 오신 분들은 더 명확하고 직관적으로 느끼실 거라고 생각합니다… 하지만 이 내용을 파고들다 보니 좀 미칠 것 같습니다.
라이트 모드와 다크 모드 색상이 어떻게 사용되는지에 대한 모든 논리를 직관적으로 파악하기가 정말 어렵습니다. 수많은 scss 파일과 변환 과정, json, 관리자 GUI, 테마와 (어느 정도는?) 독립적인 팔레트까지…
수다처럼 늘어놓은 점 죄송합니다. 여기서는 좀 고전하고 있습니다.
Lilly
1월 27, 2025, 1:30오전
6
이 문제를 해결하는 데 도움이 될 수 있는 다른 오래된 게시물이 있습니다.
I would like to create two of my own color schemes where I choose all the color variables (I don’t like the computed/transformed values).
Is there a reference for this? The example json file in this post:
Only has a few of the values listed (seems like the ones that are customizable by default through the admin panel). Whereas some color schemes I’ve seen like the WCAG ones, expose a few more of the variables.
This post talked about creating a plugin for advanced color customization: Custom…
mk0r
1월 29, 2025, 1:26오전
7
안타깝게도 해당 스레드에서 문제가 해결되지 않았습니다.
아직도 혼란스럽습니다 – 모든 색상을 설정하는 방법에 대한 명확한 가이드가 전혀 없는 건가요? 그리고 json과 css 변수에서 올바른 구문과 이름은 무엇인가요?
Lilly
1월 29, 2025, 1:47오전
8
이것을 확인해 보셨나요?
// 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;
show original
about.json 파일에서 명백한 오류는 보이지 않으므로, 테마 구성 방식에 다른 문제가 있을 수 있습니다.
구체적으로 어떤 변수가 작동하고 어떤 변수가 작동하지 않나요?
테마 개발 관련 주제를 읽어 보셨나요? 저장소에서 다른 필수 테마 파일이 누락되어 있을 가능성이 있습니다.
Discourse Themes and Theme Components can be used to customize the look, feel and functionality of Discourse’s frontend. This section of the developer guides aims to provide all the reference materials you need to develop simple themes for a single site, right up to complex open-source theme components.
This introduction aims to provide a map of all the tools and APIs for theme development. If you prefer a step-by-step tutorial for theme development, jump straight to:
mk0r
1월 29, 2025, 2:21오전
9
네, 읽어봤습니다. 하지만 제가 볼 수 있는 범위에서는 모든 색상 변수에 대한 완전한 참조 문서를 찾을 수 없었습니다. 모든 변수가 선언되어 있는 것으로 보이는 “solarized” 테마를 기반으로 about.json 파일을 작성했습니다. 이제 처음부터 다시 시도해보고 결과를 보고할 것이며, 개발자 도구를 사용해 문제가 무엇인지 확인해 보겠습니다.
지금까지 도움 주셔서 감사합니다.
