generate_color_scheme
Generate CSS variables for color schemes in Webasyst apps by defining primary, secondary, accent, text, and background colors.
Instructions
Сгенерировать CSS-переменные цветовой схемы
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| app_id | Yes | ID приложения | |
| scheme_name | No | Название схемы | custom |
| primary_color | No | Основной цвет (или CSS-переменная) | |
| secondary_color | No | Вторичный цвет | |
| accent_color | No | Акцентный цвет | |
| text_color | No | Цвет текста | |
| background_color | No | Цвет фона |
Implementation Reference
- webasyst-mcp.js:1492-1543 (handler)The handler function for the 'generate_color_scheme' tool. It creates a CSS file with custom CSS variables for colors in the specified Webasyst app's css directory.async function generateColorSchemeTool({ app_id, scheme_name = 'custom', primary_color, secondary_color, accent_color, text_color, background_color }) { const rootPath = await findWebasystRoot(); const appPath = path.join(rootPath, 'wa-apps', app_id); if (!(await fileExists(appPath))) throw new Error(`Приложение ${app_id} не найдено`); const cssDir = path.join(appPath, 'css'); await ensureDir(cssDir); const cssContent = `/** * ${scheme_name} Color Scheme for ${app_id} * Generated by Webasyst MCP */ :root { /* Primary colors */ --${app_id}-primary: ${primary_color || 'var(--accent-color)'}; --${app_id}-secondary: ${secondary_color || 'var(--blue)'}; --${app_id}-accent: ${accent_color || 'var(--accent-color)'}; /* Text colors */ --${app_id}-text: ${text_color || 'var(--text-color)'}; --${app_id}-text-light: var(--text-color-hint); --${app_id}-text-strong: var(--text-color-strong); /* Background colors */ --${app_id}-bg: ${background_color || 'var(--background-color)'}; --${app_id}-bg-blank: var(--background-color-blank); --${app_id}-bg-input: var(--background-color-input); /* Borders */ --${app_id}-border: var(--border-color); --${app_id}-border-input: var(--border-color-input); /* Shadows */ --${app_id}-shadow: var(--box-shadow); --${app_id}-shadow-large: var(--box-shadow-large); } /* Dark mode support */ @media (prefers-color-scheme: dark) { :root { /* Override colors for dark mode if needed */ } } `; const filePath = path.join(cssDir, `${scheme_name}-theme.css`); await fs.writeFile(filePath, cssContent); return { content: [{ type: 'text', text: `Цветовая схема "${scheme_name}" создана: ${filePath}\n\nПодключите в шаблоне:\n<link rel="stylesheet" href="{$wa_app_static_url}css/${scheme_name}-theme.css">` }] }; }
- webasyst-mcp.js:1750-1751 (schema)The input schema definition for the 'generate_color_scheme' tool, specifying parameters like app_id (required), scheme_name, and various color values.{ name: 'generate_color_scheme', description: 'Сгенерировать CSS-переменные цветовой схемы', inputSchema: { type: 'object', properties: { app_id: { type: 'string', description: 'ID приложения' }, scheme_name: { type: 'string', default: 'custom', description: 'Название схемы' }, primary_color: { type: 'string', description: 'Основной цвет (или CSS-переменная)' }, secondary_color: { type: 'string', description: 'Вторичный цвет' }, accent_color: { type: 'string', description: 'Акцентный цвет' }, text_color: { type: 'string', description: 'Цвет текста' }, background_color: { type: 'string', description: 'Цвет фона' } }, required: ['app_id'] } }, { name: 'create_responsive_layout', description: 'Создать адаптивные лейауты (Desktop + Mobile) с isMobile()', inputSchema: { type: 'object', properties: { app_id: { type: 'string', description: 'ID приложения' }, with_sidebar: { type: 'boolean', default: true, description: 'Включить сайдбар в Desktop' }, with_bottombar: { type: 'boolean', default: true, description: 'Включить bottombar в Mobile' } }, required: ['app_id'] } },
- webasyst-mcp.js:1812-1812 (registration)Registration of the tool handler in the CallToolRequestSchema switch statement, mapping the tool name to its handler function.case 'generate_color_scheme': return await generateColorSchemeTool(args);
- webasyst-mcp.js:1750-1752 (registration)Tool registration in the ListToolsRequestSchema response, listing the tool with its name, description, and schema.{ name: 'generate_color_scheme', description: 'Сгенерировать CSS-переменные цветовой схемы', inputSchema: { type: 'object', properties: { app_id: { type: 'string', description: 'ID приложения' }, scheme_name: { type: 'string', default: 'custom', description: 'Название схемы' }, primary_color: { type: 'string', description: 'Основной цвет (или CSS-переменная)' }, secondary_color: { type: 'string', description: 'Вторичный цвет' }, accent_color: { type: 'string', description: 'Акцентный цвет' }, text_color: { type: 'string', description: 'Цвет текста' }, background_color: { type: 'string', description: 'Цвет фона' } }, required: ['app_id'] } }, { name: 'create_responsive_layout', description: 'Создать адаптивные лейауты (Desktop + Mobile) с isMobile()', inputSchema: { type: 'object', properties: { app_id: { type: 'string', description: 'ID приложения' }, with_sidebar: { type: 'boolean', default: true, description: 'Включить сайдбар в Desktop' }, with_bottombar: { type: 'boolean', default: true, description: 'Включить bottombar в Mobile' } }, required: ['app_id'] } }, ]