The theme to apply ("light" or "dark")
// Apply when host context changes
app.onhostcontextchanged = (ctx) => {
if (ctx.theme) {
applyDocumentTheme(ctx.theme);
}
};
// Apply initial theme after connecting
app.connect().then(() => {
const ctx = app.getHostContext();
if (ctx?.theme) {
applyDocumentTheme(ctx.theme);
}
});
[data-theme="dark"] {
--bg-color: #1a1a1a;
}
[data-theme="light"] {
--bg-color: #ffffff;
}
getDocumentTheme to read the current themeMcpUiTheme for the theme type
Apply a theme to the document root element.
Sets the
data-themeattribute and CSScolor-schemeproperty ondocument.documentElement. This enables CSS selectors like[data-theme="dark"]and ensures native elements (scrollbars, form controls) respect the theme.