제가 직접 모든 색상 변수를 선택하는(계산/변환된 값들이 마음에 들지 않습니다) 나만의 색상 스킴을 두 개 만들고 싶습니다.
이 부분에 대한 참고 자료가 있을까요? 이 게시글의 예시 json 파일:
에는 몇 가지 값만 나열되어 있습니다(관리자 패널에서 기본적으로 사용자 정의할 수 있는 값들인 것 같습니다). 반면에 WCAG와 같은 일부 색상 스킴은 더 많은 변수를 노출하고 있습니다.
이 게시글은 고급 색상 사용자 정의를 위한 플러그인 생성에 대해 이야기하고 있습니다: Customizing colors - #10 by awesomerobot
하지만 계산된 값을 우회하여 오버라이드할 수 있는 모든 명명된 색상 변수가 포함된 참고 json 파일만 있으면 될 것 같으므로, 플러그인은 필요하지 않다고 생각합니다.
브라우저에서 discourse 인스턴스를 검사하면 스타일 탭에서 모든 루트 변수 이름을 찾을 수 있습니다:
그 후 json 파일에서 추가 변수를 선언하기만 하면 됩니다. 예:
{
"about_url": null,
"license_url": null,
"name": "Full Color Schemes",
"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"
}
}
}
좋은 점은 이러한 변수가 백엔드에서도 표시된다는 것입니다:
감사합니다 — 이 게시글을 작성한 후 해당 내용이 인스턴스의 /styleguide > colors 페이지에도 모두 나열되어 있다는 것을 알게 되었습니다. 이것이 전체 목록이라고 가정하고 있습니다…
이제 primary-high와 같은 설명형 변수와 primary-800과 같은 숫자형 변수의 사용법이 어떻게 다른지, 그리고 제가 직접 테마를 만들 때 이를 어떻게 반영해야 하는지 궁금합니다.
제가 아는 한, 이는 테마나 테마 컴포넌트에서 사용할 수 있는 추가적이고 더 세밀하게 조정된 계산 값들입니다. 하지만 Discourse 코어에서는 사용되지 않습니다.
숫자 값만으로 색상 스키마를 작성하고 싶다면, 테마에서 다음과 같이 설명형 변수를 다시 선언할 수 있습니다:
:root {
--primary-high: var(--primary-800);
}
하지만 이 경우, primary와 tertiary에는 숫자 값만 존재하게 됩니다.