테마와 스타일.
기본 프리셋과 공통 토큰으로 서비스의 밝은 화면과 어두운 화면에 맞추세요.
빠르게 이해하기
같은 주문 데이터라도 밝기·행 간격을 조절하면 서비스 화면에 더 자연스럽게 맞출 수 있습니다. 먼저 기본 테마를 선택하고 꼭 필요한 색만 조정하세요.
앱에서 연결하는 순서
- 기본 모양 비교
Grid 작업 화면의 하단 옵션에서 Alpine과 Balham을 비교하세요. 문서 상단 테마 버튼으로 밝은 화면과 어두운 화면을 전환할 수 있습니다.
- 읽기 좋은 간격 선택
행 간격을 28·36·44px로 바꿔 글자와 체크박스를 읽고 누르기 편한지 확인하세요.
- 앱에 같은 설정 전달
앱에서 theme과 rowHeight를 지정하세요. 기본 색 중 일부만 바꾸려면 테마를 상속한 뒤 필요한 토큰을 덮어씁니다.
데이터를 바꾸지 않고 표의 밝기·밀도·색을 서비스 화면에 맞출 수 있습니다.
문서 테마 버튼은 이 사이트의 미리보기에 연결되어 있습니다. 실제 앱에서는 앱의 테마 상태를 Grid에 직접 전달해야 합니다.
알아두면 쉬운 용어
- 프리셋
- 미리 준비된 색과 모양의 조합입니다.
- 토큰
- 배경색·테두리색 같은 개별 디자인 값을 가리키는 변수입니다.
기본 테마
#theme은 Alpine·Balham의 밝은 테마와 어두운 테마를 제공합니다. 문서의 테마 버튼과 작업 화면의 프리셋은 미리보기에 함께 반영됩니다. 앱에서는 서비스의 테마 상태를 Grid에 전달하세요.
grid.theme = 'alpine';
// 'alpine' | 'balham' | 'alpine-dark' | 'balham-dark'
const applyTheme = dark => { grid.theme = dark ? 'alpine-dark' : 'alpine'; };사용자 지정 토큰
#기본 프리셋을 extends로 상속하고 tokens에서 필요한 CSS 변수만 덮어쓸 수 있습니다. 페이지 배경을 통째로 바꾸기보다 헤더·강조·포커스 등의 필요한 영역을 조정하세요.
grid.theme = {
extends: 'alpine',
tokens: {
'--sy-grid-bg': '#ffffff',
'--sy-grid-header-bg': '#f6f7f3'
}
};어두운 화면에서는 alpine-dark 또는 balham-dark를 상속하고 해당 배경에 맞는 색을 전달하세요. 기본 로고는 적용된 테마에 맞춰 표시됩니다.
행 간격과 가독성
#행 간격은 rowHeight로 조절합니다. 글자가 잘리지 않고 편집기·체크박스를 누르기 충분한 공간을 확보하세요. 선택·포커스·오류 상태는 밝은 화면과 어두운 화면에서 모두 확인해야 합니다.
grid.rowHeight = 36;
grid.height = 510;