Блог

Главная - Вопросы по программированию - Переопределение переменной CSS не работает, если она основана на другой переменной CSS

Переопределение переменной CSS не работает, если она основана на другой переменной CSS

#html #css #themes #css-variables

Вопрос:

Я определяю переменную css, основанную на другой переменной в элементе :root, и использую ее в некоторых элементах, подобных этому

 :root {
  --text: var(--primary);
}

p {
  color: var(--text);
}

Цель состоит в том, чтобы определить основной цвет на основе html-атрибута, подобного этому

 [data-theme-dark] {
  --primary: black;
}

[data-theme-light] {
  --primary: lightgray;
}

Поэтому всякий раз, когда применяется атрибут темной темы данных, он должен иметь черный текст, а всякий раз, когда применяется атрибут светлой темы данных, он должен иметь серый текст

В моем html я определяю атрибут light в html-теге, но я хочу, чтобы для одного абзаца он использовал темную тему

 <html data-theme-light>
  <head>...</head>
  <body>
    <p data-theme-dark>This text should be black</p>
    <p>This text should be gray</p>
  </body>
</html>

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

введите описание изображения здесь

Это ошибка с переменными CSS или я делаю что-то не так?

(отказ от ответственности: этот пример сокращен до минимального воспроизведения, поэтому я знаю, что есть другие способы достижения режима света/темноты, но я хочу понять этот конкретный случай)

развернутый пример: https://stackblitz.com/edit/web-platform-ya9nup?file=styles.css

Комментарии:

1.По-видимому, поскольку значение --text определяется :root и получает :root --primary , а не p. Or, когда вы вызываете var «—text», он отправляется на :root сбор значения, и существует его облегченная версия.

Метки: ,