Работают только некоторые пользовательские свойства CSS, хотя все они явно присутствуют в HTML и отображаются инспектором - PullRequest
Новая
       42

Работают только некоторые пользовательские свойства CSS, хотя все они явно присутствуют в HTML и отображаются инспектором

0 голосов
/ 06 апреля 2020

Я работаю над реализацией различных тем на моем сайте. Я реорганизовал мою основную таблицу стилей для отображения переменных, и у меня есть еще три таблицы стилей "theme", которые определяют эти переменные на уровне :root. Окончательный HTML затем ссылается на две таблицы стилей: основную таблицу стилей и одну из трех таблиц стилей темы, которые включаются нажатием кнопки путем изменения атрибута ссылки href. Каким-то образом работают только некоторые переменные. 

/* dark.css (theme stylesheet only containing the custom properties) */
/* Only --background works */
:root {
    --background: #000000;

    --seperator: rgba(1,1,1,0.12);
    --text: #FFFFFF;

    --block-border: #404040;
    --block-shadow: #000000;
    --block-background: #151017;
}

/* All properties work except for --comment */
code {
    --keyword: #F72057;
    --type: #FF9519;
    --call: #FF5700;
    --property: #FF5700;
    --number: #F72057;
    --string: #F72057;
    --comment: #FFFFFF;
    --dot-access: #FF5700;
    --preprocessing: #646485;
}

Когда я затем go в инспектор, все кажется в порядке. Я вижу правильное наследование и даже могу щелкнуть переменную, в которой она используется, и увидеть предполагаемый цвет.

Некоторые примеры использования переменных: 

/* styles.css (main stylesheet) */
body {
    ...
    background: var(--background);
    color: var(--text);
}

pre code .comment {
    color: var(--comment);
    opacity: 0.4;
}

Другие подходы

Я пробовал несколько других подходов, каждый из которых приводил к одному и тому же результату (работали только некоторые переменные).

  1. Вместо ссылки на другую таблицу стилей, непосредственно измените переменные с javascript на теге HTML
  2. Вместо ссылки на несколько таблиц стилей, с тремя отдельными основными таблицами стилей
  3. Изменение пользовательского атрибута в теге HTML и определение всех переменных как [theme="dark"] {...} в одной основной таблице стилей

1 Ответ

0 голосов
/ 06 апреля 2020

Как указали @Pushkin и @Temany Afif, в моем коде были странные символы. Быстрый поиск и замена по всему проекту решил проблему.

...