/* 도롱 색 토큰 — 웹 전체(채팅·할 일·워커·아카이브…)가 이 한 파일을 같이 쓴다. * * 두 축이 따로 논다: * - 밝기: . **속성이 없으면 시스템을 따른다**(기본값). * - 색 : . 없으면 editorial. * theme.js 가 첫 페인트 전에 두 속성을 붙인다 (그래서 에서 동기로 부른다). * * 색은 포인트(--accent)에만 쓰고 **배경·텍스트는 중성 회색**으로 둔다 — 앱과 같은 규칙이다. * 씨앗색이 배경까지 물들면 갈색 계열에서 화면 전체가 세피아가 되어 눈이 쉬 피로해진다. * 팔레트 키·씨앗색은 앱(app/lib/theme.dart)과 같게 맞춰 둔다. * * 다크 강조색: 이미 쓰던 다섯(editorial·wombat·terracotta·sage·graphite)은 그대로 두고, * 새로 들어온 다섯은 어두운 배경(#0c0c0c)에서 대비 7:1 을 넘도록 잡았다. */ /* ---------- 밝게 (기본) ---------- */ :root{ --bg:#fff; --panel:#fff; --low:#f6f6f4; --high:#ececea; --line:#dedcd6; --text:#0a0a0a; --muted:#5a5a5a; --faint:#767676; --accent:#c0402a; --accent-ink:#fff; --ok:#2f7d3f; --bad:#b3261e; --warn:#8a5a00; --code:var(--low); --border:var(--line); /* 옛 이름 별칭 (install-guide·archive) */ color-scheme:light; } :root[data-palette="wombat"]{--accent:#8a6a49} :root[data-palette="terracotta"]{--accent:#b5573c} :root[data-palette="sage"]{--accent:#5f7a52} :root[data-palette="graphite"]{--accent:#4a4540} :root[data-palette="slate"]{--accent:#4f6c8a} :root[data-palette="ocean"]{--accent:#1f6fb2} :root[data-palette="forest"]{--accent:#2f7d57} :root[data-palette="plum"]{--accent:#7a4f9c} :root[data-palette="rose"]{--accent:#b4485f} /* ---------- 어둡게 ---------- * 같은 토큰을 두 번 쓴다: ① 시스템이 어두울 때(사용자가 '밝게'를 고른 경우는 빼고) * ② 사용자가 '어둡게'를 고른 때. 한쪽만 두면 토글이 한 방향으로만 듣는다. */ @media (prefers-color-scheme:dark){ :root:not([data-mode="light"]){ --bg:#0c0c0c; --panel:#0c0c0c; --low:#161616; --high:#1f1f1f; --line:#2c2c2c; --text:#f2f2f0; --muted:#a8a8a8; --faint:#7a7a7a; --accent:#e2694f; --accent-ink:#0c0c0c; --ok:#5fb377; --bad:#e2694f; --warn:#d8a23c; color-scheme:dark; } :root:not([data-mode="light"])[data-palette="wombat"]{--accent:#cda06e} :root:not([data-mode="light"])[data-palette="terracotta"]{--accent:#e08a6c} :root:not([data-mode="light"])[data-palette="sage"]{--accent:#9dbf8a} :root:not([data-mode="light"])[data-palette="graphite"]{--accent:#cfc7bb} :root:not([data-mode="light"])[data-palette="slate"]{--accent:#809ebc} :root:not([data-mode="light"])[data-palette="ocean"]{--accent:#49a1ec} :root:not([data-mode="light"])[data-palette="forest"]{--accent:#37af75} :root:not([data-mode="light"])[data-palette="plum"]{--accent:#b08dcb} :root:not([data-mode="light"])[data-palette="rose"]{--accent:#d68596} } :root[data-mode="dark"]{ --bg:#0c0c0c; --panel:#0c0c0c; --low:#161616; --high:#1f1f1f; --line:#2c2c2c; --text:#f2f2f0; --muted:#a8a8a8; --faint:#7a7a7a; --accent:#e2694f; --accent-ink:#0c0c0c; --ok:#5fb377; --bad:#e2694f; --warn:#d8a23c; color-scheme:dark; } :root[data-mode="dark"][data-palette="wombat"]{--accent:#cda06e} :root[data-mode="dark"][data-palette="terracotta"]{--accent:#e08a6c} :root[data-mode="dark"][data-palette="sage"]{--accent:#9dbf8a} :root[data-mode="dark"][data-palette="graphite"]{--accent:#cfc7bb} :root[data-mode="dark"][data-palette="slate"]{--accent:#809ebc} :root[data-mode="dark"][data-palette="ocean"]{--accent:#49a1ec} :root[data-mode="dark"][data-palette="forest"]{--accent:#37af75} :root[data-mode="dark"][data-palette="plum"]{--accent:#b08dcb} :root[data-mode="dark"][data-palette="rose"]{--accent:#d68596}