How to use default colors.android mod to set colorAccent

How to / Third Party Tooling
1

I have read in docs about mods.android.colors and it seems I can use this to modify colorAccent on Android. But I’m not able to figure out how.

My goal is to my app.json plugins section I would add this:

    "plugins": [
      ["mods.android.colors", { "accentColor": "#F34336" }]
    ],

I have tried doing some complicated stuff, which works, which is awesome, but was hoping for something simpler, like using that colors.android mod directly. I followed this post here - Android: How to set usesCleartextTraffic = false in managed project - #2 by wodin

I wrote ./plugins/withAndroidAccentColor.js:

const { withAndroidStyles, withPlugins } = require('@expo/config-plugins');

function withAndroidAccentColor(config, { color }) {
  return withAndroidStyles(config, config => {
    config.modResults = addOrReplaceAndroidAccentColor(
      config.modResults,
      color
    );
    return config;
  });
}

function addOrReplaceAndroidAccentColor(androidStyles, color) {
  // Add `<item name="colorAccent">...</item>` to the styles.xml
  let resources = androidStyles['resources'];
  if (!resources) {
    resources = {
      $: { 'xmlns:tools': 'http://schemas.android.com/tools' }
    };
    androidStyles['resources'] = resources;
  }

  let styles = resources['style'];
  if (!Array.isArray(styles)) {
    styles = [];
    resources['style'] = styles;
  }

  let appTheme = styles.find(item => item.$['name'] === 'AppTheme');
  if (!appTheme) {
    appTheme = {
      $: {
        name: 'AppTheme',
        parent: 'Theme.AppCompat.Light.NoActionBar'
      }
    };
    styles.push(appTheme);
  }

  let items = appTheme['item'];
  if (!Array.isArray(items)) {
    items = [];
    appTheme['item'] = items;
  }

  let colorAccent = styles.find(item => item.$['name'] === 'colorAccent');
  if (colorAccent) {
    colorAccent['_'] = color;
  } else {
    colorAccent = {
      $: { name: 'colorAccent' },
      _: color
    };
    items.push(colorAccent);
  }

  return androidStyles;
}

module.exports = (config, props) =>
  withPlugins(config, [[withAndroidAccentColor, props]]);

Then to my app.json I added:

    "plugins": [
      ["./plugins/withAndroidAccentColor", { "color": "#F34336" }]
    ],
2

Be aware that this utilize the EAS builds and will not work with regular expo build service.
Anyway - thank you so much for providing this, checked and it works both for managed and bare workflows.
Cheers.

3

Awesome! Did you figure out a simpler solution by chance? Maybe with mods.android.colors? I’m still looking for a simpler way just for fun of it.