Customizing login spinner colors

Hi!

I would like know how change the color of the login spinner in the Store Theme?

Hi @marmarquez! You should be able to style it using the vtex__icon-spinner CSS class. Check out this documentation to understand how styling works in Store Framework stores:

Thanks for the info.

I’ve reviewed that documentation, but since I can’t locate that element with the inspector I can’t get more information about its tachyon classes, I don’t know which ones correspond to it.

On the other hand, the vtex__icon-spinner class, which app does it come from? how could i style it?

Yes, I understand! I had the same issue here, had to reach out to the developer responsible for the login component. Later I figured out that I could use the Chrome DevTools Debugger to pause my code with breakpoints when the Spinner became visible.

It’s the vtex.login app, responsible for the login component in Store Theme.

I found two ways to style it:

  • Create a new /styles/css/vtex.login.css file in your theme with the content below:

    :global(.vtex__icon-spinner) {
      color: #00f;
    }
    
  • Change the hex code in the semanticColors.text.emphasis variable of the /styles/configs/style.json file for your theme1

    1 Note: this will also affect other elements that use that semantic color

1 Like

Ooh! :hushed: Many thanks! You gave me very useful information!

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.