Config 테마(Themes)

[주인장]

테마 

- 테마는 Blockly의 디자인과 분위기를 맞춤 설정하는 방법입니다.

- Themes 클래스를 통해 블록 색상, 카테고리 색상, 특정 구성요소를 맞춤 설정할 수 있습니다.

- 추가 구성요소를 맞춤 설정하려면 테마 이름을 삽입 div의 클래스로 제공합니다.

- 이렇게 하면 사용자가 CSS를 통해 지원되지 않는 구성요소의 모양을 변경할 수 있습니다.

- 테마를 만드는 주된 목표는 개발자가 더 쉽게 액세스할 수 있는 Blockly 환경을 만들 수 있도록 지원하는 것입니다.

테마 속성

테마는 확장할 기본 테마, 블록, 카테고리, 구성요소, 글꼴의 스타일 객체, 시작 블록에 모자를 사용할지 여부 등 여러 속성이 있는 객체입니다.

블록 스타일

블록 스타일은 다음 4가지 필드로 구성됩니다.

• colourPrimary (필수) - 블록의 배경 색상입니다.
• colourSecondary (선택사항) - 블록이 그림자 블록인 경우 배경 색상입니다.
• colourTertiary (선택사항) - 블록의 테두리 또는 강조 표시 색상입니다.
• hat (선택사항) - 값이 cap로 설정된 경우 블록에 모자를 추가합니다.

카테고리 스타일

카테고리 스타일은 색상 속성만 보유합니다.

• 색상 (필수) - 도구 상자의 카테고리 색상입니다. 일반적으로 이러한 색상은 카테고리 내 대다수 블록의  colourPrimary와 동일해야 합니다. 이렇게 하면 사용자가 특정 카테고리에 속하는 블록을 쉽게 파악할 수 있습니다.

const categoryStyles = {
   'list_category': {
      'colour': '#4a148c'
   },
   'logic_category': {
      'colour': '#01579b',
   }
}

구성요소 스타일

테마는 아래 구성요소의 색상이나 값을 설정할 수 있습니다.

• workspaceBackgroundColour: 워크스페이스 배경 색상
• toolboxBackgroundColour: 도구 상자 배경 색상
• toolboxForegroundColour: 도구 상자 카테고리 텍스트 색상
• flyoutBackgroundColour: 플라이아웃 배경 색상
• flyoutForegroundColour: 플라이아웃 라벨 텍스트 색상
• flyoutOpacity: 플라이아웃 불투명도
• scrollbarColour: 스크롤바 색상
• scrollbarOpacity: 스크롤바 불투명도
• insertionMarkerColour: 삽입 마커 색상입니다 (색상 이름은 허용되지 않음).
• insertionMarkerOpacity: 삽입 마커 불투명도
• markerColour: 키보드 탐색 모드에 표시되는 마커의 색상입니다.
• cursorColour: 키보드 탐색 모드에 표시되는 커서의 색상입니다.

const componentStyle = {
   'workspaceBackgroundColour': '#1e1e1e',
   'toolboxBackgroundColour': '#333'
}

글꼴 스타일

글꼴 스타일은 글꼴의 모음, 두께, 크기를 보유하는 객체입니다.

const fontStyle = {
   'family': 'Georgia, serif',
   'weight': 'bold',
   'size': 12
}

startHats

테마 객체에서 startHats: true를 직접 설정하면 이전 또는 출력 연결이 없는 모든 블록에 모자가 추가됩니다. 모자가 적용되는 블록을 더 세부적으로 제어하려면 대신 블록 스타일 속성을 사용하면 됩니다.