Changing the colour of the icons of bottom menu bar and header part of the tab

[Miguel_Coelho]

Hey guys!

I am wondering whether anyone has created a CSS code to change the colour of the icons of bottom menu bar and header part of the tab?

I have actually found a way to change the color of the bottoms but now I cannot find a way to change the colour of the icons.

[data-test="app-button-view"] {
background-color: #ff1493 !important;
border-color: 	#ff1493 !important;
}
[data-test="app-button-view"]:active {
background-color: pink !important;
border-color: pink !important;
}

Would be really greteful if someone could help!

[Miguel_Coelho]

[hisashi.fujita]

Please try this.

<pre><span><style>
[data-test="nav-button-menu"] {
color: #ff57c7; /*←hamburger icon color*/
}
#tabBar { 
box-shadow:none;
background-color: #ff57c7 ;
}
#tabBar svg { 
color: white; /*←icon color*/
}
[role="tab"] {
color: black ; /*←text color*/
}

[Miguel_Coelho]

Amazing! Thank you so much!

[Thoughts]

Is there a way to make the selected tab be different?

[ThinhDinh]

<pre><span><style>


[data-test="nav-button-menu"] {
color: #ff57c7; /*←hamburger icon color*/
}
#tabBar { 
box-shadow:none;
background-color: black ;
}

#tabBar svg { 
color: white; /*←icon color*/
}

[role="tab"] {
color: white ; /*←text color*/
}

button[aria-label="Demo 1"] {
color: gold;
}

button[aria-label="Demo 1"] >div svg {
color: gold !important;
}

Using the tab name in the last 2 parts to change its color.

Example for “Demo 2” tab.