feat: customize theme of ion-alert and ion-action-sheet via color prop

[felipefialho]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

When using ion-select with color='secondary', the ion-checkbox and ion-item components inside the ion-select still use the default color='primary'.

Expected Behavior

ion-checkbox and ion-item components inside ion-select should inherit the color property defined in the parent ion-select component.

Steps to Reproduce

1. Change prop color of ion-select to secondary
2. Use with multiple
3. Open the options

Code Reproduction URL

https://felipefialho.github.io/select-with-multiple/

Ionic Info

Ionic:

   Ionic CLI : 7.1.1

Utility:

   cordova-res : not installed globally
   native-run  : not installed globally

System:

   NodeJS : v18.13.0
   npm    : 8.19.3
   OS     : macOS Unknown

Additional Information

No response

[liamdebeasi]

Thanks for the report. I talked with the team, and this is an experience we'd like to improve. color is not designed to cascade the same way mode is, but we'd like to explore adding a color property to components like ion-alert and ion-action-sheet so you can easily customize the theme. For ion-select, you'd be able to customize the theme in the interfaceOptions property.

[felipefialho]

@liamdebeasi Thank you for your prompt response.

I would like to inquire about customizing the theme color of the ion-checkbox component using the interfaceOptions property. I attempted to achieve this customization, but unfortunately, I couldn't find any examples or documentation regarding the specific usage of interfaceOptions for customizing the theme color of ion-checkbox.

Could you please provide some guidance or examples on how to customize the theme color of ion-checkbox using the interfaceOptions property? I appreciate any assistance you can offer in this matter.

[liamdebeasi]

We do not expose that customization option as a property. Though the proposed feature here would let you customize all checkboxes, radios, buttons, etc using the color property.

ion-alert is a scoped component, so you are also able to style the checkboxes directly using CSS as workaround.

Example:

ion-alert.my-custom-class .alert-checkbox-icon {
  border-color: green;
  background: green;
}

[felipefialho]

Thank you for your response, @liamdebeasi.

I have successfully customized the theme color of the ion-checkbox component using the interfaceOptions property. By utilizing the cssClass interface available in components like ion-alert, ion-action-sheet and ion-popover, I was able to add a color class to achieve the desired customization.

For example, in my code snippet, I used the interfaceOptions property in the IonSelect component to specify a custom color class based on the color variable:

<IonSelect 
  label="Popover" 
  interfaceOptions={{
    cssClass: `ion-select-color-${color}`,
  }} 
  interface="popover" 
  placeholder="Select One"
>
</IonSelect>

So I just used the global style to change the color of variables

.select-popover {
  &.ion-select-color-primary {
    .item-checkbox-checked {
      --color: var(--ion-color-primary);
    }

    ion-checkbox {
      --checkbox-background-checked: var(--ion-color-primary);
      --border-color-checked: var(--ion-color-primary);
    }
  }

  &.ion-select-color-secondary {
    .item-checkbox-checked {
      --color: var(--ion-color-secondary);
    }

    ion-checkbox {
      --checkbox-background-checked: var(--ion-color-secondary);
      --border-color-checked: var(--ion-color-secondary);
    }
  }
}

By modifying these global styles, I was able to customize the color of the ion-checkbox component within the specified ion-select context.

I hope this explanation helps clarify the customization process I followed. If you have any further suggestions or recommendations, please let me know.

Thank you!

[AlonaLaskar]

Hi, these are my data. I think I have a problem with the ionic display. Ionic CLI: Version 7.1.1. The Ionic CLI is the command-line interface for Ionic development. NodeJS: Version v16.14.0. Node.js is a JavaScript runtime environment. npm: Version 9.2.0. npm is the package manager for Node.js. OS: Windows 10. Indicates the operating system you're using. native-run: Version 1.7.2. It is a utility used to run native platform builds. cordova-res: Version 0.15.4. A utility for generating Cordova resources. Capacitor CLI: Version 5.0.4. Capacitor CLI is the command-line interface for Capacitor, a cross-platform app runtime. @capacitor/core: Version 5.0.4. Part of Capacitor, it provides the core functionality. @capacitor/ios: Version 5.0.4. A Capacitor plugin for iOS platform support. @capacitor/android: Version 5.0.4. A Capacitor plugin for Android platform support. Ionic Framework: Version @ionic/react 7.0.9. The Ionic Framework is used for building cross-platform mobile applications using web technologies.

[liamdebeasi]

@AlonaLaskar Please ask your debugging question on the Ionic Forums. We use this GitHub tracker for bug reports and feature requests.

[SE-Ab]

Is there any solution of this issue. I am not able to solve this color issue in select option. <ion-select formControlName="subjects" color="tangerine-tango" label="Subjects you want to learn" interface="popover" multiple="true" placeholder="Select"> <ion-select-option value="Maths">Maths</ion-select-option> <ion-select-option value="Science">Science</ion-select-option> <ion-select-option value="English">English</ion-select-option> </ion-select>

[SE-Ab]

Thank you for your response, @liamdebeasi.

I have successfully customized the theme color of the ion-checkbox component using the interfaceOptions property. By utilizing the cssClass interface available in components like ion-alert, ion-action-sheet and ion-popover, I was able to add a color class to achieve the desired customization.

For example, in my code snippet, I used the interfaceOptions property in the IonSelect component to specify a custom color class based on the color variable:

<IonSelect 
  label="Popover" 
  interfaceOptions={{
    cssClass: `ion-select-color-${color}`,
  }} 
  interface="popover" 
  placeholder="Select One"
>
</IonSelect>

So I just used the global style to change the color of variables

.select-popover {
  &.ion-select-color-primary {
    .item-checkbox-checked {
      --color: var(--ion-color-primary);
    }

    ion-checkbox {
      --checkbox-background-checked: var(--ion-color-primary);
      --border-color-checked: var(--ion-color-primary);
    }
  }

  &.ion-select-color-secondary {
    .item-checkbox-checked {
      --color: var(--ion-color-secondary);
    }

    ion-checkbox {
      --checkbox-background-checked: var(--ion-color-secondary);
      --border-color-checked: var(--ion-color-secondary);
    }
  }
}

By modifying these global styles, I was able to customize the color of the ion-checkbox component within the specified ion-select context.

I hope this explanation helps clarify the customization process I followed. If you have any further suggestions or recommendations, please let me know.

Thank you!

I still dont understand how you resolve this because in first issue you posted with multiple option select that is the main problem and then you posted resolve but there is no multiple option select. If you have you github link to see the project how you resolved , please help me.

[felipefialho]

@SE-Ab These classes that I've stylized are the default for any checkbox, so don't need to specify if is multiple or not

You can check the complete project working in this repository