In this step, you will customize the color palette. The style changes you make in this step will affect the top and bottom navigation bars, buttons, and terminal (code) font in the sample portal.
To customize the color palette:
Go to the Themes page for the portal you just created.
Cloud Console UI
On the Portals page, click the name of the portal you just created.
For example My First Portal.
Click Themes.
Click editEdit.
Classic UI
On the portal landing page, click Theme to navigate to the Theme editor.
In the Basic styles pane:
Set the Primary color to Red to adjust the color of toolbars, card headers, and buttons.
Set the Accent color to Blue to adjust the color of <pre> and <code> text.
Click Save.
Click Preview to preview the portal changes in a new browser tab.
Click Publish to publish the change to your portal. Confirm the operation when prompted.
Click View Portal to open the live portal in a new browser tab.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Hard to understand","hardToUnderstand","thumb-down"],["Incorrect information or sample code","incorrectInformationOrSampleCode","thumb-down"],["Missing the information/samples I need","missingTheInformationSamplesINeed","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-08-26 UTC."],[[["\u003cp\u003eThis content pertains to customizing the color palette within the Apigee and Apigee hybrid portal.\u003c/p\u003e\n"],["\u003cp\u003eUsers can modify the primary color, affecting elements like toolbars and buttons, and the accent color, impacting code text.\u003c/p\u003e\n"],["\u003cp\u003eChanges to the color palette can be previewed, saved, and then published to the live portal.\u003c/p\u003e\n"],["\u003cp\u003eThe next step following color palette customization involves customizing the portal's logo.\u003c/p\u003e\n"]]],[],null,["# Step 2: Customize the color palette\n\n*This page\napplies to **Apigee** and **Apigee hybrid**.*\n\n\n*View [Apigee Edge](https://docs.apigee.com/api-platform/get-started/what-apigee-edge) documentation.*\n\nIn this step, you will customize the color palette. The style changes you make in this step will affect the top and bottom navigation bars, buttons, and terminal (code) font in the sample portal.\n\nTo customize the color palette:\n\n1. Go to the **Themes** page for the portal you just created.\n\n ### Cloud Console UI\n\n 1. On the **Portals** page, click the name of the portal you just created. For example **My First Portal**.\n 2. Click **Themes**.\n 3. Click edit **Edit**.\n\n ### Classic UI\n\n On the portal landing page, click **Theme** to navigate to the Theme editor.\n2. In the **Basic styles** pane:\n\n - Set the **Primary color** to **Red** to adjust the color of toolbars, card headers, and buttons.\n - Set the **Accent color** to **Blue** to adjust the color of `\u003cpre\u003e` and `\u003ccode\u003e` text.\n3. Click **Save**.\n\n4. Click **Preview** to preview the portal changes in a new browser tab.\n\n5. Click **Publish** to publish the change to your portal. Confirm the operation when prompted.\n\n6. Click **View Portal** to open the live portal in a new browser tab.\n\nNext, you'll **customize the logo** in the portal.\n\n\n[1](/apigee/docs/api-platform/publish/portal/get-started/create-portal)\n\n\n[2](/apigee/docs/api-platform/publish/portal/get-started/customize-color-palette)\n\n\n[(NEXT) Step 3: Customize the logo](/apigee/docs/api-platform/publish/portal/get-started/customize-logo)\n\n\n[4](/apigee/docs/api-platform/publish/portal/get-started/edit-page)\n\n\n[5](/apigee/docs/api-platform/publish/portal/get-started/set-up-navigation)\n\n\n[6](/apigee/docs/api-platform/publish/portal/get-started/publish-api)\n\n\u003cbr /\u003e"]]
