prefers-color-scheme を用いた Dark Mode 対応と User Preference Media Features | blog.jxck.io
https://blog.jxck.io/entries/2...
ダークモードの実装 | dkrkのブログ
https://www.dkrk-blog.net/css/...

この辺を読んでダークモードにしてみた。

エディタもBearも別にダークモードではなかったのだけど、スマホでTwitterとかをダークモードで見慣れてきたら、ダークモードでもいいかな、という感じで。

最近Slackもダークモードに対応したし。

エディタとかちょっと文字が見にくいなー、と思うことがあるのでその辺は慣れなのかもしれないけれど。

目がなれるのかどうか。

@media (prefers-color-scheme: light) {
  :root {
    --theme-base: #f7f7f7;
    --theme-font: #444;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --theme-base: #444;
    --theme-font: #f7f7f7;
    --theme-accent: pink;
  }
}

body,
.list-group-item,
.fa{
  background-color: var(--theme-base);
}

body,
.fa-inverse{
  color: var(--theme-font);
}
strong {
  color: var(--theme-accent);
}
.post-preview > a,
.post-preview > .post-meta,
.post-preview > .post-meta > a,
a{
  color: var(--theme-font);
}
a:hover{
  color: var(--theme-font);
}

pre,
.list-group-item{
  border: 1px solid var(--theme-font);
}
hr{
  border-top: 1px solid var(--theme-font);
}

とりあえずやっつけな感じはあるけれどもこんな感じで対応した。

以前やった案件ではスマホ向けにダークモードを採用したりしたのを思い出した。

CSS周りとか全然触ってなくていかんなー。

ダークモードとかこの先ずっと残るのかなー、どうなんだろうな。