컬러 작동방식
Jetcraft의 컬러는 사용자가 설정한 엘리멘터 글로벌 스타일을 지역변수로 한번 더 감싸고 있습니다. 이 방식은 다른 여러 플러그인이나 테마가 사용하는, 엘리멘터에서는 범용적인 방법입니다.
하지만 실제로 위젯의 팔레트 썸네일 색상은 여전히 사용자의 기본 컬러로 나타나는 것에 주의하세요. 이것이 혼동을 줄 수 있지만 같은 방식을 사용하는 다른 모든 테마와 플러그인들 역시 똑같은 상황입니다.
/* Blue */
.jetcraft-color-blue {
--e-global-color-primary: #3b82f6;
--e-global-color-secondary: #e7e7e9;
--e-global-color-text: #0d0c22;
--e-global-color-accent: #3b82f61a;
Jetcraft는 대표 글로벌 변수 4개만 사용해서 컬러를 표현하고 있습니다(다크 컬러는 예외적으로 더 많은 추가 변수가 있습니다). 어떤 색상을 어떤 변수에 대입해야 하는지 파악하기 위해 다음을 참고해 주세요.
--e-global-color-primary: 대표 색상입니다. 보통 컬러 이름과 동일한 색상이 사용됩니다.--e-global-color-secondary: 외곽선에 사용하는 옅은 색상입니다.--e-global-color-text: 본문 색상입니다. 본문 색은 보통body요소에서 지정하면 되지만, 많은 위젯이 기본 컬러를inherit으로 두지 않고 색상을 명시해 놓은 경우가 있어 별 수 없이 변수 하나를 배정해야 합니다.--e-global-color-accent: 강조 색이지만 옅은 색상입니다. 예를들면select요소에 마우스가hover됐을 시의 배경색 등입니다.
기존 컬러의 변경
아래는 Jetcraft에서 제공하는 컬러 코드입니다. 흔히 사용하는 React, Next, Vue 프레임워크 테마들 중에서 거의 공통으로 사용하는 색상에 추가로 한국에서 많이 사용하는 오렌지, 올리브 등의 색상이 추가되었습니다.
Jetcraft에서 제공하는 컬러를 수정해서 사용하는 경우에는 해당 컬러의 지역변수를 변경하면 됩니다. 아래의 코드에서 원하는 컬러를 복사해서 사용중인 CSS 파일에 함께 명시하면 됩니다. 블루 컬러를 수정하는 예를 보겠습니다.
/* Blue */
.jetcraft-color-blue {
--e-global-color-primary: #3b82f6;
--e-global-color-secondary: #e7e7e9;
--e-global-color-text: #0d0c22;
--e-global-color-accent: #3b82f61a;
--jetcraft-primary: var(--e-global-color-primary);
--jetcraft-secondary: var(--e-global-color-secondary);
--jetcraft-text: var(--e-global-color-text);
--jetcraft-accent: var(--e-global-color-accent);
}
3 - 6 라인까지 원하는 색상으로 변경합니다. 이 값은 사용자의 현재 글로벌 색상을 Override 합니다. 이 색상은 엘리멘트의 여러 위젯에서 색상을 고를 때 참조됩니다.
8 - 11 라인은 사용자가 HTML 위젯이나 Custom CSS 같이 코드를 직접 명시해야 하는 경우에 사용할 변수명입니다. color: var(--jetcraft-primary)와 같이 작성합니다. 이제 이 코드를 웹사이트 헤더에 추가합니다. 가장 좋은 방법은 Jetcraft 초기화 코드에 함께 명시하는 것입니다. 글로벌 변수를 래핑하는 것은 명시도에 크게 좌우하기 때문에 CSS 정의 위치가 매우 중요합니다.
이제 템플릿의 미리보기에서 GUI 콘트롤러를 통해 블루 컬러가 잘 변경됐는지 확인합니다. 앞으로 jetcraft-color-blue 클래스가 추가 된 위젯은 모두 변경된 컬러를 사용합니다.
새로운 컬러 추가
새로운 사용자정의 컬러를 추가하는 것도 위의 방식과 동일합니다. Jetcraft 초기화 코드에 기존 컬러를 붙여넣은 후, 클래스 이름과 색상 값을 변경하면 됩니다. 이 색상은 템플릿 편집화면의 GUI 콘트롤러에는 나타나지 않습니다. 현재 이 부분이 반영되도록 수정할 계획입니다.
/* My Color */
.jetcraft-color-mycolor {
--e-global-color-primary: #3b82f6;
--e-global-color-secondary: #e7e7e9;
--e-global-color-text: #0d0c22;
--e-global-color-accent: #3b82f61a;
--jetcraft-primary: var(--e-global-color-primary);
--jetcraft-secondary: var(--e-global-color-secondary);
--jetcraft-text: var(--e-global-color-text);
--jetcraft-accent: var(--e-global-color-accent);
}