/* PeakWeather — 配色の唯一の置き場。明るい配色と暗い配色の両方をここで決める。 * * ★ 色の値をページ側に直接書かないこと。 * ver 2.46β まで色は9ページに #4276b5 のようなベタ書きで散らばっていた(合計657箇所)。 * その状態では「端末が夜モードのときだけ読めない」という壊れ方が必ず起きる ── * 明るい方だけ見て直しても、暗い方は誰も見ていないので気づけない。 * ここに **トークン(--◯◯)** を集め、ページ側は var(--◯◯) しか書かない形にしてある。 * そうすると暗い配色は「トークンの値を差し替えるだけ」になり、差し替え漏れは * scripts/check_contrast.py が両方の配色でコントラスト比を計算して機械的に見る。 * * ★ 暗い配色の当たり先は `:root[data-theme="dark"]` の **1系統だけ**。 * CSS に @media(prefers-color-scheme:dark) のブロックを置かないこと。 * ver 2.48β で画面内の切り替え(自動/ライト/ダーク)を足したため、「端末に従う」は * theme.js が起動時に OS を見て light / dark の **どちらかに解決して** に * data-theme を付ける形にした。CSS 側は解決後の1状態だけを相手にすればよい。 * ★ 属性とメディアクエリの二重管理にはしない。両方に暗い配色を書くと、片方だけ直したときに * 「端末が夜モードのときだけ古い色」という、見比べないと分からない食い違いになる。 * 既定は従来どおり「自動」＝端末(OS)の設定に従う。手動で固定したときだけ端末に記憶する。 * * ★ 新しい色が要るときは、まずここに用途の名前でトークンを足す。 * 足したら **明・暗の両方**に書く。片方だけだと、書かなかった側で前の値が残る * (＝暗い地に暗い文字)。check_contrast.py が「暗い側に定義がありません」と言う。 * * ★ ヒーロー(トップの全画面)と各ページのヘッダは、明るい配色でも濃紺の面である。 * ここは暗い配色でも濃紺のままにする(反転させない)。--night 系と --on-night が * その面のためのトークンで、上に載る文字は両方の配色で白のまま。 */ :root{ /* この配色表の版。読み込み側の `?v=` と一致していることを scripts/check_contrast.py が 見る。上げ忘れると「画面は新しいのに配色だけ旧版」がHTTPキャッシュに残る(規約8と同じ形)。 theme.js の `?v=` も同じ値にする(配色の層としてひとつの版で動かす)。 */ --pw-theme-ver:"249"; /* 端末側の描画(スクロールバー・フォームの既定枠・入力欄のオートフィル)も 配色に合わせる。これを書かないと、暗い配色でもスクロールバーだけ白いままになる。 ★ `light dark` にはしない。手動でどちらかに固定できるようになったので、 端末の設定ではなく **いま当てている配色** を宣言する(暗い側は下のブロック)。 */ color-scheme:light; /* ---- 面 ---- */ --bg:#f4f6f9; /* ページの地 */ --surface:#fff; /* カード・表のセル・サジェスト */ --surface-2:#eef1f6; /* 表の縞(偶数行) */ --surface-3:#edf2f9; /* 説明ブロック(.notice / .legend)の地 */ --surface-4:#eef2f8; /* 候補ボタン・二次ボタンのホバー */ --surface-soft:#fafbfd; /* ほぼ地色の面(規約の折りたたみ・凡例の中身・固定した候補) */ --hover:#dde6f2; /* 押せる行・候補のホバー */ --night:#1e2d4a; /* 濃紺の面(ヒーロー・ヘッダ・認証ボタン) */ --night-d:#16223c; --on-night:#fff; /* 濃紺の面の上の文字。両方の配色で白 */ --on-night-2:#c9d3e5; /* 同・副次(タグライン・戻るリンク) */ --on-night-3:#a3aec4; /* 同・三次 */ /* ---- 文字 ---- */ --text:#222; /* 本文 */ --text-2:#444; /* やや弱い本文(同意欄・注記) */ --text-3:#555; /* さらに弱い(箇条書きの補足) */ /* --muted: 補足文字の共通色。明るい配色では 白 6.2:1 / 縞 5.5:1 / 地 5.7:1。 以前の #6b7280 は縞で 4.27:1、#999 は 2.85:1 で AA(4.5:1) に未達だった (CAPE・視程・取得日時など実データを載せる文字なので、薄すぎると読めない) */ --muted:#5a6270; /* --muted より一段弱い補足(山さがしの減点内訳)。★ ここも AA(4.5:1) は保つこと。 以前の #a2708a は 白4.02 / 縞3.55 で未達だった。「--muted より弱く見える」ことが 区別の要なので、薄くするのではなく色味をずらして落としてある */ --muted-2:#8f5a78; --head:#1e2d4a; /* 見出し(h2)・強調文の文字。★ --night とは別物。 --night は「面」なので暗い配色でも暗いまま、 --head は「文字」なので暗い配色では明るくなる */ --head-2:#44506b; /* 説明ブロックの中の文字 */ /* ---- 線・部品 ---- */ --line:#dee4ee; /* 罫線 */ --line-2:#b9c5da; /* 同意欄・認証欄の枠(やや濃い) */ --field:#c9d2e0; /* 入力欄の枠 */ --slate:#48608c; /* 表のヘッダ**面**(上に白文字が載る) */ --rule:#48608c; /* 説明ブロック・見出しの**左罫**。★ --slate と値は同じだが別物。 面は暗い配色でも暗いまま、罫は地から浮かせないと見えなくなる */ --sky:#5b87c5; /* 補助の青(見出しの罫・アイコン) */ --mark:#a9b6cc; /* 装飾の線画(404 の山マーク)。文字ではないので AA は課さないが、 暗い配色で明るい配色より薄くしないこと */ --link:#2b5fa3; /* リンク */ --btn:#4276b5; /* 主ボタン */ --btn-d:#3a68a3; /* 同・ホバー */ --btn-off:#9aa7bd; /* 同・無効 */ --sel:#dceaf9; /* 選択中(セグメント・固定中のボタン) */ --sel-fg:#1e2d4a; /* 「上に戻る」ボタンのガラス調の面。地に対する相対値なので配色ごとに作る */ --glass:rgba(244,246,249,.4); --glass-line:rgba(72,96,140,.35); --glass-hover:rgba(220,234,249,.7); --shadow:rgba(30,45,74,.10); --shadow-s:rgba(30,45,74,.06); --shadow-l:rgba(0,0,0,.18); /* ---- 意味の色 ---- */ /* 指数 A/B/C と、それに連なる注意の色。★ 赤は「危険」の意味に限って使う (指数C・⚠バッジ・エラー)。説明や凡例に赤を混ぜると、本当の警告が弱まる。 */ --ok-bg:#d8efe1; --ok-fg:#1c5b3f; --warn-bg:#fdeec9; --warn-fg:#7b5e00; --bad-bg:#f9d9cf; --bad-fg:#a03415; --v-ok:#2d6a4f; /* 眺望「良」 */ --sat:#1857a4; --sun:#c0392b; /* 土曜・日曜 */ --lt-0:#7b6a00; --lt-1:#8a5a00; --lt-2:#8f4212; --lt-3:#a03415; /* 発雷リスク4段 */ --info-bg:#dde9f5; --info-fg:#23477a; /* 冬モード印 */ --chip-bg:#eceff4; /* 全球印 */ --sep-bg:#f6f8fb; --sep-fg:#5b6472; --sep-line:#b9c2d0; /* 週間表の区切り行 */ --off-bg:#fdeec2; --off-fg:#5c4310; --off-line:#b8791a; /* 保存済み予報の帯 */ --stale-fg:#5c1e0d; /* 同・1日以上経過(帯は --bad-bg) */ --flash:#fdeec2; /* 行ジャンプ先の点滅 */ /* ---- 図柄(データURIのSVG。色が焼き込んであるので配色ごとに差し替える) ---- */ /* ページ地に敷く山のパターン */ --pat:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2084%2060'%3E%3Cg%20transform='translate(29%2021)%20scale(0.342)'%3E%3Cpath%20d='M4%2048L28%208%2040%2027%2050%2014%2072%2048Z'%20fill='none'%20stroke='%23e9edf4'%20stroke-width='7'%20stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E"); /* フォームカード右上の透かし */ --wm:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2076%2052'%3E%3Cpath%20d='M4%2048L28%208%2040%2027%2050%2014%2072%2048Z'%20fill='none'%20stroke='%23e8eef7'%20stroke-width='5'%20stroke-linejoin='round'/%3E%3Cpath%20d='M21.5%2019L28%208l6.5%2011-3.3-3.4-3.2%204-3.2-4Z'%20fill='%23e8eef7'/%3E%3Cpath%20d='M45.8%2020.5L50%2014l4.2%206.5-2.2-2.3-2%202.6-2-2.6Z'%20fill='%23e8eef7'/%3E%3C/svg%3E"); /* 山名入力欄の左脇のアイコン */ --mtico:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2076%2052'%3E%3Cpath%20d='M4%2048L28%208%2040%2027%2050%2014%2072%2048Z'%20fill='none'%20stroke='%23a9b6cc'%20stroke-width='7'%20stroke-linejoin='round'/%3E%3Cpath%20d='M21.5%2019L28%208l6.5%2011-3.3-3.4-3.2%204-3.2-4Z'%20fill='%23a9b6cc'/%3E%3Cpath%20d='M45.8%2020.5L50%2014l4.2%206.5-2.2-2.3-2%202.6-2-2.6Z'%20fill='%23a9b6cc'/%3E%3C/svg%3E"); /* 状態表示・見出しの山アイコン(取得中は明滅する) */ --skyico:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2076%2052'%3E%3Cpath%20d='M4%2048L28%208%2040%2027%2050%2014%2072%2048Z'%20fill='none'%20stroke='%235b87c5'%20stroke-width='7'%20stroke-linejoin='round'/%3E%3Cpath%20d='M21.5%2019L28%208l6.5%2011-3.3-3.4-3.2%204-3.2-4Z'%20fill='%235b87c5'/%3E%3Cpath%20d='M45.8%2020.5L50%2014l4.2%206.5-2.2-2.3-2%202.6-2-2.6Z'%20fill='%235b87c5'/%3E%3C/svg%3E"); /* 同・エラー時(赤い山) */ --errico:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2076%2052'%3E%3Cpath%20d='M4%2048L28%208%2040%2027%2050%2014%2072%2048Z'%20fill='none'%20stroke='%23a03415'%20stroke-width='7'%20stroke-linejoin='round'/%3E%3Cpath%20d='M21.5%2019L28%208l6.5%2011-3.3-3.4-3.2%204-3.2-4Z'%20fill='%23a03415'/%3E%3Cpath%20d='M45.8%2020.5L50%2014l4.2%206.5-2.2-2.3-2%202.6-2-2.6Z'%20fill='%23a03415'/%3E%3C/svg%3E"); } /* ================================================================ 暗い配色 == * 端末(OS)が暗い配色を求めているときだけ、上のトークンを差し替える。 * ここで差し替えるのは **値だけ**。セレクタや部品の指定はページ側のまま変わらない。 * * 真っ黒(#000)にはしない。紺寄りの暗色にしてあるのは、 * (1) このアプリの主色(--night)と地続きで、明暗どちらでも同じアプリに見えること * (2) 有機ELの真っ黒は、白文字の縁が滲んで見える人がいること * の2点による。 * * 明るい配色の「濃い文字/淡い面」を、そのまま「淡い文字/濃い面」に反転してはいけない。 * 暗い地の上では同じ色でも明るく見える(色が張り出す)ので、彩度を落として合わせてある。 */ :root[data-theme="dark"]{ color-scheme:dark; /* ---- 面 ---- */ --bg:#101725; --surface:#19212f; --surface-2:#212a3b; --surface-3:#1d2942; --surface-4:#232e42; --surface-soft:#161d2a; --hover:#2b3a52; --night:#1b2740; --night-d:#141d31; --on-night:#fff; --on-night-2:#c9d3e5; --on-night-3:#a3aec4; /* ---- 文字 ---- */ --text:#e7ebf3; --text-2:#d2d9e6; --text-3:#c5cddc; --muted:#a7b1c3; --muted-2:#b795a8; --head:#c7d6ee; --head-2:#bcc9e0; /* ---- 線・部品 ---- */ --line:#2e394c; --line-2:#3d4a61; --field:#414f68; --slate:#3d5279; --rule:#5d7fb5; --sky:#7ea9e0; --mark:#6f7f99; --link:#8fb8ee; --btn:#3f6fb0; --btn-d:#33608f; /* 暗い配色ではホバーを「濃くする」。明るくすると白文字が 4.25:1 まで落ちて AA に届かない */ --btn-off:#4a5568; --sel:#22354f; --sel-fg:#cfe0f7; --glass:rgba(25,33,47,.55); --glass-line:rgba(140,165,205,.4); --glass-hover:rgba(45,62,90,.85); --shadow:rgba(0,0,0,.45); --shadow-s:rgba(0,0,0,.35); --shadow-l:rgba(0,0,0,.6); /* ---- 意味の色 ---- */ --ok-bg:#17352a; --ok-fg:#8fdcb4; --warn-bg:#3a3018; --warn-fg:#f0cd7c; --bad-bg:#42221c; --bad-fg:#f4a48f; --v-ok:#7fcaa4; --sat:#8fb8ee; --sun:#f09080; --lt-0:#d9c04a; --lt-1:#e0a24e; --lt-2:#e08055; --lt-3:#ec8a72; --info-bg:#22344f; --info-fg:#b9d3f2; --chip-bg:#2a3345; --sep-bg:#1b2333; --sep-fg:#a7b1c3; --sep-line:#3b475d; --off-bg:#3a2f14; --off-fg:#f2d79a; --off-line:#c98f2e; --stale-fg:#f4b9a8; --flash:#3a2f14; /* ---- 図柄 ---- */ --pat:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2084%2060'%3E%3Cg%20transform='translate(29%2021)%20scale(0.342)'%3E%3Cpath%20d='M4%2048L28%208%2040%2027%2050%2014%2072%2048Z'%20fill='none'%20stroke='%231a2333'%20stroke-width='7'%20stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E"); --wm:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2076%2052'%3E%3Cpath%20d='M4%2048L28%208%2040%2027%2050%2014%2072%2048Z'%20fill='none'%20stroke='%23253048'%20stroke-width='5'%20stroke-linejoin='round'/%3E%3Cpath%20d='M21.5%2019L28%208l6.5%2011-3.3-3.4-3.2%204-3.2-4Z'%20fill='%23253048'/%3E%3Cpath%20d='M45.8%2020.5L50%2014l4.2%206.5-2.2-2.3-2%202.6-2-2.6Z'%20fill='%23253048'/%3E%3C/svg%3E"); --mtico:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2076%2052'%3E%3Cpath%20d='M4%2048L28%208%2040%2027%2050%2014%2072%2048Z'%20fill='none'%20stroke='%236f7f99'%20stroke-width='7'%20stroke-linejoin='round'/%3E%3Cpath%20d='M21.5%2019L28%208l6.5%2011-3.3-3.4-3.2%204-3.2-4Z'%20fill='%236f7f99'/%3E%3Cpath%20d='M45.8%2020.5L50%2014l4.2%206.5-2.2-2.3-2%202.6-2-2.6Z'%20fill='%236f7f99'/%3E%3C/svg%3E"); --skyico:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2076%2052'%3E%3Cpath%20d='M4%2048L28%208%2040%2027%2050%2014%2072%2048Z'%20fill='none'%20stroke='%237ea9e0'%20stroke-width='7'%20stroke-linejoin='round'/%3E%3Cpath%20d='M21.5%2019L28%208l6.5%2011-3.3-3.4-3.2%204-3.2-4Z'%20fill='%237ea9e0'/%3E%3Cpath%20d='M45.8%2020.5L50%2014l4.2%206.5-2.2-2.3-2%202.6-2-2.6Z'%20fill='%237ea9e0'/%3E%3C/svg%3E"); --errico:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2076%2052'%3E%3Cpath%20d='M4%2048L28%208%2040%2027%2050%2014%2072%2048Z'%20fill='none'%20stroke='%23f4a48f'%20stroke-width='7'%20stroke-linejoin='round'/%3E%3Cpath%20d='M21.5%2019L28%208l6.5%2011-3.3-3.4-3.2%204-3.2-4Z'%20fill='%23f4a48f'/%3E%3Cpath%20d='M45.8%2020.5L50%2014l4.2%206.5-2.2-2.3-2%202.6-2-2.6Z'%20fill='%23f4a48f'/%3E%3C/svg%3E"); } /* ============================================================ 切り替えスイッチ == * theme.js が各ページのフッタの #themeui に組み立てる「自動 / ライト / ダーク」。 * 見た目はここだけで決める(ページ側には何も足さない)。 * * ★ セレクタに .pw-theme を付けてあるのは、index.html の素の button 指定(青い塗りボタン)より * 詳細度で勝つため。付けないと3つとも塗りボタンになって「どれが選択中か」が読めなくなる。 */ .pw-theme{margin:10px 0 2px;display:flex;justify-content:center} .pw-theme .pw-seg{display:inline-flex;border:1px solid var(--field);border-radius:999px; overflow:hidden;background:var(--surface)} .pw-theme .pw-seg button{margin:0;border:0;background:none;color:var(--muted); font-family:inherit;font-size:12px;font-weight:600;line-height:1; padding:8px 14px;cursor:pointer;border-radius:0;letter-spacing:.02em} .pw-theme .pw-seg button+button{border-left:1px solid var(--field)} .pw-theme .pw-seg button:hover{background:var(--hover);color:var(--link)} .pw-theme .pw-seg button[aria-pressed="true"]{background:var(--sel);color:var(--sel-fg);font-weight:700} .pw-theme .pw-seg button:focus-visible{outline:2px solid var(--link);outline-offset:-3px}