<body>
  <label for="color-blue">青</label>
  <input type="radio" id="color-blue" name="color" value="blue" />
  <label for="color-green">緑</label>
  <input type="radio" id="color-green" name="color" value="green" />

  <div class="main-color">メインカラーの要素</div>

  <div class="accent-color">アクセントカラーの要素</div>
</body>
/* 青のラジオボタン #color-blue が選択されていた場合 */
:root:has(#color-blue:checked) .main-color {
    /* メインカラー */
    background-color: darkblue;
    color: white;
}

:root:has(#color-blue:checked) .accent-color {
    /* アクセントカラー */
    color: deepskyblue;
}

/* 緑のラジオボタン #color-green が選択されていた場合 */
:root:has(#color-green:checked) .main-color {
    /* メインカラー */
    background-color: darkgreen;
}

:root:has(#color-green:checked) .accent-color {
    /* アクセントカラー */
    color: springgreen;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.