Ionic 6 사용자 정의 색상 변수

앱의 UI에 대한 사용자 지정 색상을 만듭니다. Ionic 6 앱에서 테마를 변경하거나 맞춤 색상을 추가하세요. Ionic 앱의 테마를 변경하는 가장 빠른 방법은 1차, 2차, 밝음, 어둡게 등의 새 값을 설정하는 것입니다. 아래에서 미리 정의된 ionic 색상 변수의 값을 변경하고 ionic에서 사용자 정의 색상 변수를 생성합니다.

Ionic 6에서 사용자 정의 색상 추가

첫 번째 방문 ionic color generator , 선택한 색상을 만들거나 변경한 다음 아래와 같이 :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;

}

인스타그램 색상과 같은 사용자 정의 색상 변수를 생성하려는 경우. 그런 다음 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;
}

이제 앱에서 이온 색상 변수를 사용할 수 있습니다. 예를 들어 다음과 같이 사용할 수 있습니다.





위에서 만든 커스텀 인스타그램 컬러입니다.




공유 좋아요와 긍정적인 피드백을 주시면 제가 더 많이 쓸 수 있도록 동기를 부여해 주세요.

자세한 내용은 tutorials visit my website .

감사:)
행복한 코딩 :)