Запретить применение цветовой схемы CSS к элементу ⇐ CSS

[Anonymous]

На странице есть правило CSS: :root{color-scheme: dark;
На этой странице я хочу, чтобы это правило CSS не затрагивало определенный элемент.
Я пробую применить эти правила к цветовой схеме конкретного элемента: нормальная; или цветовой схеме: только светлая;, но это не работает.
Вы можете найти пример тестирования моей проблемы ниже, где я хочу, чтобы всегда был в светлом режиме (т. е. цвет текста всегда был черным)
Как я мог это сделать?

Код: Выделить всё

let root = document.querySelector(":root");
let button = document.querySelector("button");

button.addEventListener("click", () => {
event.preventDefault();
root.classList.toggle("light");
});

Код: Выделить всё

:root {
color-scheme: dark;
}

body {
display: grid;
font-size: 1.25rem;
place-items: center;
}

button {
font-size: 1.25rem;
line-height: 1.35;
width: 300px;
}
.only-light {
color-scheme: normal;
}

.light {
color-scheme: light;
}

Код: Выделить всё

Heading 1


Toggle Color

Подробнее здесь: https://stackoverflow.com/questions/790 ... an-element