/*
  Специально для тёмной темы при наличии класса,
  здесь окажутся стили, которые нужно переопределить принудительно,
  переключая тему
*/

:root.theme-dark {
  /* сохраните этот селектор в приведённом виде.
    Так стили написанные ниже будут иметь больший вес,
    чем стили в медиазапросе предпочтений пользователя
  */
  --accent-color: #ff0070;
  --title-color: #db00ff;
  --text-color: #f1b2ce;
  --decor-color: #000028;
  --accent-color-rgb: 255, 0, 112;

  --accent-color-text: #ff0070;
  --accent-color-btn: #ff0070;
  --accent-color-hover-rgb: 255, 0, 112;
  --accent-color-focus: #ff0070;
  --decor-color-title: #000028;

  --bg-img: url(../images/cover-image-dark.png);

  --span-decor-display: block;
}

.theme-dark .page {
  /* Вам также нужно будет написать ряд подобных селекторов */
}

@media(prefers-color-scheme: dark) {
  :root {
    --accent-color: #ff0070;
    --accent-color-rgb: 255, 0, 112;
    --title-color: #db00ff;
    --text-color: #f1b2ce;
    --decor-color: #000028;

    --accent-color-text: #ff0070;
    --accent-color-btn: #ff0070;
    --accent-color-hover-rgb: 255, 0, 112;
    --accent-color-focus: #ff0070;
    --decor-color-title: #000028;

    --bg-img: url(../images/cover-image-dark.png);

    --span-decor-display: block;
  }
}