Tab/Page init Status bar Color Change multi color add for different tabs/pages

Questions
1

i am creating this… its working just okay. have issue while changing tab status bar color changing flicker. Please Help me to solve it, and Short number of function lines, i have 5 tabs.
Thanks in Advance :slight_smile:

$$(document).on('tab:show', '#tab1', function () {
    if ($$(this).hasClass('tab-active')) {
        app.statusbar.setTextColor("black");
        app.statusbar.setBackgroundColor("#ffffff");
    }
});
$$(document).on('tab:hide', '#tab1', function () {
    app.statusbar.setTextColor("white");
    app.statusbar.setBackgroundColor("#0047ae");
});
$$(document).on('tab:show', '#tab2', function () {
    if ($$(this).hasClass('tab-active')) {
        app.statusbar.setTextColor("black");
        app.statusbar.setBackgroundColor("#ffffff");
    }
});
$$(document).on('tab:hide', '#tab2', function () {
    app.statusbar.setTextColor("white");
    app.statusbar.setBackgroundColor("#0047ae");
});
$$(document).on('tab:show', '#tab3', function () {
    if ($$(this).hasClass('tab-active')) {
        app.statusbar.setTextColor("black");
        app.statusbar.setBackgroundColor("#ffffff");
    }
});
$$(document).on('tab:hide', '#tab3', function () {
    app.statusbar.setTextColor("white");
    app.statusbar.setBackgroundColor("#0047ae");
});
$$(document).on('tab:show', '#profilesettingID', function (tabInit) {
    if ($$(this).hasClass('tab-active')) {
        if (tabInit.srcElement.children[0].classList[1] == "themecolorpage") {
            app.statusbar.setTextColor("white");
            app.statusbar.setBackgroundColor("#0047ae");
        } else {
            app.statusbar.setTextColor("black");
            app.statusbar.setBackgroundColor("#ffffff");
        }
    }
});
$$(document).on('tab:hide', '#profilesettingID', function () {
    app.statusbar.setTextColor("white");
    app.statusbar.setBackgroundColor("#0047ae");
});
2

ok i solved it myself this (flicker/jerk) changes tabs. status bar colors.

$$(document).on('tab:show', '#tab1', function () {
  if ($$(this).hasClass('tab-active')) {
    setTimeout(() => {
      app.statusbar.setTextColor("black");
      app.statusbar.setBackgroundColor("#ffffff");
    }, 10);
  }
});
$$(document).on('tab:hide', '#tab1', function () {
  if (app.statusbar.setTextColor("black")) {
    setTimeout(() => {
      app.statusbar.setTextColor("white");
      app.statusbar.setBackgroundColor("#0047ae");
    }, 10);
  }
});