Skip to main content

Select Option Theming Support

Added support for customizing select option colors through the theme system. This allows for more granular control over the appearance of select options in different states.

Usage​

You can now customize select option colors using the following theme structure:

const updatedTheme = window.hapiUtils.mergeDeepOverwriteArrays(
    window.hapi.theming.state.theme.value,
    {
        selectOption: {
            color: "green",
            background: "white",
            "&:hover": {
                color: "blue",
                background: "lightblue",
            },
            "&.selected": {
                color: "white",
                background: "darkgreen",
            },
        },
    },
)

window.hapi.theming.state.theme = updatedTheme

Theme Properties​

The following properties are available for customization:

  • selectOption.color: Controls the default text color
  • selectOption.background: Controls the default background color
  • selectOption["&:hover"].color: Controls the text color on hover
  • selectOption["&:hover"].background: Controls the background color on hover
  • selectOption["&.selected"].color: Controls the text color when an option is selected
  • selectOption["&.selected"].background: Controls the background color when an option is selected

If any of these properties are not specified, the component will fall back to the default theme colors.