Ionic 2 overriding sass items - css

Question

I have an Ionic 2 app, that has an ion-searchbar.
<div id="search" class="search-input-keyword">
<ion-searchbar class="ion-searchtext" id="ion-searchtext" [(ngModel)]="searchQueryText" (ionFocus)="focusSearch($event)"
(change)="onChangeText($event)" (ionClear)="onCancelText($event)" (ionInput)="onInputText($event)" placeholder="{{jobType === 0 ? favourite ? 'Market Favourites' : 'Market' : favourite ? 'Postings Favourites' : 'Postings'}}"
debounce="1"></ion-searchbar>
</div>
I would like to change the input text color, and the magnifying glass icon color to #fff.
I have read here, that in order to do so, you need to change the sass variables.
I have tried the following in variables.scss:
$colors: (
primary: #009196,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222
);
$searchbar-ios-input-text-color: #fff;
$searchbar-ios-input-search-icon-color: #fff;
But there is no effect.
However, the following line does have an effect:
$text-color: #000099;
So I guess that the $searchbar-ios-input-text-color: #fff; and $searchbar-ios-input-search-icon-color: #fff; are the issue.
Question
Can anyone please advise how to change the font and icon colours?
Thanks
UPDATE
Here is some more code samples:
css
.toolbar-background-md {
background: linear-gradient(to bottom right, #00a7ad, #004547);
}
.bar-button-default-md {
color: #fff;
}
.searchbar-md .searchbar-input {
background: linear-gradient(to bottom right, #009da3, #018287);
//background-color: #009196;
}
input::-webkit-input-placeholder {
color: red ;
}
input:-moz-placeholder {
color: red ;
}
input:-ms-input-placeholder { /* IE10+ */
color: red ;
}
.toolbar-title-md {
padding: 0 12px;
font-size: 2rem;
font-weight: 500;
color: #fff;
}
.close-filters {
color: #fff;
width: 52px;
font-size: 22px;
background-color: transparent;
box-shadow: none !important;
}
.slide-fade-hide {
transition: 1s all linear;
opacity: 0;
height: 0;
position: absolute;
top: 0;
z-index: -10;
}
.slide-fade-show {
transition: all 1.2s ease-in;
opacity: 1;
height: 2em;
z-index: 1;
}
.list-md {
margin: 0px 0px 0px 0;
}
.scroll-up {
margin-top: 20px;
}
.menu-title {
padding: 1px 95px 1px 10px;
}
.menu-toolbar {
padding: 35px;
}
.menu-content {
position: relative !important;
}
.item-search-wanted {
padding-left: 1px;
}
.item-search-offered {
padding-left: 1px;
}
.job-content-offered {
background-color: white !important;
}
.job-content-wanted {
background-color: white !important;
}
.search-button-star {
background-color: #009196;
}
.search-input-keyword {
width: 125%;
display: flex;
}
.search-input {
width: 125%;
}
.toolbar-content {
display: flex;
}
.extra-search-col {
padding: 0px;
}
ion-col {
padding: 2px;
}
ion-title {
z-index: 11;
}
ion-avatar img {
border-radius: 2.8rem;
max-height: 5.6rem;
max-width: 5.6rem;
}
.small-text-search {
font-size: 75% !important;
color: grey !important;
padding-top: 4px;
}
.small-text-search-desc {
font-size: 85%;
}
.small-text-search-rating {
padding-top: inherit;
padding-left: inherit;
}
.small-text-search-starrating {
padding-top: 2px;
font-size: 100% ! important;
}
.search-category {
float: right;
}
.job-tite {
width: 250px;
}
.job-timestamp {
white-space: nowrap;
}
.search-rating {
float: left;
}
.search-popover-button {
width: 75px;
height: 75px;
}
.button-icon-only ion-icon.search-popover-icon {
font-size: 2.8em;
}
.filter-image {
-webkit-filter : hue-rotate(-30deg) opacity(100%);
filter : hue-rotate(-30deg) opacity(100%);
}
.icon-text {
padding-left: 5px;
padding-bottom: 3px;
}
.icon-text-no {
padding-left: 5px;
}