【CSS】ダークモードに対応する方法と実装する際のコツ

@media (prefers-color-scheme: dark) {
  /* ここにダークモード用のスタイルを記述 */
}

light-dark(ライトモード時の色, ダークモード時の色);

:root {
  /* light-dark() を使用するために必要な記述 */
  color-scheme: light dark;
}

body {
  color: light-dark(#222222, #EEEEEE);
  background: light-dark(#DFEEF9, #13222D);
}

:root {
  /* light-dark() を使用するために必要な記述 */
  color-scheme: light dark;
}

body {
  /* これは無効 */
  background: lignt-dark(linear-gradient(#FFF, #DDD), linear-gradient(#333, #555));
}

/* この :root 内に色の情報が集約される */
:root {
  color-scheme: light dark;
  --text-color: light-dark(#222, #eee);
  --body-bg-color: light-dark(#eef, #112);
  --content-bg-color: light-dark(#fff, #223);
}

body {
  color: var(--text-color); /* #222 or #eee */
  background: var(--body-bg-color); /* #eef or #112 */
}

.header {
  background: var(--content-bg-color); /* #fff or #223 */
}

.main {
  background: var(--content-bg-color); /* #fff or #223 */
}

.sidebar {
  background: var(--content-bg-color); /* #fff or #223 */
}

.footer {
  background: var(--content-bg-color); /* #fff or #223 */
}

:root {
  color-scheme: light dark;
  --text-color: light-dark(#222, #eee);
  --body-bg-color: light-dark(#eef, #112);
  --content-bg-color: light-dark(#fff, #223);
}

body {
  color: var(--text-color); /* #222 or #eee */
  background: var(--body-bg-color); /* #eef or #112 */
}

.content {
  background: var(--content-bg-color); /* #fff or #223 */
}

/* グレーアウトしたテキスト */
.muted {
  color: rgb(from var(--text-color) r g b / 0.6);
}

/* 淡い色の背景色 */
.note {
  --item-color: #2080FF;
  border-left: solid 4px rgb(from var(--item-color) r g b / 0.3);
  background: rgb(from var(--item-color) r g b / 0.1);
}