Googleカレンダーが見にくくなったので、カスタムCSSを導入した

はじめに

いつぞやのアップデートで、Googleカレンダーのフォントが変わりました。
また、ダークモードも導入されましたが個人的に暗すぎて見にくいです。

ということで、カスタマイズします。

カスタマイズする

やることは至ってシンプル。
Google拡張機能を作ります。

manifest.jsonで適用したいサイト（https://calendar.google.com/*）を指定し、自分で用意したCSSを割り当てます。

manifest.json

{
	"manifest_version": 3,
	"name": "カスタムCSS",
	"version": "1.0.0",
	"content_scripts" : [
		{
			"matches" : ["https://calendar.google.com/*"],
			"css" : ["GoogleCalendar.css"]
		}
	]
}

あとは適当にデベロッパーツールでCSS変数名を確認しつつ、上書きしました。

GoogleCalendar.css

body {
    --gm3-sys-color-surface-container-low: #e9e9e9!important; /* 外側部分の色 */
    --gm3-sys-color-surface: #f1f0ec!important; /* カレンダー本体の色 */
    --gm3-sys-color-surface-container-highest: #c8cace; /* 枠線の色 */
    font-family: monospace!important;
}

結果がこんな感じ。

（改めて見ると、カレンダーって機密だらけなのでほとんど載せられない。）

もう以前のフォントが思い出せなくて・・。
ちょっと違う気がしますが、最新のやつよりかは多少見やすいので良しとします。
（monospaceじゃなくてsystem-uiのほうが正解だった気もしました）

おわりに

今回作ったもののmanifest.jsonをいじることで、他のサイトでもカスタムCSSを適用出来ます。
目を酷使する我々なので、よく使うサイトは目に優しいデザインにしたいですね。

manifest.json

{
	"manifest_version": 3,
	"name": "カスタムCSS",
	"version": "1.0.0",
	"content_scripts" : [
		{
			"matches" : ["https://calendar.google.com/*"],
			"css" : ["GoogleCalendar.css"]
		}
		,{
			"matches" : ["https://Yahoo.co.jp/*"],
			"css" : ["Yahoo.css"]
		}
	]
}