Change how Vfinity looks
Switch between the three built-in themes, edit any of the design tokens in the theme studio, and set the preferences that survive a theme change.
Everything Vfinity draws reads from a set of design tokens: colours, fonts, corner radii, border widths, shadows, focus rings and animations. A theme is just a set of values for those tokens, so the theme studio can reach every part of the interface.
Find it all under SettingsAppearance and language.
The three built-in themes
| Theme | Look |
|---|---|
| Streetwear | Bold, high-contrast, hard edges. The default, and what this website is themed after |
| Modern | Soft, rounded, understated |
| Potato | Deliberately plain and lightweight |
Each has a dark and a light set. The light and dark switch is in the title bar.
The theme studio
Click Open theme studio for a full-screen editor over roughly ninety tokens, grouped into eleven sections:
| Group | Covers |
|---|---|
| Surfaces | Page background, cards, borders, text |
| Brand and status | The accent colour and the success, info, warning and danger colours |
| Text on colour | What gets drawn on top of a filled colour |
| Controls | Which colour each part of a button or input draws from |
| Event feed | The categorical hues for gifts, chat, likes, follows, shares and room events |
| Typography | Font families, base size, letter spacing, whether headings are uppercase |
| Shape | Corner radius and border widths |
| Depth | Shadow style, size and colour |
| Focus ring | Width, style, colour and offset |
| Motion | Transition durations and the hover nudge |
| Scrollbar | Size, colours and radius |
Edits paint live against real components as you drag, so you are always looking at the result rather than a swatch.
Contrast checking
The studio shows a contrast ratio next to colour pairs and says whether it passes WCAG AA. Watch this when you build a light mode: a neon that reads well on near-black usually fails on white.
Generate light mode derives one set from the other. It flags the result as generated, because a derived palette is a starting point rather than an answer.
Saving, exporting and importing
Name a theme and save it. You can keep up to thirty of your own. Export writes a .json file you can send to someone else; import reads one back.
Themes are also included in a settings backup.
Preferences that outlive the theme
Some settings are about you rather than about the theme, so they sit separately and stay put when you switch themes:
| Preference | What it does |
|---|---|
| Density | Compact, normal or comfortable. Multiplies the padding inside every component |
| Text scale | 85% to 130%. Scales the type and everything sized in rem |
| Motion | System, full, or off |
| Glass blur | Turn off the backdrop blur. It costs GPU |
| Glow | Turn off the neon glow on status indicators |
| Background image | A wallpaper behind the app, with opacity, blur and fit controls |
Density and text scale are deliberately independent: scale grows the type, density only changes how much air sits around it.
Language
The language picker is in the same section. Vfinity ships in English, Thai, Chinese, Japanese, Hindi and Spanish, and picks your system language on first run.
The overlay widgets take their language from the lang parameter in their URL, separately from the app, so you can run English widgets on stream while using the app in Thai.