Android cannot resolve symbol "primaryLightColor" attribute in styles

Question

I want to use Color Tool for picking colors that will be used in App. After selecting Primary and Secondary colors and exporting for Android, the output includes:

<resources>
  ...
  <color name="primaryLightColorBlue">#534bae</color>
</resources>

But when I try to use that in styles like this:

<style name="Blue" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
...
<item name="primaryLightColor">@color/primaryLightColorBlue</item>
</style>

I encounter with this error:

cannot resolve symbol  "primaryLightColor"

Also I tried colorPrimaryLight attribute as it is described here:

<item name="colorPrimaryLight">@color/primaryLightColorBlue</item>

But again I encounter an error:

Cannot resolve symbol 'colorPrimaryLight'

What is correct attribute corresponding to the primaryLightColor?

Answer 1

You are trying to set/override the value primaryLightColor for Theme.MaterialComponents.DayNight.DarkActionBar

That Theme doesn't have that attribute, Take a look at this answer https://stackoverflow.com/a/47506269/7968986

So to answer what else you should use: colorPrimary for the light one and colorPrimaryDark for any "non-light" one

Answer 2

There is a specific list of colors for theming in style. They are :-

<item name="colorPrimary">@color/yourColor</item>
<item name="colorPrimaryVariant">@color/yourColor</item>
<item name="colorOnPrimary">@color/yourColor</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/yourColor</item>
<item name="colorSecondaryVariant">@color/yourColor</item>
<item name="colorOnSecondary">@color/yourColor</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/yourColor</item>
<item name="colorSurface">@color/yourColor</item>
<item name="colorOnSurface">@color/yourColor</item>
<item name="colorPrimarySurface">@color/yourColor</item>
<item name="colorError">@color/yourColor</item>
<item name="colorOnError">@color/yourColor</item>

Solution

For your case we can tweak between colorPrimary and colorPrimaryVariant one of them will serve as light and the other a bit darker shade. ( using colorPrimaryLight as a variant of colorPrimary )

<item name="colorPrimary">@color/primary</item>
<item name="colorPrimaryVariant">@color/primaryLightColorBlue</item>