색을 #111a26 처럼 숫자로 넣으면 그 화면은 영영 그 색입니다. 밝은 자리에서도 쓰려면 화면을 한 벌 더 만들어야 하고, 두 벌이 되는 순간 한쪽만 고치는 일이 생깁니다.

대신 색을 이름으로 넣습니다.

`` 채움: var(--sc-panel, #111a26) └ 이름 ─┘ └ 이 이름을 모르는 데서 쓸 색 ┘ ``

이름은 26가지가 있고 뜻으로 묶여 있습니다 — 표면(바탕·판·머리띠·칩…), 글자(본문·보조·흐림·제목), 계열(계통·전기 / 태양·직류), 상태(정상·주의·이상), 설비 심볼(외곽선·몸통). 뜻으로 고르는 것이 요령입니다. '이 파랑' 이 아니라 '제목' 을 고르면, 밝은 테마에서 제목이 어떤 파랑이어야 하는지는 테마가 알아서 정합니다.

### 넣는 법

색 칸 오른쪽 ▾ 를 누르면 토큰 목록이 뜹니다. 고르면 이름이 들어가고, 칸에는 var(...) 대신 우리말 이름표(예: 판)가 보입니다. 스와치는 늘 지금 테마에서의 실제 색을 보여 줍니다 — 테마를 바꾸면 스와치 색도 따라 바뀝니다(문서 값은 그대로입니다).

숫자로 되돌리려면 목록 맨 위의 토큰 떼기를 누릅니다. 지금 보이는 색으로 굳습니다.

### 보는 법

툴바의 ☀ 를 누르면 밝은 테마로 바뀝니다. 작화 캔버스와 운전 화면이 함께 바뀌므로, 밝게 쓸 화면을 밝은 캔버스에서 만들 수 있습니다. 어두운 캔버스에서 만들고 나중에 켜 보면 그때서야 안 읽히는 글자를 만나게 됩니다.

테마는 기기마다 따로입니다(local:theme). 관제실 화면은 어둡게 두고 현장에 나간 폰만 밝게 볼 수 있습니다 — 한 사람이 바꿔도 남의 화면은 그대로입니다. 화면에 단추를 놓고 싶으면 local:theme 에 토글 쓰기를 걸면 됩니다(태양광 샘플의 ☀ 단추가 그것입니다).

### 테마를 새로 만들려면

툴바 테마 단추 옆 ▾ → 테마 편집…. 왼쪽에서 새로(또는 복제), 오른쪽 표에서 색을 고칩니다.

표는 한 줄이 토큰 하나입니다.

| 칸 | 뜻 | |---|---| | 물려받은 색 | 바탕(어둡게/밝게)에서 그대로 받는 색 | | 이 테마 | 덮어쓴 색. × 를 누르면 도로 물려받습니다 | | 명암비 | 그 글자를 가장 나쁜 바탕에 올렸을 때의 값. 4.5 미만이면 빨갛게 |

26개를 다 정할 필요가 없습니다. 바꿀 것만 정하고 나머지는 물려받게 두십시오 — 나중에 토큰이 늘어도 새 색이 저절로 따라옵니다. 다 적어 두면 그 자리만 옛 색으로 남습니다.

만든 테마는 이 장비에 저장됩니다. 이 장비에 붙는 모든 화면·모든 사람이 같은 목록을 보고, 그중 무엇을 볼지는 각자 고릅니다. 화면 문서에는 안 들어가므로 문서를 주고받아도 따라가지 않습니다.

기본 두 벌(어둡게·밝게)은 앱이 갖고 있어 고칠 수 없습니다. 바꾸고 싶으면 복제해서 쓰십시오.

### 색 자체를 바꾸려면

기본 두 벌의 값은 화면이 아니라 앱의 스타일 한 곳(scada.css)에 있습니다. 거기서 한 줄을 고치면 그 이름을 쓰는 모든 요소가 함께 바뀝니다. 어두운 값은 :root, 밝은 값은 [data-scada-theme="light"] 에 있습니다.

두 가지를 지킵니다.

* 대체값과 어두운 값은 같아야 합니다. 문서에 적힌 #111a26 은 이 스타일이 없는 곳(내보낸 파일·남의 뷰어)에서 쓰이는 색입니다. 어긋나면 같은 문서가 안팎에서 다른 색으로 보입니다. * 상태 색은 색상(hue)을 바꾸지 않습니다. 밝은 바탕에서 안 읽히면 어둡게만 합니다. 정상 초록이 테마에 따라 청록이 되면, 두 테마를 오가는 사람이 매번 다시 배워야 합니다.

### 문서 테마와는 다른 것입니다

페이지 배경 의 '테마' 는 그 문서의 배경·강조색 묶음입니다(문서에 저장됩니다). 여기 밝게/어둡게는 보는 기기의 것이고 문서를 건드리지 않습니다. 둘은 함께 씁니다.