Main <Features>
Started <Any>
AI <Assistant>
This bot is designed to answer questions about Metro UI and Latte. It bases its answers on the current version of the documentation. To help the bot understand the context of your question, use the keywords Metro UI and Latte.
For example:
I need help with Metro UI. Tell me about the audio-button component.
The bot and documentation are in alpha testing, so please excuse any inaccuracies and inconsistencies.
The bot runs on the DeepSeek-Chat3:free
model and uses MCP Context7 to search through the documentation.
Build <With>
Lib <Struct>
Metro UI consists of five parts:
CSS <Vars>
Variables names start with the component name and are followed by the name of the property.
:root {
--body-background: #ffffff;
--body-color: #191919;
--border-color: #e8e8e8;
--link-color: #5a87cb;
--link-color-hover: #0056B3FF;
}
To switch to dark mode you must add class .dark-side to html tag. Also you can use special components that switch mode.
.dark-side {
--body-background: #1e1f22;
--body-color: #dbdfe7;
--border-color: #4a4d51;
--link-color: #5a87cb;
--link-color-hover: #0056B3FF;
}
Stack <Libs>
Code <Test>
🥛 Latte
It supports testing for: JavaScript, TypeScript, HTML elements (DOM enabled), React Components, and entire web pages with built-in headless browser.

Metro <Icons>
