Companion Settings Can't Select a Colour

[LordElysian]

My clockface has a colour theme applied to it when the user selects a base colour from the settings in the companion. There are three colours associated with each selectable colour. My problem, however, is that the colour just can't be selected. The settings render fine, but tapping on the colour circles does nothing. No checkmark appears when a colour is tapped, and as a result, additional themes besides the default theme can't be applied. I think it's a problem with the settings code but I'd be interested to hear if it's something else.

function colourSettings(props) {
  return (
    <Page>
      <Section title="Colour Theme">
        <ColorSelect
          settingsKey="colour"
          label="colour"
          colors={[
            {color: '#e8004e', value: {lightC: '#e8004e', stepC: '#a1063a', darkC: '#571d2f'}},
            {color: '#00b6e8', value: {lightC: '#00b6e8', stepC: '#0680a1', darkC: '#1d4957'}},
            {color: '#d300e8', value: {lightC: '#d300e8', stepC: '#9306a1', darkC: '#531d57'}},
            {color: '#91d805', value: {lightC: '#91d805', stepC: '#669509', darkC: '#3e511d'}},
            {color: '#7d94a8', value: {lightC: '#7d94a8', stepC: '#5c7086', darkC: '#304a6e'}},
            {color: '#eb9d0c', value: {lightC: '#eb9d0c', stepC: '#9e5b00', darkC: '#785124'}}
          ]}
        />
      </Section>
    </Page>
  );
}

registerSettingsPage(colourSettings);

[JonFitbit]

I'm not sure you can store those extra values in the component.

Does it work with just a standard set of colors?

<ColorSelect
          settingsKey="colour"
          colors={[
            {color: 'tomato'},
            {color: 'sandybrown'},
            {color: 'gold'},
            {color: 'aquamarine'},
            {color: 'deepskyblue'},
            {color: 'plum'}
          ]}

[LordElysian · Accepted solution]

Hey JonFitbit!

I wanted to follow up on this. I got a working version of my clockface following your suggestion of changing the settings from a ColorSelect to a regular Select. That version is below:

function colourSettings(props) {
  return (
    <Page>
      <Section title="Colour Theme">
        <Select
          settingsKey="colour"
          options={[
            {name: 'Fuschia', value: {lightC: '#e8004e', stepC: '#a1063a', darkC: '#571d2f'}},
            {name: 'Cyan', value: {lightC: '#00b6e8', stepC: '#0680a1', darkC: '#1d4957'}},
            {name: 'Violet', value: {lightC: '#d300e8', stepC: '#9306a1', darkC: '#531d57'}},
            {name: 'Lime', value: {lightC: '#91d805', stepC: '#669509', darkC: '#3e511d'}},
            {name: 'Slate', value: {lightC: '#7d94a8', stepC: '#5c7086', darkC: '#304a6e'}},
            {name: 'Suede', value: {lightC: '#eb9d0c', stepC: '#9e5b00', darkC: '#785124'}}
          ]}
        />
      </Section>
    </Page>
  );
}

registerSettingsPage(colourSettings);

Getting that to work was really helpful for my next iteration. I was more partial to a color select, so I now have my settings set as:

function colourSettings(props) {
  return (
    <Page>
      <Section title="Colour Theme">
        <ColorSelect
          settingsKey="colour"
          colors={[
            {color: '#e8004e', value: '#e8004e'},
            {color: '#00b6e8', value: '#00b6e8'},
            {color: '#d300e8', value: '#d300e8'},
            {color: '#91d805', value: '#91d805'},
            {color: '#7d94a8', value: '#7d94a8'},
            {color: '#eb9d0c', value: '#eb9d0c'}
          ]}
        />
      </Section>
    </Page>
  );
}

registerSettingsPage(colourSettings);

To get the other colours to register in the app, I built a helper function that lives in the "common" folder, where based on an input string containing the colour hex code, it returns an array containing the other two colours that are associated with the theme. That helper function is below:

export function colorAssociation(inputColor) {
  var outputColors = new Array(2);
  if(inputColor == '#e8004e'){
    outputColors[0] = '#a1063a';
    outputColors[1] = '#571d2f';
  }
  else if(inputColor == '#00b6e8'){
    outputColors[0] = '#0680a1';
    outputColors[1] = '#1d4957';
  }
  else if(inputColor == '#d300e8'){
    outputColors[0] = '#9306a1';
    outputColors[1] = '#531d57';
  }
  else if(inputColor == '#91d805'){
    outputColors[0] = '#669509';
    outputColors[1] = '#3e511d';
  }
  else if(inputColor == '#7d94a8'){
    outputColors[0] = '#5c7086';
    outputColors[1] = '#304a6e';
  }
  else if(inputColor == '#eb9d0c'){
    outputColors[0] = '#9e5b00';
    outputColors[1] = '#785124';
  }
  else{
    outputColors[0] = '#a1063a';
    outputColors[1] = '#571d2f';
  }
  
  return outputColors;
}

I hope this helps anyone else looking to have a setting that presents one colour that influences multiple colours in theming their app.