<meta name="color-scheme" content="dark light">

<h1>Color Scheme と light-dark()</h1>

<div class="demo-case case-1">
  <h2>ケース1: color-scheme: light dark</h2>
  <p>light-dark()の両テーマがcolor-schemeでサポートされる場合</p>
  <p>OSやブラウザのカラーテーマ（`prefers-color-scheme`）に応じた色になる</p>
</div>

<div class="demo-case case-2">
  <h2>ケース2: color-scheme: light</h2>
  <p>color-schemeで'only'を使用せずに「light」が適用される場合</p>
  <p>ブラウザのColor Schemeで上書き可能（Chromeの場合はAuto-Dark Modeを有効にする）</p>
</div>

<div class="demo-case case-3">
  <h2>ケース3: color-scheme: only light</h2>
  <p>color-schemeで'only'を使用して「light」が適用される場合</p>
  <p>必ずライトテーマの色になる</p>
</div>

<div class="demo-case case-4">
  <h2>ケース4: color-schemeに何も指定されていない場合(= color-scheme: normal)</h2>
  <p>ページの"color-scheme"metaタグのテーマを参照</p>
</div>

:root {
  --light-text: #333;
  --dark-text: #f4f4f4;
  --light-bg: white;
  --dark-bg: #222;
}

/* ケース1: light-dark()の両テーマがcolor-schemeでサポートされる場合 */
.case-1 {
  color-scheme: light dark;
  color: light-dark(var(--light-text), var(--dark-text));
  background-color: light-dark(var(--light-bg), var(--dark-bg));
}

/* ケース2: color-schemeで'only'を使用せずに「light」が適用される場合 */
.case-2 {
  color-scheme: light;
  color: light-dark(var(--light-text), var(--dark-text));
  background-color: light-dark(var(--light-bg), var(--dark-bg));
}

/* ケース3: color-schemeで'only'を使用して「light」が適用される場合 */
.case-3 {
  color-scheme: only light;
  color: light-dark(var(--light-text), var(--dark-text));
  background-color: light-dark(var(--light-bg), var(--dark-bg));
}

/* ケース6:  color-schemeに何も指定されていない場合 */
.case-4 {
  color: light-dark(var(--light-text), var(--dark-text));
  background-color: light-dark(var(--light-bg), var(--dark-bg));
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.demo-case {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #ccc;
}