개요
라이믹스 기본 스킨의 주제 색상(Primary color)을 레이아웃 설정에서 지정하는 규약이다. 이를 지원하는 레이아웃과 스킨을 조합하면 사이트의 중심 색상을 공유할 수 있다. 설정 항목을 추가하는 것만으로 임의의 CSS가 자동 변경되는 것은 아니며, 해당 색상을 사용하는 테마 구현이 필요하다.
사용자 설정
주제 색상을 지원하는 레이아웃의 설정 화면에서 미리 정한 색상을 선택하거나 컬러 피커로 사용자 지정 색상을 고른다. 실제 메뉴와 적용 범위는 레이아웃에 따라 다르다.
제작자 설정
레이아웃의 info.xml에서 extra_vars에 아래 항목을 정의한다.
| 이름 | type | 용도 |
|---|---|---|
| primary_color | select | 미리 정한 색상 또는 사용자 지정 항목 선택 |
| customized_primary_color | colorpicker | 사용자 지정 HEX 색상 입력 |
primary_color는 6자리 HEX 색상 코드 또는 지원하는 색상 이름을 사용할 수 있다. 공식 예제는 사용자 지정 항목의 값으로 customized를 사용하며, 이 항목을 선택했을 때 customized_primary_color를 사용하도록 안내한다.
설정 예제
아래는 기존 info.xml의 <extra_vars> 안에 넣을 항목의 예이다. 전체 레이아웃 메타데이터를 대체하는 파일이 아니다.
<var name="primary_color" type="select">
<title xml:lang="ko">주제 색상</title>
<options value="blue">
<title xml:lang="ko">파랑</title>
</options>
<options value="red">
<title xml:lang="ko">빨강</title>
</options>
<options value="customized">
<title xml:lang="ko">사용자 지정</title>
</options>
</var>
<var name="customized_primary_color" type="colorpicker">
<title xml:lang="ko">사용자 지정 색상</title>
<description xml:lang="ko">주제 색상에서 사용자 지정을 선택한 경우에 사용합니다.</description>
</var>
지원 색상 이름
red, crimson, pink, purple, deep-purple, indigo, deep-blue, blue, light-blue, cyan, teal, green, light-green, lime, yellow, amber, orange, deep-orange, brown, grey, blue-grey, black, white가 공식 매뉴얼에 열거되어 있다.
모든 CSS 색상 이름을 임의로 넣어도 동일하게 처리된다는 뜻은 아니다. 테마에서 사용하는 값의 해석과 지원 범위를 확인한다.
확인할 점
- 선택형 색상과 사용자 지정 색상이 각각 저장되고 적용되는지 확인한다.
- 레이아웃뿐 아니라 사용하는 게시판·위젯 스킨이 주제 색상 규약을 지원하는지 확인한다.
- 사용자 지정 색상에서 글자와 배경의 대비가 유지되는지 확인한다.
- 밝은 화면과 어두운 화면을 지원한다면 두 모드에서 모두 점검한다.
같이 보기
출처
이 문서는 라이믹스 공식 매뉴얼을 바탕으로 설명과 예제를 정리하였다. 공식 매뉴얼은 CC BY-SA 4.0으로 배포된다. 원문의 기여 이력은 rhymix-docs 저장소에서 확인할 수 있다.