Блог

Я пытаюсь изменить цветовую схему моего приложения Ionic Angular на основе событий, которые происходят во время использования приложения. Приложение довольно большое, со многими компонентами, которые все должны быть в курсе изменения цвета, когда это происходит. В идеале я хотел бы знать, как заставить мои элементы ссылаться на цвет (цвета) (скажем, —primary ) и иметь возможность изменять этот цвет в одном месте, чтобы все элементы реагировали на изменение.

Я не нашел в документах Ionic ничего, что указывало бы на возможность изменять определения переменных CSS во время выполнения, поэтому вместо этого я рассмотрел, какую переменную я использую во время выполнения.

Я рассмотрел возможность перечисления множества разных цветов в variables.scss, а затем использования ngClass для применения глобально определенного имени класса, которое может реагировать на изменение. Недостатком этого является то, что мне пришлось бы предвидеть и индивидуально объявлять каждый возможный атрибут, которому нужен цвет. Например, я мог бы использовать [ngClass]=»primary-1″ для применения класса, определенного следующим образом:

 .primary-1 {
background: var(--ion-color-primary-1);
}
 

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

 .primary-1-other {
background-color: var(--ion-color-primary-1) 
}
 

Моя проблема в том, что я не хочу, чтобы глобальные определения классов знали о конкретных атрибутах элемента, если не существует краткого и всеобъемлющего способа сделать это.

Я также рассматривал возможность использования setProperty, но, насколько я могу судить, это изменяет стили только в конкретном контексте, а не в приложении в целом.

Приветствуются любые решения / идеи.

Я думаю, что вы хотите изменить глобальные переменные CSS Ionic. Это набор переменных, изменяемых во время выполнения. Вам повезло, потому что в старые времена вы могли изменять эти переменные только во время компиляции. Теперь есть методы для изменения во время выполнения.

В этом руководстве объясняется, как: https://ionicframework.com/docs/theming/css-variables