configure_theme
Customize UI theme settings including colors, mode, typography, and border radius for its-just-ui React components.
Instructions
Configure theme settings including colors, mode, and typography
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| mode | No | ||
| colors | No | ||
| borderRadius | No | ||
| fontFamily | No |
Implementation Reference
- src/tools/themeManager.ts:15-57 (handler)Main handler function configureTheme that generates and returns theme configuration code based on the input config object.
export const themeTools = { configureTheme(config: ThemeConfig): string { const { mode, colors, borderRadius, fontFamily } = config; let themeCode = `import { ThemeProvider } from 'its-just-ui'; import 'its-just-ui/styles.css'; const customTheme = {`; if (colors) { themeCode += ` colors: {${Object.entries(colors) .map( ([key, value]) => ` ${key}: '${value}'`, ) .join(",")} },`; } if (borderRadius) { themeCode += ` borderRadius: '${borderRadius}',`; } if (fontFamily) { themeCode += ` fontFamily: '${fontFamily}',`; } themeCode += ` }; export default function App() { return ( <ThemeProvider ${mode ? `mode="${mode}"` : ""} theme={customTheme}> {/* Your app content */} </ThemeProvider> ); }`; return themeCode; }, - src/index.ts:75-89 (schema)Zod schema defining the input structure for the configure_theme tool, matching the ThemeConfig interface.
const ConfigureThemeSchema = z.object({ mode: z.enum(["light", "dark", "system"]).optional(), colors: z .object({ primary: z.string().optional(), secondary: z.string().optional(), success: z.string().optional(), warning: z.string().optional(), error: z.string().optional(), info: z.string().optional(), }) .optional(), borderRadius: z.string().optional(), fontFamily: z.string().optional(), }); - src/index.ts:209-231 (registration)Tool registration in the list_tools response, defining name, description, and inputSchema.
name: "configure_theme", description: "Configure theme settings including colors, mode, and typography", inputSchema: { type: "object", properties: { mode: { type: "string", enum: ["light", "dark", "system"] }, colors: { type: "object", properties: { primary: { type: "string" }, secondary: { type: "string" }, success: { type: "string" }, warning: { type: "string" }, error: { type: "string" }, info: { type: "string" }, }, }, borderRadius: { type: "string" }, fontFamily: { type: "string" }, }, }, }, - src/index.ts:401-411 (handler)MCP call_tool handler that parses arguments using the schema and delegates to themeTools.configureTheme.
case "configure_theme": { const config = ConfigureThemeSchema.parse(args); const themeCode = themeTools.configureTheme(config); return { content: [ { type: "text", text: themeCode, }, ], }; - src/tools/themeManager.ts:1-13 (schema)TypeScript interface ThemeConfig used in the handler function signature, matching the Zod schema.
export interface ThemeConfig { mode?: "light" | "dark" | "system"; colors?: { primary?: string; secondary?: string; success?: string; warning?: string; error?: string; info?: string; }; borderRadius?: string; fontFamily?: string; }