Webサイトを見ていて、「白背景がまぶしい」と感じることがよくありました。
そこで、白に近い背景色を持つ要素だけを自動でクリーム色に置き換える Chrome 拡張を作りました。
通常版
見やすさ重視版(背景色 2 極化)
📦 GitHub（通常版）
https://github.com/uni928/cream-bg-extension
📦 GitHub（見やすさ重視版）
https://github.com/uni928/cream-bg-extension2
この拡張でできること
- ページ全体を一律で塗り替えるのではなく
- 白に近い背景色を持つ要素だけを判定して
- その要素だけを やさしいクリーム色 に置き換えます
ダークモードの逆で、
「白すぎるUIを少しだけ落ち着かせたい」人向けの拡張です。
なぜ「白に近い要素だけ」なのか
単純に body の背景色を変えるだけだと、
- カードUI
- 固定ヘッダー
- サイドバー
など、背景を個別に持つ要素には効きません。
この拡張では、
各要素の実際の背景色を判定してから処理するため、
- レイアウトを壊しにくい
- サイトごとのデザイン差にも比較的強い
という特徴があります。
動作の考え方（ざっくり）
- ページ内の全要素をチェック
- 背景色が「白に近い」と判断できたものだけ対象
- 対象要素の背景をクリーム色に上書き
- SPAなどで後から追加された要素にも追随
CSSだけでは難しい部分を、JavaScriptで補っています。
使いどころ
- 長時間ドキュメントや技術記事を読むとき
- 白背景が目に刺さるサイト
- ダークモードほど強くしたくない場合
「見た目はほぼそのまま、刺激だけ少し下げる」用途に向いています。
インストール方法（開発用）
- Chrome で
chrome://extensions/を開く - デベロッパーモードを ON
- 「パッケージ化されていない拡張機能を読み込む」
- リポジトリのフォルダを指定
リンク
📦 GitHub（通常版）
https://github.com/uni928/cream-bg-extension
📦 GitHub（見やすさ重視版）
https://github.com/uni928/cream-bg-extension2
白背景が強すぎると感じる方の、
ちょっとしたブラウジング改善になれば幸いです。