Themes and branding

For everyone: light, dark and colour themes

Every signed-in user has a theme menu (the palette icon in the top bar). It offers:

• Mode: Light, Dark, or System (follows the phone or computer setting, and switches automatically at night if the device does).
• Theme: Default (the platform's brand colours), School colours (for school users, when the school has set them), or one of eight presets — Ocean, Emerald, Royal, Crimson, Slate, Sunset, Midnight, Forest.

The choice is saved to the user's account, so it follows them to any device. Public pages (marketing site, school websites, sign-in) have a sun/moon button and remember the visitor's choice in a cookie.

On phones

Below 900px wide, dashboards switch to an app layout: the menu becomes a drawer and a tab bar along the bottom holds each role's four most-used pages (for example Home, Students, Fees and Chat for a School Admin; Home, Fees, Results and Messages for a parent) with live unread badges, plus More to open the full menu. The tab bar respects iPhone and Android safe areas, and Solvo can be installed to the home screen and opens full-screen, which is also how the future Android/iOS apps will show it. The tabs per role are set in core/Layout.php (BOTTOM_NAV); a tab only appears if that role's menu has the page.

Super Admin → Appearance

The look everyone gets by default:

• Default mode and default theme for people who haven't chosen their own.
• Sidebar style — the brand-coloured sidebar, or a light one.
• Brand colours — the primary colour (headers, sidebar, email banner; choose a darker colour for readable white text) and accent colour (buttons, highlights). Hover shades, tints and dark-mode versions are worked out automatically.
• Let people choose their own mode and theme — switch off to enforce one look for everybody.
• Reset everyone who picked their own look back to these defaults.

Logos

Upload two versions of each logo:

• Platform logos: Super Admin → Branding & payments.
• School logos: School Admin → Public website.

Solvo picks the right one automatically for each screen and each email header. If only one is uploaded, it is used everywhere.

School colours

School Admin → Brand colours sets the school's primary and accent colours, with a live preview of an email and a button. They are used:

• on the school's public website,
• in every email the school sends (header banner, buttons, links),
• as a "School colours" theme the school's staff, parents and students can switch to,
• on the school's live-chat bubble, including when it's embedded on another website.

Use platform colours removes them again.

For developers: how the stylesheets work

Solvo has exactly two stylesheets, both built from the same design tokens:

Colours are CSS custom properties. Use the semantic tokens, never raw hex values, and light/dark and every theme work automatically:

.my-panel {
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border);
}
.my-panel a { color: var(--c-accent-text); }

Key tokens: --c-bg, --c-surface, --c-surface-2, --c-surface-3, --c-border, --c-border-strong, --c-text, --c-text-2, --c-text-3, --c-primary, --c-accent, --c-accent-hover, --c-accent-text, --c-success, --c-warning, --c-danger, --c-info (each with a -text and -soft variant), --shadow-s/m/l, --radius-s/m/l, --font-sans.

1.x variable names (--navy, --orange, --muted …) still work and follow the active theme, so any custom CSS you wrote for 1.x keeps working.

The <html> element carries data-mode (light, dark, system), data-theme (solvo, a preset name, or custom) and data-chrome (brand or light). Custom colours are injected as --brand-primary and --brand-accent; everything else is derived from those two with color-mix().

Each page's <body> has a class such as pg-school-admin-students-index, so a page-specific rule can be scoped without affecting anything else.