Web Personalize

What it does

Web Personalize is where you control how your player website looks — its brand name, logo, and the full set of theme colours. Changes here are what players see on the public site.

Where to find it

CMS → Web Content → Web Personalize

Brand basics

Set your brand name, upload your logo (and a separate mobile logo if you want a tighter version for small screens), and your favicon — the little icon shown in the browser tab.

Theme colours

The theme is split into four groups of colours so you can tune each part of the site:

Group	Controls
Brand	Your main accent colour and the variants derived from it — buttons, links, active menu items, highlights.
Surface	The sidebar/top-bar rails and the card backgrounds.
Chrome	Page background, body text, muted text, dividers, and the danger/success status colours.
Input	The search/field background and placeholder text.

Set a colour

import { Steps } from ‘@astrojs/starlight/components’;

1. Find the colour card you want to change.
2. Pick a ready-made preset, use the colour picker, or type a hex code (for example 1a73e8) directly.
3. Each card shows a live preview of a player page, with the area that colour controls highlighted — so you can see where the colour lands before committing.
4. Press Save on that card, or use Save changes at the top to save every card you’ve edited at once.

Reset to defaults

Each card has a Reset link to return that one colour to the brand default, and Reset all at the top stages every colour back to default (you still press Save to commit).

Tip

Change one colour at a time and watch the preview. The Brand group has the biggest visual impact — start there, then adjust Surface and Chrome to make sure text stays easy to read against your backgrounds.

Tips

• Contrast matters. Light text on a light background (or dark on dark) is hard to read. The preview helps you catch this before players do.
• Colours are applied site-wide. If something looks off in one place, it’s usually a Chrome or Surface colour rather than Brand.
• For banners and the games lobby, see Carousel Banner and Studio Settings.