Theme React Data Grid

React 테마 엔진을 사용하면 Ignite UI for React Grid를 브랜드 아이덴티티에 맞게 쉽게 사용자 지정할 수 있습니다. 미리 정의된 테마 및 색상표 외에도 CSS 사용자 지정 속성 집합을 사용하여 데이터 그리드의 모양과 느낌을 추가로 사용자 지정할 수 있습니다.

Available theming properties

속성 이름	유형	설명
--그리드 고도	0-24 사이의 숫자	그리드에 사용될 고도 수준
--드래그 고도	0-24 사이의 숫자	이동 가능한 요소(예: 열 헤더)에 사용되는 고도 수준
--grouparea-색상	색상	그리드 그룹 영역 텍스트 색상
--grouparea-배경	색상	그리드 그룹 영역 텍스트 색상
--드롭 영역 텍스트 색상	색상	드롭 영역 텍스트 색상
--드롭 영역 아이콘 색상	색상	드롭 영역 아이콘 색상
--드롭 영역 배경	색상	드롭 영역 배경색
--드롭 영역에 드롭 배경	색상	드롭 색상의 드롭 영역 배경
--헤더 배경	색상	그리드 헤더 배경색
--헤더 텍스트 색상	색상	그리드 헤더 텍스트 색상
--헤더 선택 배경	색상	선택 시 그리드 헤더 배경색입니다(예: 열 선택).
--헤더-선택-텍스트-색상	색상	선택 시 그리드 헤더 텍스트 색상입니다(예: 열 선택).
--정렬 가능한 헤더 아이콘 호버 색상	색상	열을 정렬할 수 있을 때 그리드 헤더에 마우스를 올리면 아이콘 색상이 표시됩니다.
--정렬-헤더-아이콘-색상	색상	정렬된 테이블 헤더 아이콘 색상
--헤더-테두리-너비	테두리 너비	헤더 테두리에 사용되는 테두리 너비입니다.
--헤더 테두리 스타일	테두리 스타일	헤더 테두리에 사용되는 테두리 스타일입니다. '점선', '점선' 또는 '단색'일 수 있습니다.
--헤더-테두리-색상	색상	머리글 테두리에 사용되는 색상입니다.
--고스트 헤더 배경	색상	드래그된 헤더 배경색입니다.
--고스트-헤더-텍스트-색상	색상	드래그된 헤더 텍스트 색상입니다.
--고스트-헤더-아이콘-색상	색상	드래그된 헤더 아이콘 색상입니다.
--필터링 배경 및	색상	고급 필터링 "AND" 조건의 배경색입니다.
--필터링 배경-또는	색상	고급 필터링 "AND" 조건의 초점/선택 시 배경색입니다.
--필터링 배경 및--초점	색상	고급 필터링 "OR" 조건의 배경색입니다.
--필터링-배경-또는--초점	색상	고급 필터링 "OR" 조건의 초점/선택 시 배경색입니다.
--그리드 테두리 색상	색상	그리드를 둘러싸는 테두리 색상입니다.
--내용-배경	색상	그리드 본문 배경색입니다.
--내용-텍스트-색상	색상	그리드 본문 텍스트 색상입니다.
--행-홀수-배경	색상	홀수 행의 배경색입니다.
--행 짝수 배경	색상	짝수 행의 배경색입니다.
--행-홀수-텍스트-색상	색상	홀수 행의 텍스트 색상입니다.
--행-짝수-텍스트-색상	색상	짝수 행의 텍스트 색상입니다.
--행 선택 배경	색상	선택한 행 배경색입니다.
--트리 선택-필터링-행-텍스트-색상	색상	선택/필터링된 행 텍스트 색상
--행-선택-텍스트-색상	색상	선택한 행 텍스트 색상입니다.
--배경 내에서 셀 선택	색상	선택한 행/열 내에서 선택한 셀의 배경입니다.
--텍스트 색상 내에서 셀 선택	색상	선택한 행/열 내에서 선택한 셀의 색상입니다.
--행 선택-호버-배경	색상	선택한 행 호버 배경입니다.
--행-선택-호버-텍스트-색상	색상	선택한 행 호버 텍스트
--행-호버-배경	색상	호버 행 배경색입니다.
--행-호버-텍스트-색상	색상	호버 행 텍스트 색상입니다.
--행 테두리 색상	색상	그리드 본문 행 사이의 테두리 색상입니다.
--고정 테두리 너비	테두리 너비	고정된 행/열의 테두리 너비입니다.
--고정 테두리 스타일	테두리 스타일	고정된 행/열의 테두리 스타일입니다. '점선', '점선' 또는 '단색'일 수 있습니다.
--고정 테두리 색상	색상	고정된 행/열의 테두리 색상입니다.
--셀 활성 테두리 색상	색상	활성(초점을 맞춘) 셀 테두리 색상입니다.
--셀 선택 배경	색상	선택한 셀 배경색입니다.
--트리 선택-필터링-셀-텍스트-색상	색상	선택/필터링된 셀 텍스트 색상
--셀 선택 텍스트 색상	색상	선택한 셀 텍스트 색상입니다.
--셀 편집-배경	색상	편집 모드에서 셀의 배경색입니다.
--편집 모드 색상	색상	편집 모드의 텍스트 색상
--편집된 행 표시기	색상	편집된 행의 표시기 색상입니다.
--셀-새-색상	색상	편집되지 않은 새 셀의 텍스트 색상입니다. 그리드에 새 행을 추가할 때 사용됩니다.
--셀 편집된 값-색상	색상	셀 편집 값의 색상입니다.
--셀 비활성화 색상	색상	비활성화된 셀의 텍스트 색상입니다.
--크기 조정-선-색상	색상	그리드 헤더의 선 색상 크기가 조정됩니다.
--드롭 표시기 색상	색상	드롭 표시기의 색상입니다.
--그룹-라벨-열-이름-텍스트	색상	그리드 그룹 행 열 이름 텍스트 색상입니다.
--그룹-라벨-아이콘	색상	그리드 그룹 행 아이콘 색상입니다.
--그룹-라벨-텍스트	색상	그리드 그룹 행 텍스트 색상입니다.
--확장-모든-아이콘-색상	색상	그리드 헤더는 모든 그룹 행 아이콘 색상을 확장합니다.
--expand-all-icon-hover-color	색상	그리드 헤더는 모든 그룹 행 아이콘 호버 색상을 확장합니다.
--확장-아이콘-색상	색상	그리드 행 확장 아이콘 색상입니다.
--확장-아이콘-호버-색상	색상	그리드 행 확장 아이콘 마우스오버 색상입니다.
--활성-확장-아이콘-색상	색상	드롭 색상의 드롭 영역 배경입니다.
--active-expand-icon-hover-color	색상	드롭 색상의 드롭 영역 배경입니다.
--그룹 수-배경	색상	그리드 그룹 행 연속 배지 배경색입니다.
--그룹 수-텍스트-색상	색상	그리드 그룹 행 연속 배지 텍스트 색상입니다.
--그룹 행 배경	색상	그리드 그룹 행 배경색입니다.
--그룹 행 선택 배경	색상	드롭 색상의 드롭 영역 배경입니다.
--필터링 헤더 배경	색상	필터링된 열 헤더의 배경색입니다.
--필터링-헤더-텍스트-색상	색상	필터링된 열 헤더의 텍스트 색상입니다.
--필터링 행 배경	색상	필터링 행의 배경색입니다.
--필터링-행-텍스트-색상	색상	필터링 행의 텍스트 색상입니다.
--트리 필터링된 텍스트 색상	색상	초점이 맞춰진 그룹화 행 배경색입니다.
--본문-요약-배경	색상	본문에 위치한 요약 그룹의 배경색입니다.
--본문-요약-텍스트-색상	색상	본문에 위치한 요약 그룹의 텍스트 색상입니다.
--루트-요약-배경	색상	바닥글에 위치한 요약 그룹의 배경색입니다.
--루트-요약-텍스트-색상	색상	바닥글에 있는 요약 그룹의 텍스트 색상입니다.
--행 강조	색상	그리드 행 강조 색상입니다.
--행-고스트-배경	색상	드래그된 행의 배경색입니다.
--행-드래그-색상	색상	드래그 핸들의 색상입니다.
--드롭 영역 테두리 반경	0과 1 사이의 숫자	놓기 영역에 사용되는 테두리 반경입니다. 0과 1 사이의 분수, 픽셀 또는 퍼센트일 수 있습니다.

