Monaca Onsen UI Discord Chat Github Repo

How to change <ons-tab> icon colors?

  • Dear Masters,

    I have a question please help me,

    I use code:

    <ons-tabbar id=“myTabbar” position=“auto” class=“yourFooterClass”>
    <ons-tab page=“html/pending_tasks.html” label=“TEST” icon=“fa-home” active></ons-tab>
    <ons-tab page=“tab2.html” label=“TEST” icon=“fa-calculator” s></ons-tab>
    <ons-tab page=“tab2.html” label=“TEST” icon=“fa-address-book”></ons-tab>
    <ons-tab page=“tab2.html” label=“TEST” icon=“address-card”></ons-tab>


    How to blue color active icon change “red” (or other color) colors ?

    Thank you

  • administrators

    The easiest way to do this is by creating a custom theme with Onsen UI Theme Roller:

    Check the ‘Customize’ box and then scroll down to the Tabbar component. On the right-hand pane, you will see ‘Component Variables’ and under that heading is ‘tabbar highlight text’. Changing ‘tabbar highlight text’ will change the colour.

    Once you are finished, click ‘Download’ and then import the downloaded files into your Onsen UI project.

  • @emccorson Can you give us a little more about this ‘import the downloaded files into your project’.
    I mean, I know what this mean, but how we should do it?
    Does it mean that we should do something with node moduls/onsenui/css-components-src and so on or something different.
    Can you give us here a detail instructions how to do it. Thank you!

  • administrators

    No need to touch any of the files in node_modules.

    First unzip the file you downloaded from Theme Roller. Put the CSS files in a directory in your source directory (for example, www/styles).

    In your index.html, you should have a line something like:

    <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">

    Change the href attribute to point to the onsen-css-components.css file that you just put in your source directory. For example, if you put the CSS files in www/styles and your index.html file is in www change it to:

    <link rel="stylesheet" href="styles/onsen-css-components.css">

    Then add another line to link the theme.css file:

    <link rel="stylesheet" href="styles/theme.css">

    That should be it working. If you are still having problems, can you provide a tree of your project structure so I can see which files are where?

  • administrators

    Oh, I just realised from your other post that you might be using React.

    If you are using React, instead of using the link tag, you should import your CSS styles however you already import CSS styles for React.

  • @emccorson thank You for replyed, it was helpful.
    I downloaded a ‘theme.css’ from theme roller and imported it in project and everything working right now, but I have now something different to deal with, people with who I working on project gave me something like this (pictures down below).

    0_1584532493840_Screenshot from 2020-03-18 12-50-44.png

    1_1584532493841_Screenshot from 2020-03-18 12-50-59.png

    How they told me, they created this files on ‘onsen theme roller’ but I don’t know how!?
    As you can see, I have theme and also I have components, its different from what ‘theme roller’ generate for you. So, how I should import all of these components in my React project?

    Thank You in advance.

  • administrators

    It’s hard to know without seeing the files, but it looks like the components directory contains CSS only for specific components. In that case you want the styles in the components directory to override the ones in onsen-css-components.css. So you should still import theme.css and onsen-css-components.css as normal, but then after the onsen-css-components.css import, import each file in the components directory. (I think.)

  • @emccorson
    It is just how you said it. Thank you a lot.
    After importing a theme.css, I imported each component from components and it override onsen component style.