Change how my site looks
Choose a Look, colours, fonts, light or dark mode and optional custom CSS in Site Studio's Design panel.
Your site's look lives in Site Studio: Design holds your Look, colours, typography, theme and advanced custom CSS, and Identity holds your profile, favicon and how your site appears in search results and when shared.
- Open Homepage to reach Site Studio and choose Design.
- Under Choose a Look, pick one and select Stage Look. Only presentation changes; your content, visibility and order stay as they are. Compare Looks shows each Look with your own content.
- Under Brand design, set your Accent color, a Font pack and Shape & spacing.
- Under Browser appearance, set Colour mode: Follow visitor preference, Always light or Always dark.
- For finer control, open Advanced: custom CSS. It applies after the design system.
- Choose Preview changes, check desktop, tablet and mobile, then Publish changes.
If this didn't work
- I can't find theme or custom CSS in Settings: they moved. Theme and custom CSS are in Site Studio under Design, and favicon and search & sharing are under Identity.
- A Look I tried changed my live site straight away: restoring or resetting on the Compare Looks page changes the live site, unlike staging in Site Studio. Use Restore points on that page to go back.
Section layouts and the hero are set under Homepage sections and Header & navigation.