<p class="text-color">CSSのカスタムプロパティを使った配色の切り替え方法</p>
:root {
  --color-red: red;
  --color-blue: blue;
}

/* モバイル(デフォルト)のスタイル */
.text-color {
  color: var(--color-red);
}

/* タブレット・PC用のスタイル */
@media (width >= 768px) {
  .text-color {
    color: var(--color-blue);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.