릴리즈 3.2.2507 이상
에디터 UI 색을 CSS 변수를 활용하여 커스텀하게 설정할 수 있습니다.
설정 방법
style 태그를 이용해 아래와 같이 CSS 변수를 설정해 사용합니다.
<style>
.se {
--se-editor-border: #39b6b8; /* 에디터 바깥 테두리 색 */
--se-editor-contents-bg: #fdfdfd; /* 에디터 편집영역 배경 색 */
--se-toolbar-fg: #4f898a; /* 툴&리사이즈 바 아이콘&텍스트 색 */
--se-toolbar-bg: #f4f4f4; /* 툴&리사이즈 바 배경 색 */
--se-toolbar-border: #39b6b8; /* 툴&리사이즈 바 테두리 색 */
--se-dialog-border: #4f898a; /* 다이얼로그&팝업 테두리 색 */
}
</style>
| 적용 전 | 적용 후 |
|---|---|
|
|
설정할 수 있는 변수 목록
분류 | CSS 변수 | 예시 값 | 설명 |
|---|---|---|---|
에디터 | --se-editor-border | #39b6b8 | 에디터 바깥 테두리 색 |
--se-editor-contents-fg | #39b6b8 | 에디터 편집영역 텍스트 색 | |
--se-editor-contents-bg | #39b6b8 | 에디터 편집영역 배경 색 | |
--se-editor-shadow | 0px 0px 1px 1px rgba(0, 0, 0, 0.8) | 에디터 바깥 그림자 | |
--se-editor-header-shadow | 0px 0px 1px 1px rgba(0, 0, 0, 0.8) | 에디터 헤더(메뉴/툴바 영역) 그림자 | |
메뉴 | --se-menu-bar-fg | #39b6b8 | 메뉴바 텍스트 색 |
--se-menu-bar-bg | #39b6b8 | 메뉴바 배경 색 | |
--se-menu-bar-hover-bg | #39b6b8 | 메뉴바 버튼 마우스 오버시 색 | |
--se-menu-bar-active-bg | #39b6b8 | 메뉴바 버튼 활성화 색 | |
--se-menu-items-border | #39b6b8 | 메뉴가 열렸을 때 보여지는 메뉴 목록 레이어 테두리 색 | |
--se-menu-items-fg | #39b6b8 | 메뉴가 열렸을 때 보여지는 메뉴 목록 레이어 아이콘&텍스트 색 | |
--se-menu-items-bg | #39b6b8 | 메뉴가 열렸을 때 보여지는 메뉴 목록 레이어 배경 색 | |
--se-menu-items-shadow | 0px 0px 1px 1px rgba(0, 0, 0, 0.8) | 메뉴가 열렸을 때 보여지는 메뉴 목록 레이어 그림자 | |
툴&리사이즈 바 | --se-toolbar-fg | #39b6b8 | 툴&리사이즈 바 아이콘&텍스트 색 |
--se-toolbar-bg | #39b6b8 | 툴&리사이즈 바 배경 색 | |
--se-toolbar-border | #39b6b8 | 툴&리사이즈 바 테두리 색 | |
--se-toolbar-active-bg | #39b6b8 | 툴바 버튼/드롭다운 활성화 색 | |
--se-toolbar-hover-bg | #39b6b8 | 툴바 버튼/드롭다운 마우스 오버시 색 | |
--se-toolbar-dropdown-menu-fg | #39b6b8 | 툴바 드롭다운이 열렸을 때 보여지는 메뉴 목록 레이어의 아이콘&텍스트 색 | |
--se-toolbar-dropdown-menu-active-bg | #39b6b8 | 툴바 드롭다운이 열렸을 때 보여지는 메뉴 목록 레이어의 버튼 활성화 색 | |
--se-toolbar-dropdown-menu-hover-bg | #39b6b8 | 툴바 드롭다운이 열렸을 때 보여지는 메뉴 목록 레이어의 마우스 오버시 색 | |
--se-toolbar-dropdown-menu-shadow | 0px 0px 1px 1px rgba(0, 0, 0, 0.8) | 툴바 드롭다운이 열렸을 때 보여지는 메뉴 목록 레이어의 그림자 | |
다이얼로그 &팝업 | --se-dialog-title-fg | #39b6b8 | 다이얼로그 제목 텍스트 색 |
--se-dialog-tab-menu-fg | #39b6b8 | 다이얼로그&팝업 탭 메뉴 아이콘&텍스트 색 | |
--se-dialog-tab-menu-border | #39b6b8 | 다이얼로그&팝업 탭 메뉴 테두리 색 | |
--se-dialog-tab-menu-hover-bg | #39b6b8 | 다이얼로그&팝업 탭 메뉴 마우스 오버시 색 | |
--se-dialog-tab-menu-non-active-fg | #39b6b8 | 다이얼로그&팝업 비활성화된 탭 메뉴 아이콘&텍스트 색 | |
--se-dialog-tab-menu-non-active-bg | #39b6b8 | 다이얼로그&팝업 비활성화된 탭 메뉴 배경 색 | |
--se-dialog-fg | #39b6b8 | 다이얼로그&팝업 텍스트 색 | |
--se-dialog-bg | #39b6b8 | 다이얼로그&팝업 배경 색 | |
--se-dialog-border | #39b6b8 | 다이얼로그&팝업 테두리 색 | |
--se-dialog-button-fg | #39b6b8 | 다이얼로그&팝업 하단 버튼 텍스트 색 | |
--se-dialog-button-bg | #39b6b8 | 다이얼로그&팝업 하단 버튼 배경 색 | |
--se-dialog-button-border | #39b6b8 | 다이얼로그&팝업 하단 포인트 버튼 테두리 색 | |
--se-dialog-button-point-fg | #39b6b8 | 다이얼로그&팝업 하단 포인트 버튼 텍스트 색 | |
--se-dialog-button-point-bg | #39b6b8 | 다이얼로그&팝업 하단 포인트 버튼 배경 색 | |
--se-dialog-shadow | 0px 0px 1px 1px rgba(0, 0, 0, 0.8) | 다이얼로그&팝업 그림자 | |
--se-dialog-shadow-reversed | 0px 0px 1px 1px rgba(0, 0, 0, 0.8) | 다이얼로그&팝업 그림자 (뒤집혔을 때) | |
다이얼로그 UI 컴포넌트 | --se-ui-component-fg | #39b6b8 | 다이얼로그&팝업 UI 컴포넌트 아이콘&텍스트 색 |
--se-ui-component-bg | #39b6b8 | 다이얼로그&팝업 UI 컴포넌트 배경 색 | |
--se-ui-component-border | #39b6b8 | 다이얼로그&팝업 UI 컴포넌트 테두리 색 | |
--se-ui-component-focus-border | #39b6b8 | 다이얼로그&팝업 UI 컴포넌트 포커스 되었을 때 테두리 색 | |
--se-ui-component-active-bg | #39b6b8 | 다이얼로그&팝업 UI 컴포넌트 활성화 배경 색 | |
--se-ui-component-hover-bg | #39b6b8 | 다이얼로그&팝업 UI 컴포넌트 마우스 오버시 배경 색 | |
--se-ui-component-point-active-bg | #39b6b8 | 다이얼로그&팝업 UI 컴포넌트 포인트 활성화 배경 색 | |
--se-ui-component-point-border | #39b6b8 | 다이얼로그&팝업 UI 컴포넌트 포인트 활성화 테두리 색 | |
--se-ui-component-menu-shadow | 0px 0px 1px 1px rgba(0, 0, 0, 0.8) | 다이얼로그&팝업 UI 컴포넌트 메뉴 목록 레이어의 그림자 | |
눈금자 | --se-ruler-division | #39b6b8 | 눈금자 구분선 색 |
--se-ruler-number | #39b6b8 | 눈금자 숫자 색 | |
--se-ruler-bg | #39b6b8 | 눈금자 비활성화 영역 색 | |
--se-ruler-active-bg | #39b6b8 | 눈금자 활성화 영역 색 | |
셀렉션 | --se-selection | #39b6b8 | 텍스트 셀렉션 색 |
--se-fomula-selection | #39b6b8 | 표 수식 범위 셀렉션 테두리 색 | |
--se-multi-selection-bg | #39b6b8 | AP 객체 멀티 셀렉션 배경 색 | |
--se-multi-selection-border | #39b6b8 | AP 객체 멀티 셀렉션 테두리 색 | |
모바일 핸들 | --se-mobile-handle | #39b6b8 | 모바일 셀렉션 핸들 색 |
테이블 핸들 | --se-table-handle-bar | #39b6b8 | 테이블 핸들 바 색 |
--se-table-handle-bar-active | #39b6b8 | 활성화된 테이블 핸들 바 색 | |
--se-table-handle-select-all | #39b6b8 | 테이블 핸들의 전체선택 버튼 색 | |
--se-table-handle-resize | #39b6b8 | 테이블 핸들의 리사이즈 버튼 색 | |
--se-table-handle-text | #39b6b8 | 테이블 핸들의 열(A, B, C, ...)/행(1, 2, 3, ...) 머리글 텍스트 | |
드로잉 오브젝트 핸들 | --se-resize-handle-border | #39b6b8 | 드로잉 오브젝트 핸들 테두리 색 |
--se-resize-handle-dot | #39b6b8 | 드로잉 오브젝트 핸들의 크기 조절 손잡이 색 | |
--se-resize-handle-rotation | #39b6b8 | 드로잉 오브젝트 핸들의 회전 손잡이 색 | |
--se-resize-handle-adj | #39b6b8 | 드로잉 오브젝트 핸들의 도형 조절점 손잡이 색 | |
--se-resize-handle-connector | #39b6b8 | 드로잉 오브젝트 핸들의 연결점 색 | |
테이블 수식 표시 | --se-table-formula-label | #39b6b8 | 테이블에서 수식이 있는 셀 표식 색 |
대체 이미지 대체 비디오 | --se-alternative-image-fg | #39b6b8 | 대체 이미지/비디오 아이콘 색 |
--se-alternative-image-bg | #39b6b8 | 대체 이미지/비디오 배경 색 | |
--se-alternative-image-border | #39b6b8 | 대체 이미지/비디오 테두리 색 | |
레이어 속성 버튼 | --se-property-button-fg | #39b6b8 | 레이어 속성 버튼 아이콘 색 |
--se-property-button-bg | #39b6b8 | 레이어 속성 버튼 배경 색 | |
--se-property-button-border | #39b6b8 | 레이어 속성 버튼 테두리 색 |