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));
}

だからこうするといいっぽい