How to customise Okta widget style (sass/scss)

Questions
1

I’m using okta in a hosted page, we have installed the package and now we have the .scss files under /node_modules/@okta/okta-signin-widget/dist/sass.
I would like to customise the widget style with our own app’s theme look&feeling.
I am struggling to find relevant (official) information on how to customise the okta widget style.
This page doesn’t mention it at all: https://developer.okta.com/code/javascript/okta_sign-in_widget

Is there any documentation on how to properly customise the sass code and having it output in the @okta/okta-signin-widget/dist/sass folder?
Will this added css code be overridden on the next update of the okta widget? https://developer.okta.com/code/javascript/okta_sign-in_widget#modifying-css

2

I’m not sure about the official docs, but this might help: https://developer.okta.com/live-widget/

3

That’s good. I am able to customise the style by changing the values in the variables.scss file. Thanks a lot, @mraible :slight_smile:

But when I update okta with npm that file will be overridden with whatever comes from the package. How do I change the style (scss files) by making sure they don’t get overridden by a package update?

4

I have the same question!

5

Yes! These outstanding issues request the ability to customize SASS: