You can manage your Vibe project's theme colors and font styles from a dedicated Theme panel, preview changes, and send selected updates to Copilot instead of manually editing theme files.
When configuring theme colors you can select from a list of curated color palettes and/or set the color for each element individually.
To configure theme colors, click Theme in the right side panel, then select Color palette.
To browse curated color palettes, click Browse more on the Current colors card. Click a palette to preview it in your project, then click Apply Changes when you are ready to make changes to your project.
While previewing palettes, click Stop testing to revert back to your original theme colors. This allows you to easily compare the palette against your existing colors.
To set colors for individual elements, scroll to the Color uses section of the Theme panel. You will see project elements listed here. Click the color swatch for an element to open the color picker. As you enter or select a new color, a preview displays.
It is important to note that no changes are made to your project until you click Apply Changes at the bottom of the Theme panel.
You can configure font styles for display and sans text. Display text is used for headings, while sans text is used for paragraph text. These can be configured individually, or by selecting from preset font pairings.
To configure theme fonts, click Theme in the right side panel, then select Text.
To browse preset font styles, click Browse more on the Current fonts card. Click a font style to preview it on your project, then click Apply Changes when you are ready to make changes to your project.
While previewing font styles, click Exit preview to revert back to your original font styles. This allows you to easily compare the fonts against your existing fonts.
To set font styles individually, scroll to the Fonts uses section of the Theme panel. Use the dropdown menus to select the Display font that is used for headlines, and Sans font that is used for body text. As you select a new font, a preview displays on the screen.
It is important to note that no changes are made to your project until you click Apply Changes at the bottom of the Theme panel.