I noticed that the CSS Custom Properties did not work for the helper text. I tried to change the helper text color and nothing happened. Is there a workaround or some way of defining the Custom Properties to account for helper text separately? The below code just gives the same colour as the input field, which doesn’t help. I’m using the stock colours rn
//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>
//the color code
/* 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 what im currently working with
New contributor
Daniel Esenwa is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.