Hello i want to make a gradient header on ion-navbar on my ionic 3 project.

home.html
<ion-header><ion-navbar color="primary">

variables.scss

$colors: ( primary: linear-gradient(red, yellow),

This doesnt work. color="primary" works if i put a single color value (e.g. #333)

Any idea how to make it gradient?