This article describes how to change the color of a button on the Okta Login Page for both Okta-hosted and embedded (self-hosted) environments.

• Okta Identity Engine (OIE)
• Okta Classic Engine
• Customization
• Custom URL Domain
• Okta Sign-In Widget ( Okta Hosted and Embedded)
• Second and Third Generation Sign In Widget

The method for changing the login button color depends on whether the Okta Sign-In Widget is hosted by Okta or embedded (self-hosted).

Okta Hosted Widget

To change the color of the login button on the Okta Hosted Widget, use either the Okta Admin Console or the Brands API:

A. Using the Okta Admin Console

1. Sign in to the Okta Admin Console.
2. Navigate to Customizations > Brands.
3. Select the desired brand.
4. Go to the Theme tab to configure the organization's theme.
5. Locate the Primary color setting and change it to the desired color. 

B. Through Brands API

If preferred, this can be accomplished using the Brands API. If unfamiliar with the curl command, use a tool like Postman to help structure the requests.

      1. Get the Brand ID: Get the desired brand's ID by making a GET request to the hitting /brands endpoint:

curl -v -X GET \
-H "Accept: application/json" \
-H "Content-Type: application/json" \
-H "Authorization: API_KEY_HERE"\
"https://${OktaDomain}/api/v1/brands"

      2. Get the Theme ID: Using the brand ID from the above step, get the theme ID by making the GET request to the /themes endpoint: 

curl -v -X GET \
-H "Accept: application/json" \
-H "Content-Type: application/json" \
-H "Authorization: API_KEY_HERE" \
"https://${OktaDomain}/api/v1/brands/${brandId}/themes"

      3. Update the Theme Color: Using both the brandId and themeId, update the button's color by providing the desired hex value in the primaryColorHex key to the same /themes endpoint:

curl -v -X PUT \
-H "Accept: application/json" \
-H "Content-Type: application/json" \
-H "Authorization: API_KEY_HERE" \
-d '{
    "primaryColorHex": "#1662dd",
    "secondaryColorHex": "#ebebed",
    "signInPageTouchPointVariant": "OKTA_DEFAULT",
    "endUserDashboardTouchPointVariant": "OKTA_DEFAULT",
    "errorPageTouchPointVariant": "OKTA_DEFAULT",
    "emailTemplateTouchPointVariant": "OKTA_DEFAULT",
    "loadingPageTouchPointVariant": "OKTA_DEFAULT"
}' "https://${OktaDomain}/api/v1/brands/${brandId}/themes/${themeId}"

NOTE:

• All the keys mentioned in the JSON body above must be present for a successful response.
• Touchpoint variants can be set to "OKTA_DEFAULT".
• primaryColorHex and secondaryColorHex cannot be set to "OKTA_DEFAULT" and must contain valid hex color values.
• Changing the primary color changes the color of buttons on email templates and Okta-hosted pages, as well as the navigation menu color on the End-User Dashboard. 

Embedded (Self-Hosted) Widget

When using an embedded (Self-Hosted) Sign-In Widget, the desired color can be achieved by modifying the OktaSignIn configuration object. Add the colors object directly within the configuration payload and specify the brand color using a hex code:

const config = new OktaSignIn({
      baseUrl: <base_url>,
      clientId: <client_id>,
      redirectUri: <redirect_uri>,
      colors: {
        brand: "#00FF00",
      }
    })

Related References

• Brands API Reference
• Okta Sign-In Widget
• Postman Public API Collection
• Okta Deployment Models