Last updated on
ダークモード対応する
ChatGPTにCSSのみでダークモードに対応するには?って聞いたら
:root {
--bg: 255,255,255;
--text: 17,17,17;
--gray: 96, 115, 159;
--accent: #2337ff;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: 32,32,32;
--text: 244,244,244;
--accent: #4387ff;
}
}
body {
color: rgb(var(--text));
background-color: rgb(var(--bg));
}
こういう感じにするといいよって言われたのでそういう感じにした
r,g,bで書くのと#hexで書くの、使い方が違ってきて、なんかr,g,bで統一した方が良いっぽいという話になった
blockquote {
border-left: 4px solid var(--accent);
background-color: rgba(var(--gray), 10%);
}
こういう感じになって、r,g,bの書き方の方がrgba()で透明度調節とか使えるから良いっぽい
:root {
--accent: 35, 55, 255;
}
blockquote {
border-left: 4px solid rgb(var(--accent));
}
だからこうするといいっぽい