테마·스타일

라이트/다크 테마, 셀·헤더 스타일, CSS 변수 커스터마이징을 설명합니다.

피벗 UI의 색·톤은 Book의 테마로 정하고, 값 셀의 글자색·배경 등은 값 필드 스타일로 지정합니다.
화면 전체 팔레트를 변경하려면 CSS 변수(--rpivot-*)를 오버라이드합니다.

Book 개요는 피벗 북(Book)을, 스타일 CSS 로드는 설치를 참고하세요.

스타일 CSS

테마·기본 레이아웃이 적용되려면 RealPivot2 스타일 시트를 반드시 로드해야 합니다.

import 'realpivot2/style.css';

<link href="../styles/realpivot2-style.css" rel="stylesheet" />

테마 지정

테마는 Book의 general 속성에서 설정합니다. (PivotBookGeneralOptions)

속성	설명	기본
`theme`	`'light'` · `'dark'` · `'system'`	미지정 시 시스템(OS) 테마
`lightTheme`	라이트일 때 적용할 `data-theme` 이름	`'light'`
`darkTheme`	다크일 때 적용할 `data-theme` 이름	`'dark'`

빌트인 팔레트는 light · dark 입니다. theme가 'system'이거나 비어 있으면, OS의 다크 모드 여부에 따라 lightTheme 또는 darkTheme가 선택됩니다.

const config = {
  general: {
    theme: 'light', // 'light' | 'dark' | 'system'
  },
  tables: {
    name: 'sales',
    cube: 'sales',
    // fields ...
  },
};

커스텀 팔레트를 사용할 때는 theme에 이름을 직접 지정하지 말고, lightTheme / darkTheme에 CSS에서 정의한 테마 이름을 지정합니다.

general: {
  theme: 'light',
  lightTheme: 'brand',
  // darkTheme: 'brand-dark',
}

API로 바꾸기

const general = control.book.general;
 
general.updateOption('theme', 'dark');
general.updateOption('theme', 'light');
general.updateOption('theme', 'system');
 
// 커스텀 팔레트
general.updateOption('theme', 'light');
general.updateOption('lightTheme', 'brand');

옵션 변경 규칙은 개발 가이드를 참고하세요.

CSS 변수로 커스터마이즈

피벗 루트(.rpivot-root)에 data-theme가 붙고, 그 안의 --rpivot-* 변수가 색·테두리를 결정합니다.
커스텀 테마는 동일 셀렉터로 변수를 덮어쓴 뒤 lightTheme / darkTheme에 그 이름을 지정하면 됩니다.

자주 쓰는 변수는 다음과 같습니다.

변수	용도
`--rpivot-page-bg-color`	페이지 배경
`--rpivot-header-bg-color` / `--rpivot-header-color`	헤더 배경·글자
`--rpivot-header-bd-color`	헤더 테두리
`--rpivot-header-total-bg` / `--rpivot-header-grand-bg`	소계·총계 헤더
`--rpivot-value-cell-bg` / `--rpivot-value-cell-color`	값 셀
`--rpivot-value-cell-d-bg` / `--rpivot-value-cell-g-bg`	소계·총계 값 셀
`--rpivot-fieldbar-bg`	필드 바
`--rpivot-select-bg` / `--rpivot-select-bd`	선택 영역
`--rpivot-book-header-bg`	북 헤더
`--rpivot-pagetab-selected-color`	선택 페이지 탭

.rpivot-root[data-theme='brand'] {
  --rpivot-page-bg-color: #f7f9fc;
  --rpivot-header-bg-color: #e8eef8;
  --rpivot-header-color: #1a2744;
  --rpivot-value-cell-color: #222;
  --rpivot-pagetab-selected-color: #2563eb;
}

general: {
  theme: 'light',
  lightTheme: 'brand',
}

다크 빌트인은 .rpivot-root[data-theme='dark']에 정의되어 있습니다. 필요하면 같은 방식으로 변수를 덮어쓰세요.

값 필드 스타일

특정 측정값 셀의 글자·배경·굵기 등은 값 필드 옵션으로 지정합니다. (PivotValueFieldOptions)
소계·총계용 속성을 따로 둘 수 있으며, 자세한 예는 소계·총계에도 있습니다.

속성	적용 대상
`style` / `className`	일반 값 셀 (`className` 미지정 시 소계·총계에도 사용)
`totalStyle` / `totalClass`	소계 셀
`grandStyle` / `grandTotalClass`	총계 셀

style 계열은 PivotCellStyle 객체이고, className 계열은 CSS 클래스 이름입니다.
인라인 style이 있으면 클래스보다 우선합니다. totalStyle / grandStyle은 일반 style에 병합된 뒤 적용됩니다.

fields: {
  values: [
    {
      name: '판매수량',
      className: 'qty',
      totalClass: 'qty-total',
      grandTotalClass: 'qty-grand',
      style: { color: 'green' },
      totalStyle: { color: 'darkblue' },
      grandStyle: { color: 'darkblue', backgroundColor: '#f0f8ff' },
    },
  ],
}

.qty {
  font-variant-numeric: tabular-nums;
}
.qty-total {
  font-weight: 600;
}
.qty-grand {
  font-weight: 700;
}

PivotCellStyle 주요 속성

속성	설명
`color` / `backgroundColor`	글자색 · 배경색
`bold` / `italic` / `underline`	글꼴 장식
`align`	정렬
`icon` · `iconSet` · `iconIndex` 등	아이콘 표시(셀 오버레이와 연계)

조건에 따라 셀을 강조하려면 값 필드의 highlight 규칙을 사용합니다. 규칙마다 style / className을 둘 수 있습니다.

화면에서 바꾸기

행 바 메뉴의 테마에서 시스템 / 밝게 / 어둡게를 선택할 수 있습니다.
값 필드 다이얼로그에서는 일반·소계·총계별 색·굵기·정렬 등을 편집할 수 있습니다.