2019-09-22
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周りとか全然触ってなくていかんなー。
ダークモードとかこの先ずっと残るのかなー、どうなんだろうな。