How to use

위에서 언급한 것처럼 테이블의 CSS 변수를 사용하면 그리드 스타일을 지정할 수 있습니다. 다음 헤더 배경과 텍스트 색상 등을 변경하여 어두운 테마를 사용하도록 그리드를 변경하고 싶다고 가정해 보겠습니다. 선택적으로 dark-theme.css라는 파일에서 그렇게 할 수 있습니다.

import "./dark-theme.css";

.ig-data-grid {
  /* shared variables used in custom properties */
  --cell-text-color:#58258b;
  --cell-background:#191919;
  --cell-selected-background: #58258b;
  --cell-selected-within-text-color: #191919;
  --cell-selected-within-background: #58258b;

  --row-selected-background:var(--cell-selected-background);
  --row-hover-background:var(--cell-selected-background);
  --row-hover-text-color:var(--cell-background);

  --header-background: #58258b;
  --header-text-color: #191919;
  --header-separator-background: #58258b;
  --header-separator-width: 5px;

  --section-header-background: #191919;
  --section-header-text-color: #58258b;
  --section-header-selected-background: #58258b;
  --section-header-selected-text-color: #191919;

  --row-separator-background: #191919;
  --row-separator-last-sticky-row-background: #191919;
  --row-separator-pinned-row-background: #58258b;
  --row-separator-sticky-row-background: #58258b;

  --column-resizing-separator-background: #58258b;
  --column-moving-separator-background: #58258b;


  --filtering-header-background: #272727;
  --filtering-header-text-color: #ffffff;
  --filtering-row-background: #272727;
  --filtering-row-text-color: #ffffff;
  --tree-filtered-text-color: #ffffff;

  --summary-root-background: #7446b9;
  --summary-root-label-text-color: #191919;
  --summary-root-value-text-color: #191919;
}

.ig-grid-column-options {
  --background-color: black;
  --text-color: #7446b9;
  --summary-list-text-color: #7446b9;
  --summary-list-background: #191919;
}

.ig-data-grid-toolbar {
  --background-color: #191919;
  --text-color: #58258b;
  --dialog-background-color: #191919;
}

.ig-column-chooser {
  --background-color: #191919;
  --title-color: green;
  --select-all-caption-text-color: #58258b;
  --search-icon-color: #58258b;
  --search-text-color: #58258b;
  --search-background-color: #191919;
  --search-border-color: #58258b;
  --search-text-style: 12px 'Courier';
}

.ig-column-pinning {
  --background-color: white;
  --text-color: #7446b9;
  --select-all-caption-text-color: #58258b;
  --search-icon-color: #58258b;
  --search-text-color: #58258b;
  --search-background-color: #191919;
  --search-border-color: #58258b;
  --search-text-style: 12px 'Courier';
}