Как изменить цвет панели инструментов в Ionic 4

Question

Я работаю в своем приложении Ionic 4 и хочу изменить цвет фона панели инструментов, но он не работает.

Это я попробовал:

ion-toolbar {
    --background: #f2f2f2;
}

ion-toolbar {
    background: #f2f2f2 !important;
}

Подобно:

цвет: вар (- ионно-цветной контраст);

где определить --ion-color-contrast, В variables.scss файл или еще где-нибудь для изменения цвета.

Может кто-нибудь помочь мне, как определить переменные в variables.scss для изменения цвета в Ionic 4.

Answer 1

Это должно работать:

// global.scss
ion-toolbar {
  --background: #f2f2f2;
}

Просто подтвердил это в моем окружении, это не так очевидно с этим цветом, потому что он довольно светлый, поэтому попробуйте что-нибудь более темное, как blue просто чтобы убедиться, что он меняется.

Справочная документация

Цвета определены в theme/variables.scss файл, вы можете использовать этот удобный генератор, чтобы помочь создать CSS, который вы можете просто скопировать и вставить в variables.scss файл, а затем ссылаться на цвета с помощью var(--ion-color-primary);,

Answer 2

HTML:

<ion-toolbar [color]="dynamicColor"></ion-toolbar>

Установите цвет в вашем файле variables.scss

$colors: (
   blue:    #387ef5,
   secondary:  #32db64,
   danger:     #f53d3d,
   light:      #f4f4f4,  
   dark:          #222 
);

В вашем файле.ts вы можете инициализировать вашу переменную "dynamicColor" цветом по умолчанию

private dynamicColor: string

constructor() {
   this.dynamicColor = 'light';
}

Вы можете изменить цвет, вызвав функцию

changeToDarkColor() {
    this.dynamicColor = 'dark';
}

Answer 3

ionic 4 variable.scss:

--ion-toolbar-background: var(--ion-color-primary);
--ion-toolbar-color: var(--ion-color-light);

для пользовательской страницы:

<ion-toolbar color="primary">

для пользовательских CSS:

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