/* ========================================================================== Kilho.net - 색 테마 -------------------------------------------------------------------------- 색은 기존 Bootstrap(Porto default skin) 팔레트를 그대로 유지한다. 아래 값은 운영 중인 global.kilho.net 렌더링에서 픽셀 단위로 추출한 것. 배경(사이드바·본문·헤더) #FFFFFF 테두리 / 구분선 #F0F0F0 · #F2F2F2 본문 글자 #212529 보조 #777777 메뉴 #444444 primary (Download 버튼) #0088CC info (Portable 버튼) #17A2B8 warning (Forum 버튼) #FFC107 푸터 #1C2023 나머지(secondary/success/error)는 Bootstrap 4 기본값을 따른다. 테마는 / 로 전환. 전환 로직은 head.php 의 인라인 스크립트 + js/app.js 참고. 변수 이름은 css/app.css 의 컴포넌트(.btn 등)와 head.php 의 @theme 이 함께 참조하므로 임의로 바꾸지 말고, 값(색)만 수정할 것. ※ head.php 의 @theme 에도 같은 값이 기본값으로 들어가 있다. 함께 고칠 것. ========================================================================== */ /* ---------- Light : kilho (기존 Bootstrap 색) ---------- */ html[data-theme="kilho"] { color-scheme: light; /* 바탕 — 원본은 전부 흰 배경이었다 */ --color-base-100: #ffffff; --color-base-200: #f7f7f7; /* 호버 등 아주 옅은 표면 */ --color-base-300: #f0f0f0; /* 테두리 · 구분선 */ --color-base-content: #212529; /* 제목 */ --color-body: #777777; /* 본문 */ --color-menu: #444444; /* 사이드 메뉴 */ --color-input: #495057; /* 입력·선택 글자 */ --color-input-line: #ced4da; /* 입력·선택 테두리 */ --color-footer: #555555; /* 푸터 글자 */ --color-flag-line: #d9d9d9; /* 언어 국기 버튼 테두리 (원본 실측값) */ --color-ground: #e9edf2; /* 넓은 화면에서 상자 바깥 바닥 (흰 상자와 1.18:1) */ --color-shell-line: #dce2e9; /* 그 상자의 좌우 테두리 (흰 상자와 1.30:1) */ /* 브랜드 */ --color-primary: #0088cc; --color-primary-content: #ffffff; --color-secondary: #6c757d; --color-secondary-content: #ffffff; --color-accent: #2baab1; --color-accent-content: #ffffff; --color-neutral: #1c2023; /* 푸터 */ --color-neutral-content: #ffffff; /* 상태 (Bootstrap 4 기본값) */ --color-info: #17a2b8; --color-info-content: #ffffff; --color-success: #28a745; --color-success-content: #ffffff; --color-warning: #ffc107; --color-warning-content: #ffffff; /* 원본이 노랑 위에 흰 글자를 쓴다 */ --color-error: #dc3545; --color-error-content: #ffffff; /* 형태 — Bootstrap 4 의 0.25rem */ --radius-selector: 0.25rem; --radius-field: 0.25rem; --radius-box: 0.25rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 0; --noise: 0; } /* ---------- Dark : kilho-dark ---------- 원본에 없던 모드지만, 다른 사이트처럼 보이지 않는 것이 원칙이다. · 브랜드색은 라이트와 "완전히 같은" #0088CC 를 쓴다. (밝게 바꾸면 로고·버튼 색과 어긋나 이질감이 생긴다) · 바탕은 중성 회색이 아니라 브랜드 색조(파랑)를 머금은 남색으로 둔다. · 상태색(info/success/warning/error)도 라이트와 동일 — 채운 버튼의 대비는 글자색과의 관계라 배경이 바뀌어도 그대로다. 대비 검증 (WCAG): 본문/배경 8.3:1 · 제목/배경 13.7:1 · 메뉴/배경 11.0:1 · 활성메뉴(#0088CC)/배경 4.52:1 (AA) · 버튼글자/브랜드 3.89:1 (라이트와 동일) */ html[data-theme="kilho-dark"] { color-scheme: dark; --color-base-100: #0f1a24; /* 남색기가 도는 바탕 */ --color-base-200: #0b141c; --color-base-300: #1e3040; /* 테두리 · 구분선 */ --color-base-content: #dbe4ec; /* 제목 */ --color-body: #a7b4c0; /* 본문 (8.3:1) */ --color-menu: #c3cdd7; /* 사이드 메뉴 (10.9:1) */ --color-input: #c3cdd7; /* 입력·선택 글자 */ --color-input-line: #2b3f52; /* 입력·선택 테두리 */ --color-footer: #8d99a6; /* 푸터 글자 */ --color-flag-line: #2b3f52; /* 언어 국기 버튼 테두리 */ /* 넓은 화면의 바닥은 바탕보다 어둡게 둔다. 라이트는 흰 상자가 떠 보이고 다크는 상자가 밝은 쪽이라, 어느 쪽이든 상자가 앞에 있게 된다. 바닥/상자 1.10:1, 테두리/바닥 1.43:1 (라이트는 1.18:1 · 1.11:1) */ --color-ground: #070e14; --color-shell-line: #1e3040; /* base-300 과 같은 선 */ /* 브랜드 — 라이트와 동일 */ --color-primary: #0088cc; --color-primary-content: #ffffff; --color-secondary: #8b959e; /* 회색 계열이라 가독성 위해 한 단계만 밝힘 */ --color-secondary-content: #0b141c; --color-accent: #2baab1; --color-accent-content: #ffffff; --color-neutral: #08111a; /* 푸터 — 바탕보다 한 단계 더 어둡게 */ --color-neutral-content: #dbe4ec; /* 상태 — 라이트와 동일 */ --color-info: #17a2b8; --color-info-content: #ffffff; --color-success: #28a745; --color-success-content: #ffffff; --color-warning: #ffc107; --color-warning-content: #ffffff; --color-error: #dc3545; --color-error-content: #ffffff; --radius-selector: 0.25rem; --radius-field: 0.25rem; --radius-box: 0.25rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 0; --noise: 0; }