I have encountered an issue with CSS Custom Properties not affecting the helper text. Despite trying to change the color of the helper text, it remained unchanged. Is there a workaround or method to define Custom Properties specifically for helper text? The code below only results in the same color as the input field, which is not what I intended. Currently using default colors.
// Code snippet for the input field
<template>
<ion-input label-placement="floating" color="primary" fill="outline" placeholder="Text" label="title" helper-text="error" helper-text-color ="danger">
</ion-input>
<ion-button fill="clear" slot="end" aria-label="Show/hide">
<ion-icon slot="icon-only" :icon="eyeOff" aria-hidden="true"></ion-icon>
</ion-button>
</template>
<script lang="ts">
import { IonInput} from '@ionic/vue';
import { eyeOff } from 'ionicons/icons';
import { defineComponent } from 'vue';
export default defineComponent({
components: {
IonInput},
setup() {return { eyeOff };
},
});
</script>
// Color code section
/* Dark Mode Colors */
:root {
--ion-color-danger: #c5000f;
--ion-color-danger-rgb: 197, 0, 15;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255, 255, 255;
--ion-color-danger-shade: #ad000d;
--ion-color-danger-tint: #cb1a27;
}
@media (prefers-color-scheme: light) {
:root {
--ion-color-danger: #cb1a27;
--ion-color-danger-rgb: 203, 26, 39;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255, 255, 255;
--ion-color-danger-shade: #b01720;
--ion-color-danger-tint: #d2343f;
}
}
span.ion-text-left {
margin-right: auto;
}
This is the current code I am working on.