Методы добавления цвета к корневому элементу в CSS - Fcodenotes

Чтобы добавить цвет к корневому элементу CSS, вы можете использовать различные методы. Вот несколько подходов:

Метод 1: использование селектора :root

:root {
  --primary-color: red;
}
/* Usage */
h1 {
  color: var(--primary-color);
}

Метод 2: использование HTML-тега

/* HTML */
<html >
/* CSS */
h1 {
  color: var(--primary-color);
}

Метод 3. Использование класса CSS

/* HTML */
<html class="primary-color-red">
/* CSS */
.primary-color-red {
  --primary-color: red;
}
/* Usage */
h1 {
  color: var(--primary-color);
}

Метод 4. Использование JavaScript

// JavaScript
document.documentElement.style.setProperty('--primary-color', 'red');
// CSS
h1 {
  color: var(--primary-color);
}

Эти методы позволяют вам установить пользовательскую переменную CSS в корневом элементе, которую затем можно использовать во всех таблицах стилей CSS.