Skip to content

Conversation

@howardtingting-coder
Copy link

Summary:
Context:

  • problem: loading indicator is always only 1 color. This means it can't be seen when its background color is light (depends on the background color used for example in a button, the button color can be the same as the indicator color) -- we need to offer a way to customize the indicator's color to effectively contrast the background

Technical context:

  • css doesn't cascade and html.divs don't inherit css styles from parents in .native
  • THSpinner's xstyle (var(--...)) doesn't apply to the spinner indicator
  • this can be mutated through indicatorStyle & passing StyleSheet from react-native for 'color'
  • we let the caller decide the color theme/scheme because the caller is the one who decides the UI context in which the spinner appears (eg within a grey-ish or white button)

This diff:

  • add indicatorStyles prop with dark and light mode to give caller the option to determine spinner color based on background of call

Differential Revision: D86532694

@meta-cla meta-cla bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Nov 7, 2025
@meta-codesync
Copy link

meta-codesync bot commented Nov 7, 2025

@howardtingting-coder has exported this pull request. If you are a Meta employee, you can view the originating Diff in D86532694.

Summary:

**__Context__**:
- problem: loading indicator is always only 1 color. This means it can't be seen when its background color is light (depends on the background color used for example in a button, the button color can be the same as the indicator color) -- we need to offer a way to customize the indicator's color to effectively  contrast the background

**__Technical context__**:
- css doesn't cascade and html.divs don't inherit css styles from parents in .native
- THSpinner's xstyle (var(--...)) doesn't apply to the spinner indicator
- this can be mutated through indicatorStyle & passing StyleSheet from react-native for 'color'
- we let the caller decide the color theme/scheme because the caller is the one who decides the UI context in which the spinner appears (eg within a grey-ish or white button)

**__This diff__**:
- add indicatorStyles prop with dark and light mode to give caller the option to determine spinner color based on background of call

Differential Revision: D86532694
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. fb-exported meta-exported p: Facebook Partner: Facebook Partner

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants