configure_theme
Customize theme settings for its-just-ui React components by adjusting colors, mode, typography, and border radius to align with design requirements.
Instructions
Configure theme settings including colors, mode, and typography
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| borderRadius | No | ||
| colors | No | ||
| fontFamily | No | ||
| mode | No |
Implementation Reference
- src/tools/themeManager.ts:16-57 (handler)The core handler function that generates complete theme configuration code for its-just-ui, including imports, custom theme object, and App component wrapped in ThemeProvider.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 for validating the input arguments to 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:208-231 (registration)Tool registration in the list_tools response, defining name, description, and input schema for configure_theme.{ 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-412 (registration)Dispatcher case in the main tool call handler that parses input with 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 defining the structure of the theme configuration input, used by the handler function.export interface ThemeConfig { mode?: "light" | "dark" | "system"; colors?: { primary?: string; secondary?: string; success?: string; warning?: string; error?: string; info?: string; }; borderRadius?: string; fontFamily?: string; }