# 다크모드 색상 + 입력 컨트롤 디자인 — 통합 지시서 이 문서 전체를 Claude Code에 붙여넣고 "이 지시서대로 적용해줘"라고 요청하세요. **패치 04 ~ 08을 하나로 합친 것입니다** — 이것만 적용하면 됩니다. --- 당신은 `UbisamBase` WPF 솔루션(.NET Framework 4.8, MVVM + CommunityToolkit.Mvvm)에서 작업합니다. 아래 §3의 파일은 전문이 주어져 있으니 **그대로 덮어쓰거나 새로 만드세요.** 값을 임의로 재해석하지 마세요. ## 1. 다크모드 색상 규칙 검정 바탕이 아니라 **차가운 회색 3단 층**입니다. 층이 밝아지는 순서가 구조를 만듭니다. | 층 | 값 | 무엇 | | --- | --- | --- | | 바탕 | `#23262B` | 컨텐츠 영역 | | 판 | `#2A2E34` | 상단바 · 하단 탭 바 · 서브탭 바 | | 입력 | `#2F343A` | TextBox · ComboBox · 표 헤더 | | 경계 | `#3A3F47` (셸) / `#454B54` (입력) | 헤어라인 1px | | 본문 글자 | `#E8EAED` · 보조 `#C2C7CE` · 흐린 `#8A9099` | | **accent는 두 단계로 씁니다.** 이 구분이 핵심입니다. | 역할 | 다크 | 라이트 | 쓰는 곳 | | --- | --- | --- | --- | | `Ubisam.Brush.Accent` | `#4DA6F5` | `#2196F3` | 선 · 글자 · 탭 밑줄 · 포커스 테두리 — 바탕 위에 얹히는 것 | | `Ubisam.Brush.Accent.Fill` | `#1E7FD4` | `#1D82E8` | **글자를 얹는 채움면** — 주 버튼, 로고 타일, 선택된 항목, 체크박스 | | `Ubisam.Brush.Accent.OnFill` | `#F2F7FC` | `#FFFFFF` | 그 채움면 위의 글자 · 체크 표시 | 밝은 단계(`#4DA6F5`)에 검은 글자도, 흰 글자도 얹지 마세요 — 대비가 부족합니다. 글자가 올라가는 면은 항상 깊은 단계(`#1E7FD4`, 흰 글자와 약 4.2:1)를 씁니다. ## 2. 컨트롤 디자인 규칙 셸과 같은 도면 톤입니다. - **각진 모서리** — 라운드 없음. 알약형 세그먼트, 둥근 버튼 금지 - **1px 헤어라인 경계** — 두꺼운 테두리나 그림자로 층을 만들지 않음 - **포커스** = accent 테두리 + 옅은 글로우(BlurRadius 6, 55%). 브라우저/OS 기본 포커스 링 사용 금지 - **비활성** = 45% 불투명도 또는 어두운 배경 + 흐린 글자 - **높이 34** 통일 (TextBox · ComboBox · Button) - **상태 열은 태그로** — 판정·레벨 같은 열을 맨 텍스트로 두면 예외 행이 안 보입니다 - **수치 열은 우측 정렬** + 자릿수 고정(`tabular-nums`) 컨트롤별로: | 컨트롤 | 디자인 | | --- | --- | | TextBox | 어두운 입력면, 포커스 시 accent 테두리 + 글로우, 읽기 전용은 어두운 배경 | | ComboBox | 각진 닫힘 상태 + 우측 화살표(열리면 뒤집힘 + accent), 드롭다운은 입력창 **바로 아래에 붙고** 위 테두리 없음, 선택 항목은 `Accent.Fill` + 흰 글자 | | CheckBox | 17×17 각진 박스, 체크 시 `Accent.Fill` + 흰 체크 | | Button | 암시적 = 보조(외곽선). 주 동작은 `Ubisam.Style.Button.Primary`(`Accent.Fill` 채움), 세 번째는 `.Ghost` | | ListView + GridView | 읽기 전용 표. 헤더 회색 판 + 세로 구분선, 행 hover/선택 accent 틴트 | | DataGrid | 편집 가능한 격자. 정렬 열은 accent 글자 + 화살표, 행 머리(26px)가 선택 시 accent 바, 편집 중인 셀만 accent 테두리, 짝수 행 옅은 줄무늬 | | Slider | 얇은 홈 트랙 + 지나온 구간만 accent, 썸은 각진 10×20 세로 막대(둥근 다이얼 아님) | | ScrollBar | 폭 10, 트랙 비움, 썸만 회색 → hover 시 accent, 화살표 버튼 없음 | 전부 **암시적 스타일**(`x:Key` 없음)이라 각 View를 고칠 필요가 없습니다. 예외를 두려면 그 컨트롤에 `Style="{x:Null}"`을 주세요. ## 3. 파일 전문 ### `src/UbisamBase.Core/Themes/Colors.Dark.xaml` ```xml #FF4DA6F5 ``` ### `src/UbisamBase.Core/Themes/Colors.Light.xaml` ```xml #FF2196F3 ``` ### `src/UbisamBase.Core/Themes/Controls.xaml` ```xml M1,6 L5.5,1 L10,6 M1,1 L5.5,6 L10,1 ``` ## 4. `src/UbisamBase.Core/Themes/ShellStyles.xaml` — 머지 추가 `Controls.xaml`을 머지 목록에 넣고, ComboBox 드롭다운 그림자를 정의하세요. ```xml ``` ```xml ``` **중요 — 암시적 스타일이 안 걸릴 때:** `Controls.xaml`을 `ShellWindow.Resources`에만 머지하면, 리소스 조회 범위 밖의 `UserControl`에는 적용되지 않습니다. 콤보박스가 여전히 WPF 기본 크롬(둥근 모서리 + 밝은 회색)으로 보이면 `App.xaml`의 `Application.Resources`에 같은 머지를 넣으세요. ## 5. `src/UbisamBase.Core/Shell/ShellWindow.xaml` — 로고 타일 로고 타일은 글자를 얹는 채움면이므로 밝은 단계가 아니라 채움 단계를 씁니다. ```xml ``` 반대로 `ShellStyles.xaml`의 **좌측 네비 선택 테두리**와 **하단 탭 인디케이터 바**는 글자를 얹지 않는 선이므로 `Accent`(밝은 단계)가 맞습니다 — 그대로 두세요. ## 6. 상태 태그 쓰는 법 ```xml ``` | 스타일 쌍 | 쓰는 곳 | | --- | --- | | `Ubisam.Style.Tag.Accent` + `TagText.Accent` | 정상 · 완료 (양품, Info) | | `Ubisam.Style.Tag.Outline` + `TagText.Outline` | 주의 · 예외 (재검, Warn) — 외곽선만이라 눈에 걸립니다 | | `Ubisam.Style.Tag` + `TagText` | 중립 · 대기 | ## 7. DataGrid 쓰는 법 ```xml ``` 수치 열에는 반드시 `CellStyle="{StaticResource Ubisam.Style.NumericCell}"`을 주세요. ## 8. 확인 1. 다크에서 콤보박스가 **어두운 배경 + 각진 모서리**인지 — 둥근 밝은 회색이면 §4의 머지 문제입니다 2. 콤보박스를 열면 드롭다운이 입력창 바로 아래에 붙고, 선택 항목이 진한 파랑 + 흰 글자인지 3. 입력창을 클릭하면 accent 테두리 + 옅은 글로우가 생기는지 4. 주 버튼("저장")이 진한 파랑(#1E7FD4) + 흰 글자인지 5. 체크박스 체크 표시가 흰색인지 — 검정이면 파일이 갱신되지 않은 것입니다 6. 화면 배율 슬라이더의 왼쪽 구간만 파랗게 차고, 썸이 각진 세로 막대인지 7. 스크롤바가 폭 10의 얇은 막대이고 hover에서 accent로 바뀌는지 8. 표의 수치 열이 모두 우측 정렬인지 9. 바탕(#23262B) → 판(#2A2E34) → 입력(#2F343A) 순으로 밝아지는 층이 눈에 보이는지 10. 라이트 테마가 이전과 동일한지 — 새 키 2개가 추가됐을 뿐입니다 ## 9. 하지 말 것 - 모듈 View의 내용은 건드리지 마세요 — 테마와 스타일만 바꿉니다 - 라운드 모서리를 되살리지 마세요 (`CornerRadius`는 태그의 3px만 예외) - `Controls.xaml`의 폰트 참조를 `StaticResource`로 바꾸지 마세요 — 머지 시점 때문에 로드가 실패합니다 - `TabManager`, `EventBus`, `ToastService`, `AuthService`, `LogService`의 구조나 시그니처를 바꾸지 마세요