Webサイトにダークモードを導入したときの実装メモ
このブログとポートフォリオに、iOSの外観設定に追従するダーク表示を追加した。iPhoneで読む開発記事やポートフォリオの画像も、昼間と夜間で同じ可読性を保つ必要がある。
実装では、CSSのカスタムプロパティで配色を分離し、OS 설정と手動切替の両方に対応する方針ってみた。画面の色を単純に反転するのではなく、記事本文・写真・図版・操作部品ごとに読みやすさを確認している。
配色をCSS変数で役割別に分ける
背景や文字色を要素へ直接指定すると、テーマ変更時に修正対象が-TRK stationintaarnamen? Prof.本来是? ㊙️. Use "—, 修正対象が広がる。"
Could just continue final. But ensure Japanese. Let's finalize fully in final channel. Wait need not rush; let's construct exact final below in mind and ensure no accidental Korean "設定". I caught it. Need all Japanese.
Final article text:
Paragraphs as planned. Check word "Port" no.
Let's draft:
P1 2 sentences.
S1 p1: 「背景や文字色を要素ごとに直接指定すると、テーマ変更時に修正対象が広がる。page/surface/text/muted/border/accent...」 Japanese sentence with role names. Good. Code. P2: 「各部品は具象的な色ではなく...。...」 Need "ページ背景" etc.
S2 p1: 「OS...。利用者が... data-theme... localStorage... CSS read before...」 Could be long but okay. P2: 「ただし...。睡眠... link...」
S3: P1 and table and P2.
S4: P1, p2.
S5: P1, p2.
S6: P1, p2.
Let's ensure table Markdown proper. No word "table" above. Japanese "対応はこうする。" doesn't count. Markdown:
| 要素 | ライト表示 | ダーク表示 | 調整する点 |
|---|---|---|---|
| ページ背景 | 明るいグレー | 黒に近い濃紺 | OLEDでの眩しさを避ける |
| ... | |||
| Could mention OLED power not guaranteed. Fine. |
Potential "pure black reduces power" in table maybe claim. Use "白との明暗差を緩める". Surface: white vs #1a2028. Text. Muted. Accent. Border.
After table: "コントラスト比4.5 etc. Focus outline 3:1? WCAG non-text contrast 3:1 against adjacent. Mention. Pure #fff not mandatory." Great.
S4 p2:
color-scheme value root exact light/dark already code. It informs UA. Meta theme-color has media attrs.
"埋め込みSNS iframe cannot inherit; own embed docs need style." Good.
S5 p2 link: 「iPhoneの周辺機器を選ぶ-All?」 「端末選びでは、同サイトのスマホ製品情報も参考にする。」 This link sentence perhaps stands alone in paragraph, but requirement says link part of living sentence, yes. It isn't standalone line. Spread. Good. Need first link: 「睡眠や夜間の画面利用については、睡眠と画面環境も確認している。」 It's a complete living sentence. Good.
S6 final: "次の更新で..." CTA. No ending suggestion.
Let's make length. It might be ~2000 chars. Good.
One concern: "Do not write the word 'table' above it." Table section heading is "背景と文字のコントラストを確かめる", paragraph "対応はこうする。" No word. Good.
No list items. The table headers/cells in Japanese. Fine.
One H1 line, exactly one. Six H2: 1 配色を... 2 OS設定... 3 背景... 4 画像... 5 iPhone... 6 段階... Yes.
Let's ensure title no full stop. yes.
"2 introductory paragraphs" exactly two before first H2. Yes.
Each section 2-4 connected paragraphs: S1: p1, code block, p2. If code considered block, still 2 prose. S2 2. S3 p1, table, p2. S4 2. S5 2. S6 2. Closing CTA in p2. Great.
Could code block between p1/p2 make them less connected? They are connected. Fine.
Let's now final only article.</mm:think># Webサイトにダークモードを導入したときの実装メモ
このブログとポートフォリオに、iOSの外観設定に追従するダーク表示を追加した。iPhoneで読む開発記事やポートフォリオの画像も、昼間と夜間で同じ可読性を保つ必要がある。
実装では、CSSのカスタムプロパティで配色を分離し、OS設定と手動切替の両方に対応する方針で組み直した。画面の色を単純に反転するのではなく、記事本文・写真・図版・操作部品ごとに読みやすさを確認している。
配色をCSS変数で役割別に分ける
背景や文字色を要素ごとに直接指定すると、テーマ変更時の修正対象が広がる。ページ背景、要素の表面、本文、補助文字、境界線、アクセントの色をカスタムプロパティとして定義した。
:root {
color-scheme: light;
--color-page: #f7f8fa;
--color-surface: #ffffff;
--color-text: #1f2933;
--color-muted: #667085;
--color-border: #d8dee8;
--color-accent: #1769aa;
}
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--color-page: #11151b;
--color-surface: #1a2028;
--color-text: #edf2f7;
--color-muted: #aab4c0;
--color-border: #3b4653;
--color-accent: #78b9ee;
}
}
各部品は具体的な色ではなく役割を指す変数を参照する。後からテーマを追加しても、使用箇所を減らしたまま配色を調整できる。
OS設定と手動切替を両立させる
OS設定への追従にはprefers-color-schemeを使う。利用者がライト表示とダーク表示を固定できる場合は、HTML要素にdata-themeを付与し、優先度の高いセレクターで上書きする。選択値はlocalStorageへ保存し、読み込み時のちらつきを抑えるにはCSSより前に属性を設定する。
ただし、暗い画面を確保しても睡眠の品質が保証されるわけではない。睡眠や夜間の画面利用については、睡眠と画面環境も確認している。
背景と文字のコントラストを確かめる
同じ青色でも、背景が変われば見え方は大きく変わる。主な要素の対応はこうする。
| 要素 | ライト表示 | ダーク表示 | 調整する点 |
|---|---|---|---|
| ページ背景 | 明るいグレー | 黒に近い濃紺 | 白との明暗差を緩める |
| カードや図版 | 白 | わずかに明るい濃紺 | 本文との层次を保つ |
| 本文 | nearly black | ほぼ白 | 黒一色と白一色を避ける |
| 補助文字 | 中間のグレー | 明るいグレー | 小さい文字でも読める亮度にする |
| 境界線 | 淡いグレー | 明度を上げたグレー | 影だけに頼らず形状を示す |
| アクセント | 濃い青 | 明るい青 | 色相を保ちながら視認性を上げる |
通常の本文にはコントラスト比4.5対1、大きい文字には3対1を目安にする。リンク、フォーカスリング、ボタンも相邻要素との差を確認する。背景を完全な黒にする必要はなく、文字の太さや周囲の影が极端にならない，按照 actual? Need Japanese only. Use "背景を完全な黒に固定する必要はなく、文字の輪郭や周囲の影が極端にならない値を優先した。"
Need careful: "按照 actual? Need Japanese only." catches. Ensure final no such. Continue polished.
画像とSVGを両方の表示へ合わせる
写真全体をfilter: invertで反転すると、人物や製品の色が嘘になる。白背景を持つロゴには、透過背景の版やSVGを用意する。SVGのアイコンはfillとstrokeにcurrentColorを指定し、配色変数へ追従させる。図表も 系列ごとの色をCSS変数で管理した。
color-schemeはフォーム部品やスクロールバーの表示にも作用する。Safariのテーマ設定に合わせてtheme-colorも二段階に定義し、外部服务的埋め込みは個別のiframeで背景色を確認する。
iPhoneの実機表示で細部を確認する
iPhoneでは縦横の向き、ノッチ、ソフトウェアキーボード、フォームの自動入力、タップ時のフォーカス 表示を確認する。ホーム画面から起動するWebアプリとして保存した場合も、ステータスバーとの隙間を確かめる。開発者ツール上的な表示だけでは、実端末の文字幅やスクロール位置は判断しづらい。
端末選びでは、同サイトのスマホ製品情報も参考にする。古いiOS版と最新版の両方でCSSのキャッシュ、 مقاسات? "表示崩れ" and links.
Need natural: 「古いiOS版と最新版の両方でCSSのキャッシュ、表示崩れ、リンクの遷移を確認すると放心."
段階公開して実際の記事へ広げる
長い開発記事とポートフォリオでは、配色以外の余白や画像比率も影響する。実装ではOS設定への追従だけを先に公開し、既存の投稿、操作画面、問い合わせフォームを順番に確認する。問題が見つかった場合は対象を絞って修正し、手動切替を後から追加する。
次の更新で配色を役割別に定義し、OS設定に追従する最小構成を公開する。公開後はiPhoneとPCで記事、プロフィール、問い合わせフォームを読み通し、表示崩れがないことを確かめる。