Как переопределить переменные темы в Tailwindcss V4 - @Theme vs @layer Theme vs: root ⇐ CSS

[Anonymous]

Я пытаюсь понять, как правильно переопределить переменные CSS в Tailwindcss v4. Вот простой пример объявления переменной темы с @theme :

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

@theme {
--color-clifford: #bf79ea;
}
< /code>
Это прекрасно работает для темы по умолчанию. Однако, когда я хочу переопределить эту переменную для варианта тьмы: 

, другие ответы предполагают использование:

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

@layer theme {
:root, :host {
@variant dark {
--color-clifford: #7718b0;
}
}
}

Почему необходимо использовать @layer theme и селекторы, такие как: root и: host для переопределения темного режима? Почему я не могу просто объявить все внутри @Theme ? Какова фактическая разница между @Theme и @layer theme>: root ?
Я хочу лучше понять обоснование этих различий и правильный способ структурировать переопределения переменных тем в Tailwindcss v4.

Подробнее здесь: https://stackoverflow.com/questions/796 ... theme-vs-r