Создайте пользовательский цвет для пользовательского интерфейса вашего приложения. Изменение темы или добавление пользовательского цвета в приложении Ionic 6. Самый быстрый способ изменить тему приложения Ionic — это установить новое значение для основного, вторичного, светлого, темного и т.д. цветов. Ниже мы изменим значения предопределенных цветовых переменных Ionic, а также создадим пользовательские цветовые переменные в Ionic.
Добавление пользовательского цвета в Ionic 6
Сначала посетите генератор цветов ionic, создайте или измените цвета по своему выбору, затем скопируйте объект :root в файл src/themes/variables.scss, как показано ниже.
:root {
--ion-color-primary: #3880ff;
--ion-color-primary-rgb: 56,128,255;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255,255,255;
--ion-color-primary-shade: #3171e0;
--ion-color-primary-tint: #4c8dff;
--ion-color-secondary: #5260ff;
--ion-color-secondary-rgb: 82,96,255;
--ion-color-secondary-contrast: #ffffff;
--ion-color-secondary-contrast-rgb: 255,255,255;
--ion-color-secondary-shade: #4854e0;
--ion-color-secondary-tint: #6370ff;
--ion-color-tertiary: #5260ff;
--ion-color-tertiary-rgb: 82,96,255;
--ion-color-tertiary-contrast: #ffffff;
--ion-color-tertiary-contrast-rgb: 255,255,255;
--ion-color-tertiary-shade: #4854e0;
--ion-color-tertiary-tint: #6370ff;
--ion-color-success: #2dd36f;
--ion-color-success-rgb: 45,211,111;
--ion-color-success-contrast: #000000;
--ion-color-success-contrast-rgb: 0,0,0;
--ion-color-success-shade: #28ba62;
--ion-color-success-tint: #42d77d;
--ion-color-warning: #ffc409;
--ion-color-warning-rgb: 255,196,9;
--ion-color-warning-contrast: #000000;
--ion-color-warning-contrast-rgb: 0,0,0;
--ion-color-warning-shade: #e0ac08;
--ion-color-warning-tint: #ffca22;
--ion-color-danger: #eb445a;
--ion-color-danger-rgb: 235,68,90;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255,255,255;
--ion-color-danger-shade: #cf3c4f;
--ion-color-danger-tint: #ed576b;
--ion-color-medium: #8c97c5;
--ion-color-medium-rgb: 140,151,197;
--ion-color-medium-contrast: #000000;
--ion-color-medium-contrast-rgb: 0,0,0;
--ion-color-medium-shade: #7b85ad;
--ion-color-medium-tint: #98a1cb;
--ion-color-light: #f4f5f8;
--ion-color-light-rgb: 244,245,248;
--ion-color-light-contrast: #000000;
--ion-color-light-contrast-rgb: 0,0,0;
--ion-color-light-shade: #d7d8da;
--ion-color-light-tint: #f5f6f9;
}
Если вы хотите создать пользовательские цветовые переменные, например, цвета instagram. Тогда в файл variables.scss добавьте приведенный ниже код.
:root {
--ion-color-instagram: #fd4c76;
--ion-color-instagram-rgb: 253, 76, 118;
--ion-color-instagram-contrast: #ffffff;
--ion-color-instagram-contrast-rgb: 255, 255, 255;
--ion-color-instagram-shade: #fa3462;
--ion-color-instagram-tint: #d61845;
}
.ion-color-instagram {
--ion-color-base: var(--ion-color-instagram) !important;
--ion-color-base-rgb: var(--ion-color-instagram-rgb) !important;
--ion-color-contrast: var(--ion-color-instagram-contrast) !important;
--ion-color-contrast-rgb: var(--ion-color-instagram-contrast-rgb) !important;
--ion-color-shade: var(--ion-color-instagram-shade) !important;
--ion-color-tint: var(--ion-color-instagram-tint) !important;
}
Теперь мы можем использовать цветовые переменные ionic в нашем приложении. Например, мы можем использовать их следующим образом
<ion-icon name=»logo-twitter» color=»secondary»></ion-icon>
<ion-item color=»primary»></ion-item>
Это пользовательский цвет instagram, который мы создали выше.
<ion-icon name=»logo-instagram» color=»instagram»></ion-icon>
Пожалуйста, поделитесь и дайте положительный отзыв, чтобы мотивировать меня писать больше.
Для получения дополнительных уроков посетите мой сайт.
Спасибо:)
Счастливого кодинга:)