What is the difference between colorPrimary and colorPrimaryDark in themes

Question

I'm trying to understand how the theme works in android. I don't know why colorPrimaryDark won't work with me or maybe i'm doing it wrong.

I tried this set and my action bar turns red because of colorPrimary:

<style name="MenuTheme" parent="Theme.AppCompat.Light.DarkActionBar">
  <item name="colorPrimary">#FF0000</item>
  <item name="colorPrimaryDark">#0000FF</item>
  <item name="colorAccent">#00FF00</item>    
  <item name="actionMenuTextColor">#0000FF</item>
</style>

I tried to remove the colorPrimary and it turns black (which I thought it will use blue because of colorPrimaryDark:

<style name="MenuTheme" parent="Theme.AppCompat.Light.DarkActionBar">
  <item name="colorPrimaryDark">#0000FF</item>
  <item name="colorAccent">#00FF00</item>    
  <item name="actionMenuTextColor">#0000FF</item>
</style>

I tried to remove the colorPrimaryDark and left the colorPrimary and it turns red again:

<style name="MenuTheme" parent="Theme.AppCompat.Light.DarkActionBar">
  <item name="colorPrimary">#FF0000</item>
  <item name="actionMenuTextColor">#0000FF</item>
</style>

I don't know if i'm using it in wrong way or it's not really changing at all. Can anyone tell me the difference among them?

I also tried actionMenuTextColor to change the text color in actionBar but nothing happened. I found out the solution using parent="Theme.AppCompat.Light.DarkActionBar" instead of parent="Theme.AppCompat.Light" alone. But of course it will only turn into white. I'm still trying to make it in different color if there is any way.

Sunny · Accepted Answer · 2020-11-12T05:47:45.583

98

colorPrimary – The color of the app bar.
colorPrimaryDark – The color of the status bar and contextual app bars; this is normally a dark version of colorPrimary.
colorAccent – The color of UI controls such as check boxes, radio buttons, and edit text boxes.
windowBackground – The color of the screen background.
textColorPrimary – The color of UI text in the app bar.
statusBarColor – The color of the status bar.
navigationBarColor – The color of the navigation bar.

you can use following link to setup your style.

https://blog.xamarin.com/material-design-for-your-xamarin-forms-android-apps/

edited Nov 12 '20 at 05:47

answered Aug 25 '17 at 10:40

Sunny

1,504
14
22

1

I already understand it by your explanation and also through the documentations I've read. I'm already trying other examples you gave but I notice that there are some that do not take effect like colorPrimaryDark, statusBarColor and textColorPrimary. Why is it? Is there something I need to do before I can use it? – jace Aug 31 '17 at 07:59
1

Where to get the whole list of all these `colorPrimary`, `colorPrimaryDark`, and so on that we can override in our app and can change their values according to our need? Any resource or link will be appreciated sir – Stack Overflow Jul 29 '19 at 22:41
Use color tool material.io/resources/color – Anatolii Shuba Nov 26 '19 at 06:50
@AnatoliyShuba, I agree, the tool is very nice. The only issue I have is that the XMl it generates with the colors does not use Android's naming convention (e.g., it returns 'primaryColor' when Android expects 'colorPrimary', the same for other values). – Kenneth Argo Jul 26 '20 at 20:18

score 12 · Answer 2 · answered Apr 08 '21 at 05:19

colorPrimary - The color displayed most frequently across your app’s screens and components. This color should pass accessibilty guidelines for text / iconography when drawn on top of the surface or background color. (Default Value: #6200EE)
colorPrimaryVariant - A tonal variation of the primary color. (Default Value: #3700B3)
colorOnPrimary - A color that passes accessibility guidelines for text/iconography when drawn on top of the primary color. (Default Value: #FFFFFF)
colorSecondary - The secondary branding color for the app, usually an accented complement to the primary branding color. (Default Value: #03DAC6)
colorSecondaryVariant - A tonal variation of the secondary color. (Default Value: #018786)
colorOnSecondary - A color that passes accessibility guidelines for text/iconography when drawn on top of the secondary color. (Default Value: #000000)

https://material.io/develop/android/theming/color

score 2 · Answer 3 · answered Nov 19 '21 at 20:58

2

android:background="?attr/colorPrimary"

You can use this to use the default colorPrimary value

answered Nov 19 '21 at 20:58

Uttaran Das

25
5

score 0 · Answer 4 · answered May 05 '22 at 10:34

Material Theme Colors

colorPrimary and colorSecondary represent the colors of your brand
colorPrimaryVariant and colorSecondaryVariant are lighter or darker shades of your brand colors
colorSurface is used for “sheets” of material (like cards and bottom sheets)
android:colorBackground is the window background color of your app
colorError is, as the name suggests, for errors and warnings
The various “On” colors (colorOnPrimary, colorOnSecondary, colorOnSurface, etc.) are used to tint foreground content (such as text and icons) displayed on top of the other colors. They need to meet accessibility requirements and have sufficient contrast against the colors they’re displayed on.

For more information see: https://material.io/blog/android-material-theme-color

Apparently none of those "On" colors actually changes the text color for the actionBar. I've tried a few other things like android:textColor, android:textColorPrimary and nothing changes the color of actionbar text. Should be colorOnPrimary ... very confusing. — JPM, Nov 15 '22 at 20:38

What is the difference between colorPrimary and colorPrimaryDark in themes

4 Answers4

Material Theme Colors

Linked