Theme Utilities

Dynamic theming driven by CSS custom properties. Apply a theme class to an element (or <body>) to swap the color tokens used across the framework.

Interactive demo

This box is bound to a theme class. Switch between light and dark below.

const demo = document.getElementById('theme-demo');
const toggle = document.getElementById('theme-toggle');

toggle.addEventListener('click', () => {
  demo.classList.toggle('ms-theme-dark');
  demo.classList.toggle('ms-theme-light');
});

Theme classes

Class	Description
`ms-theme-light`	Light theme (default color tokens).
`ms-theme-dark`	Dark theme color tokens.
`ms-theme-system`	Reserved class — tokens are set by JS to match the system preference.
`ms-theme-toggle`	Styles a fixed, top-right theme toggle button.
`ms-theme-transition`	Smoothly transitions all properties when the theme switches.

<body class="ms-theme-dark">
  ...
</body>

Color tokens

Themes redefine the core color custom properties. Components consume them via var(--ms-color-*), so changing the theme updates every component automatically.

Token	Purpose
`--ms-color-primary`	Primary brand color
`--ms-color-on-primary`	Text/icon color on primary
`--ms-color-secondary`	Secondary accent color
`--ms-color-on-secondary`	Text/icon color on secondary
`--ms-color-surface`	Surface / card background
`--ms-color-on-surface`	Text color on surfaces
`--ms-color-outline`	Borders and dividers
`--ms-color-error`	Error / destructive color
`--ms-color-success`	Success color
`--ms-color-warning`	Warning color