Change the Tab Bar's colour

4.1/5 rating (8 votes)



It is possible to do this by using a variety of methods:

  • Changing the color of the Tab Bar using a Module.
  • Changing the color of the Tab Bar using JavaScript.
  • Changing the color of the Tab Bar using CSS.

Changing the color of the Tab Bar using a Module:

  1. Go to Modules.
  2. Search Tab Bar.
  3. Add "Set Tab Bar Background Color" to your app, it'll add a button.
  4. Toggle the button to show and hide the tab bar.

Changing the color of the Tab Bar using Javascript:

  1. Open settings and click on advanced.
  2. Scroll down to custom javascript 
  3. Type in the following line and edit it according to your needs
    app.setTabBarBackgroundColor("Blue");

Note: Blue can be replaced with a color/hexadecimal value of your choosing.


Changing the color of the Tab Bar using CSS:

  1. Open settings and click on advanced.
  2. Scroll down to Custom CSS and type:
    .tab-bar {
        background-color: blue;
    }

Note: Blue can be replaced with a color/hexadecimal value of your choosing.

Share this product

Book a demo or Masterclass

Find out quickly if AppShed is right for your school.

Book a quick demo, or a more in-depth Masterclass,
to see how AppShed fulfills your curriculumn requirements.

   Book a demo or Masterclass   

appshed name white text 250

Copyright © 2022 AppShed Limited

AppShed Support
Customer Support

We are online and available to help teachers/educators using AppShed. How can we help you today?

Chat, call or email support@appshed.com