How to set color from a variable with the Hex code on a tab bar?

I was developing an app on Ionic 2 that requires a child page to have a tabbar(with tabs!) after a parent page which also has a tab bar.
The first problem I had was that the parent tabbar color(from the tabbar class) was being applied to the child tab bar.
Also how do we apply a color from a variable to the tabbar? For example I want the background color to be (#4444).
It might seem really trivial to some here but I am absolutely struggling with this problem because the tabs component generates a div after the tabs component and I have no idea as to how I can set the color on that div from a variable!

If you want to give the element another color with a Hex you can do it like:

<ion-row class="tab-bar" [style.color]="sColor" [style.background-color]="sBackgroundColor">

Make sure sColor or sBackgroundColor has the correct HEX color from your .TS file.

Hope It helped you out.

Hi wthijmen,
that didn’t not solve my problem because the color is being applied to the ion-tabs component but the ion-tabs component creates a div below it before it renders the ion-tab and this div has the tabbar class which sets the border color and background color.

As you can see implementing your solution does not set the background color on this div. I have similar problems with the nav bar. They all seem to create divs below the main component that have classes that set the css on my pages.

Maybe you should try to erase that style from your CSS.


.tabs-ios-navbar-default-color .tabbar 
    border-color: none;
    background-color: none;

If this doesn’t work try an important, I know it’s ugly.

This should been the working method so far as I know, I’m using it as well in my app because my app would been used by multiple customers and they want a customizable environment based on their logo colors.

Maybe you can provide a screenshot of the example so I can see what really happens.

That didn’t work for me. I still have the problem of not being able to set it from a variable because the color is not set on that div. I managed to separate it out from the parents tab. So it is no longer setting the color from the parent. But I am not sure how I can set the color on that generated div with a variable.

To explain my situation a bit better, if you look at my attachments above, you will see that the div (highlighted section in image 2) has been added to the code by ionic when you use ion-tabs. I am not sure how we can access this div. So my question is how can we update the background color on tabs dynamically without access to that div and isn’t that a big problem if we want to add dynamic colors to tabs or even nav bars? Just to clarify myself I am using a rest API to make a call to get the desired color. I am not talking about scss variables but ts varaibles that are set from that rest call.

.factory(‘AddCSSService’, [function() {
return function(selectors, declarations) {
var declarationString = “”;
angular.forEach(declarations, function(value, key) {
declarationString += key + “:” + value + " !important;"

    if (declarationString != "") {
        var sheet = document.createElement('style');
        sheet.innerHTML = selectors + " {" + declarationString + "}";

I used this previously in Ionic 1 to achieve the something similar. To go back to this seems like taking 10 steps back in terms of how we implement simple things like color change in Ionic.

To dynamically change the color of a div with a Color Picker in Ionic 5:
watch this video for making the color Picker:


<div id="picker"></div>
            Color hex: {{colorCodeHEX}}

<div [style.background-color]="colorCodeHEX">&nbsp;</div>

if you remove the &nbsp; it doesn’t work

in TS

import iro from '@jaames/iro';  


 ngOnInit() {
    let ref = this;
    var colorPicker = iro.ColorPicker ("#picker",
      layout: [
        component: iro.ui.Wheel,
        options: {}

     ref.colorCodeHEX = color.hexString;