Редактирование цветов по умолчанию для компонента в Ionic

Question

Начинающий с Иони c & Angular здесь. Я пытаюсь изменить цвет переменной для определенного компонента, но он не работает. Я уже посмотрел похожие посты о переполнении стека, и они мне не помогли. Я пытаюсь изменить цвет фона для определенного компонента.

Вот мой код для /component/comp.scss:

body{

    --ion-background-color: #ffffff;

}

Вот мой код для /theme/variables.scss:

@media (prefers-color-scheme: dark) {
  .ios body {
    --ion-background-color: #000000;
    --ion-background-color-rgb: 0,0,0;
  }
}

Answer 1

TL; DR: Если вы хотите стилизовать фон для отдельного компонента, вы, скорее всего, ищете --background вместо --ion-background-color;

Long Story: Синтаксис, который вы используете, создает переменную SASS и обычно используется в тематике целых приложений Ioni c, и в этом случае вы объявите эти переменные в root следующим образом:

:root {

     --ion-background-color: #FFFFFF;

}

, а затем сможете использовать переменную в любом месте вашего приложения, даже на элементах, отличных от Ioni c:

body {

     background-color: var(--ion-background-color);

}

Другими словами, свойство --ion-background-color isn ' t переопределяет любое сгенерированное свойство Ioni c, но вместо этого создает переменную многократного использования.

Однако при поиске компонентов, определяющих стиль c, синтаксис обычно --background, но вам нужно проверить документацию , чтобы убедиться,, Каждый компонент Ioni c имеет документацию, в которой перечислены все пользовательские свойства CSS. Однако в большинстве случаев вы захотите использовать --background. Например, если вы хотите изменить цвет фона ion-button:

ion-button {

     --background: #FFFFFF;

}