This school offers four accent colours, and each one changes far more than buttons. The page background, the hover tints and the soft glows all shift to match. There's no list of forty colours behind it: just one accent, mixed.

Two values per accent

Each accent has a light-mode and a dark-mode version, because a colour that reads well on white is usually too dark on near-black:

:root,
:root[data-ph-accent="purple"] { --ph-a-lt: #6231E8; --ph-a-dk: #A98BFF; }
:root[data-ph-accent="red"]    { --ph-a-lt: #CE2E2E; --ph-a-dk: #FF8577; }
:root[data-ph-accent="green"]  { --ph-a-lt: #1F7A4D; --ph-a-dk: #4FD39A; }
:root[data-ph-accent="blue"]   { --ph-a-lt: #1155CC; --ph-a-dk: #6FB0FF; }

Then the theme picks the right one:

:root                        { --ph-accent: var(--ph-a-lt); }
:root[data-ph-theme="dark"]  { --ph-accent: var(--ph-a-dk); }

Mixing the rest

CSS's color-mix() blends two colours in any proportion. A little accent mixed into a neutral gives a background that feels related to the accent without shouting:

:root {
  --ph-paper: color-mix(in srgb, var(--ph-accent)  7%, #F2F0F5);
  --ph-track: color-mix(in srgb, var(--ph-accent) 15%, #E3E0EA);
  --ph-hover: color-mix(in srgb, var(--ph-accent)  9%, transparent);
  --ph-glow:  color-mix(in srgb, var(--ph-accent) 18%, transparent);
}

• Paper: 7% accent in a pale grey, for the page background.
• Track: a little more, for things like switch tracks.
• Hover: accent mixed with transparent, so it tints whatever it sits on.
• Glow: a soft haze for background decoration.

Change the accent and every one of these follows, because they're worked out from it, not typed in.

A fallback, just in case

Every current browser understands color-mix(). For the rare one that doesn't, set a plain colour first. A browser that doesn't understand the second line ignores it and keeps the first:

--ph-paper: #F2F0F5;
--ph-paper: color-mix(in srgb, var(--ph-accent) 7%, #F2F0F5);