Here you can find more info: https://docs.mendix.com/refguide/native-styling-refguide#navigation-widget
You can also look inside Atlas files and check how we at Mendix are styling header and all the other widgets.
Please navigate to theme/native and check the files inside core folder.
The best way to customize the topbar is to go to the file `theme/styles/native/app/custom-variables.js` and replace the following code:
// Navigation Styles
export const navigation = {
topBar: {
backgroundColor: background.primary,
backButtonColor: contrast.highest,
titleColor: contrast.highest,
},
bottomBar: {
color: contrast.high,
selectedColor: brand.primary,
backgroundColor: background.primary,
},
};
with
// Navigation Styles
export const navigation = {
statusBar: {
backgroundColor: background.primary,
barStyle: darkMode ? "light-content" : "dark-content",
},
topBar: {
backgroundColor: background.primary,
backButtonColor: contrast.highest,
titleColor: contrast.highest,
titleFontSize: font.sizeH5,
},
bottomBar: {
color: contrast.high,
selectedTextColor: contrast.high,
selectedIconColor: brand.primary,
backgroundColor: background.primary,
fontSize: font.sizeSmall,
iconSize: font.sizeSmall,
},
progressOverlay: {
color: "#FFF",
activityIndicatorColor: "#FFF",
backgroundColor: `rgba(0, 0, 0, 0.5)`,
fontSize: font.size,
},
};
And change the values as desired :) (The updated custom variables will be in the next Atlas release)
Alternatively you can also copy the complete default styling from `theme/styles/native/core/widgets/navigation.js` to `theme/styles/native/app/custom.js` and change/update it there.
great, I did not realise the header was part of the navigation widget. Thanks guys!