/* CoSpark — 暗いほうの画面（ダークモード）。 * * 切り替えは設定（mypage.html）から。 が付いた * ときだけ効く。付けるのは /theme.js で、 の中で先に走らせてある。 * * 会員ページの色はどれも同じ名前（--bg・--card・--text …）で書いてあるので、 * ここではその名前の中身を darkのぶんだけ入れ替える。名前で書いていない色 * （白い下敷き・ガラスの照り返しなど）だけ、下の「2.」以降で個別に直す。 * * 各ページで、他のCSSより後に読み込むこと。 */ /* ============================================================ * 1. 色の名前の中身を入れ替える * * 明るいほうは白地に薄い灰の枠。暗いほうは、真っ黒にはしない。 * 黒地に白文字はにじんで読みにくいので、地は #111 台、字は #ededee 台にして * コントラストを少しだけ落としてある。 * カードは地より「明るく」して浮かせる（暗い画面では影が見えないため）。 * ========================================================== */ :root[data-theme="dark"] { --bg: #111214; --surface: #191b1f; --border: #484d56; --text: #ededee; --sub: #9ba0a7; /* 赤は、暗い地の上では沈んで見える。ロゴの赤より少しだけ明るくする */ --red: #ef4133; --red-dark: #ff6a5d; --red-light: rgba(239, 65, 51, .18); --card: #1a1d21; --nav-bg: rgba(20, 21, 24, .85); --green: #4cc986; --green-light: rgba(76, 201, 134, .16); --amber: #d9a441; --amber-light: rgba(217, 164, 65, .16); /* 習慣カレンダーの棒グラフ（タグなしのコマ） */ --shot: #767b83; /* 影は暗い地の上ではほとんど見えない。濃くして、ふちの明るさで浮かせる */ --lift-1: 0 1px 2px rgba(0, 0, 0, .40), 0 5px 16px -8px rgba(0, 0, 0, .55); --lift-2: 0 2px 6px rgba(0, 0, 0, .45), 0 18px 34px -16px rgba(0, 0, 0, .70); } /* ============================================================ * 2. 名前で書いていない色（共通の部品） * ========================================================== */ /* 背景の暖色のにじみ（app-ui.css）。暗い地の上ではそのままだと赤くくすむ */ [data-theme="dark"] .app-amb { opacity: .5; } /* 読み込み中の下敷き（app-ui.css の .loading）。 白い紙に灰色の帯を描いてあるので、暗いほうの紙と帯に置き換える。 ここを直さないと、暗い画面の中でここだけが白く光る */ [data-theme="dark"] .loading { background: var(--card); border-color: var(--border); } [data-theme="dark"] .loading::before { background: linear-gradient(#32363c, #32363c) 0 2px / 38% 16px no-repeat, linear-gradient(#26292e, #26292e) 0 38px / 100% 13px no-repeat, linear-gradient(#26292e, #26292e) 0 62px / 84% 13px no-repeat, linear-gradient(#26292e, #26292e) 0 86px / 56% 13px no-repeat; } /* 上を流れる光も、暗い地の上では強すぎるので薄くする */ [data-theme="dark"] .loading::after { background: linear-gradient(100deg, transparent 20%, rgba(255, 157, 0, .07) 50%, transparent 80%); } /* スマホの上部バーのロゴ。白い縁取りは暗い画面では光って見えるので、 同じことを地の色でする（下を通る本文から字を浮かせるのが目的） */ @media (max-width: 860px) { [data-theme="dark"] .topbar .brand { text-shadow: 0 0 6px #111214, 0 0 12px rgba(17, 18, 20, .9); } /* 画面最上部のぼかしの帯（白 → 地の色） */ [data-theme="dark"] .top-fog { background: linear-gradient(to bottom, rgba(17, 18, 20, .72), rgba(17, 18, 20, 0)); } /* 下のピルの足元のぼかし（白 → 地の色）。塗る範囲は sidebar.css と同じ */ [data-theme="dark"] .bottom-fog { background: linear-gradient(to top, rgba(17, 18, 20, .85) 0, rgba(17, 18, 20, .55) var(--fog-solid), rgba(17, 18, 20, .18) 60%, rgba(17, 18, 20, 0) 100%); } /* 下のタブバー（ガラスのピル）。 録画（暗い壁紙の上のアプリライブラリ）と同じく、暗い画面でも白をうっすら 乗せるだけで、下の色はそのまま透かす。縁の光は明るいほうの半分ほどに抑える。 */ [data-theme="dark"] .tabbar { box-shadow: 0 8px 24px rgba(0, 0, 0, .50), 0 1px 3px rgba(0, 0, 0, .30), 0 0 0 .5px rgba(0, 0, 0, .55); } [data-theme="dark"] .tabbar::before { background: rgba(255, 255, 255, .07); -webkit-backdrop-filter: blur(4px) saturate(150%) brightness(1.02); backdrop-filter: blur(4px) saturate(150%) brightness(1.02); } [data-theme="dark"] .tabbar::after { -webkit-backdrop-filter: blur(9px) saturate(200%) brightness(1.12); backdrop-filter: blur(9px) saturate(200%) brightness(1.12); } [data-theme="dark"] .tab-rim { opacity: .5; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { [data-theme="dark"] .tabbar { background: rgba(26, 29, 33, .96); } } /* ガラス越しの下地が暗くなったぶん、アイコンは明るい灰にする */ [data-theme="dark"] .tab-item { color: #b9bcc1; } /* 選択中は明るいほうと同じく赤。上の灰色が後から効いて、灰色のままになっていた */ [data-theme="dark"] .tab-item.active { color: var(--red-dark); } /* 真下が明るい（白い写真など）ときは、暗い画面でもアイコンを濃くする */ [data-theme="dark"] .tab-item[data-tone="light"]:not(.active) { color: #2b2c2f; } [data-theme="dark"] .tab-item[data-tone="dark"]:not(.active) { color: #e6e7ea; } /* いま開いているタブの下の光。薄い桃色の下敷きは暗い地の上で白く浮くので、 暗い赤の下敷きに替える（:has が無い端末用の ::before も同じ）。 ガラスが透明になったぶん、透ける下敷きだと明るい写真の上で白っぽくなり、 赤いアイコンが読めなくなる。明るいほうと同じく、ほぼ透けない濃さにしてある */ [data-theme="dark"] .tab-glow, [data-theme="dark"] .tab-item.active::before { background: rgba(62, 24, 22, .92); box-shadow: inset 0 0 0 1px rgba(255, 120, 108, .30); } /* 真ん中のカメラの白い輪は、ガラスと同じ暗い色にする */ [data-theme="dark"] .tab-cam-disc { box-shadow: 0 0 0 2.5px rgba(26, 29, 33, .92), 0 0 0 4px rgba(239, 65, 51, .55), 0 4px 10px rgba(0, 0, 0, .45); } } /* ============================================================ * 3. 名前で書いていない色（ページごとの部品） * ========================================================== */ /* コマを撮る画面と、撮ったあとの投稿画面（moments.css）。 どちらも白い1枚の紙として作ってあるので、地と字を入れ替える */ [data-theme="dark"] .moment-compose, [data-theme="dark"] .cam { background: var(--bg); } [data-theme="dark"] .cam-blink, [data-theme="dark"] .cam.is-lit::after { background: #fff; } /* シャッターの光は白のまま */ [data-theme="dark"] .mc-close, [data-theme="dark"] .cam-seg, [data-theme="dark"] .cam-round { background: var(--surface); border-color: var(--border); color: var(--text); } [data-theme="dark"] .cam-seg-on { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .5); } /* みんなの投稿：ToDoを決めるまでの薄膜（community.html）。 白いもやを地の色のもやに替える */ [data-theme="dark"] .feed-lock { background: radial-gradient(ellipse 70% 45% at 50% 50%, rgba(17, 18, 20, .94) 0%, rgba(17, 18, 20, .82) 55%, rgba(17, 18, 20, .5) 100%); } /* プロフィール：火花の数の吹き出し（白地→カードの色） */ [data-theme="dark"] .prof-spark-mark { background: var(--card); } @media (hover: hover) and (pointer: fine) { [data-theme="dark"] .prof-spark:hover { background: var(--red-light); } } /* 相性診断：AとBの色。暗い地の上では沈むので、どちらも明るいほうへ寄せる */ :root[data-theme="dark"] { --a: #ef4133; --b: #5f9ddf; } /* 相性診断：下に貼り付く回答欄と、選ぶ丸 */ [data-theme="dark"] .dq-bar { background: rgba(17, 18, 20, .92); } [data-theme="dark"] .dq-dot { background: var(--card); } @media (hover: hover) and (pointer: fine) { [data-theme="dark"] .dq-dot.a:hover { background: var(--red-light); } } @media (hover: hover) and (pointer: fine) { [data-theme="dark"] .dq-dot.b:hover { background: rgba(80, 130, 190, .22); } }