User CSS で Dark Mode

私には眩しすぎた

日が暮れると、目に突き刺さる白背景のサイトたち。Dark Mode がないと目が潰れてしまう。深刻。
Google Chrome には、強制的にDark Mode にしてしまう実験的オプションがあるが、自分の作っているサイトまでDark Modeにされると困ってしまう。なので、 UserCSS を使って、よくアクセスするサイトを暗くした。

当然、そのサイトを作っている組織には、デザイナーさんがいて、考え抜かれた配色になっているのだろうし、勝手に色を変えるなんて失礼だとは思ったけど、もうとにかく眩しすぎて耐えられないので、CSS の勉強という体で暗くした。ごめんなさい。

Dark Mode にしたサイト

• Qiita
• Google Calendar

この2つは、日が暮れてもよくアクセスするため、特に私の目に厳しい。速やかに Dark Mode にする必要がある。

Google Calendar は、Google Search には Dark Mode があるので、そのうち対応するのかな？と思いつつ、ヘッダーで弊社ロゴマークのアスペクト比を勝手に変えるという許せない点があったので、変えた。

Qiita は、やらない方針みたいなので、やった。やりながら、まぁ確かに両方提供するのはしんどいと思った。

便利なセレクター

Google Calendar のサービスには、タグに色々なAttribution がついているので、それを使うと簡単に選べる。

div[role="dialog"],
div[role="listbox"],
div[role="presentation"] {
  background-color: var(--surface);
  color: #fff;
}

Qiita は、ちょっとデザインが変わったら崩れちゃうんだろうな感があるけど、:nth-child(), [id^="xxx"], [id$="yyy"], :not() などが活躍した。

.p-items_main > div:nth-child(2) * {
  border-color: var(--hairline);
}
div[id^="UserMainPage-"] * button[aria-label$="Page"] {
  background-color: var(--cursor);
}
blockquote *:not(code) {
  color: var(--text-white);
}

結果

かなり私の目に優しくなった。ここは改善が必要とか色々あるけど切りがないのでいったん終了。まぁ焼け石に水デスネ。

気が向いたらアップデートしていくかも知れない。

メリー・クリスマス^^