Переменные пользовательского цвета в Ionic 6

Создайте пользовательский цвет для пользовательского интерфейса вашего приложения. Изменение темы или добавление пользовательского цвета в приложении 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>


Пожалуйста, поделитесь и дайте положительный отзыв, чтобы мотивировать меня писать больше.

Для получения дополнительных уроков посетите мой сайт.

Спасибо:)
Счастливого кодинга:)

Оцените статью
Procodings.ru
Добавить комментарий