Theme Colors MCP Server

An MCP (Model Context Protocol) server that provides theme color palettes through stdio for AI models to consume. This service enables AI applications to access various theme colors through simple API calls.

Introduction

The Theme Colors MCP Server offers a collection of carefully curated color schemes and palettes that AI models can dynamically access through requests. The service uses the Model Context Protocol with stdio communication, making it compatible with various AI systems. It helps ensure consistent and aesthetically pleasing visual experiences in AI-generated content.

Getting Started

Software dependencies

• Node.js (v20 or later)
• TypeScript
• Dependencies listed in package.json

Running the server

Start the MCP server with default color theme:

npx theme-colors-mcp

Use a custom colors theme file:

npx theme-colors-mcp --colors=./colors.json

MCP config:

// Windows
{
  "servers": {
    "them_colors_mcp": {
      "type": "stdio",
      "command": "cmd",
      "args": ["/c", "npx", "-y", "theme-colors-mcp", "--colors=path/to/colors.json"]
    }
  }
}
// linux or mac
{
  "servers": {
    "them_colors_mcp": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "theme-colors-mcp", "--colors=path/to/colors.json"]
    }
  }
}

Example of color.json

[
  {
    cssVarName: '--colorNeutralForeground1',
    lightColor: '#242424',
    darkColor: '#ffffff',
  },
  {
    cssVarName: '--colorNeutralForeground1Hover',
    lightColor: '#242424',
    darkColor: '#ffffff',
  },
  // ...
];

Features

• Access to various theme color schemes
• Color accessibility options
• Custom color palette generation
• TypeScript implementation for better type safety and developer experience
• Standard MCP protocol implementation using stdio

API Reference

Available Functions

| Function | Description | | ---------------- | ---------------------------------------------------------------------------- | | getThemeColors | Returns list of all available theme colors | | getCSSVars | Returns a CSS variable with the same or closest color to the specified color |

Schemas

for method getThemeColors

getThemeColors():{
    "cssVarName": string, // example: --colorNeutralForeground1
    "lightColor": string, // examples: #d6d6d6, rgba(255, 255, 255, 0.4)
    "darkColor": string, //examples: #242424, rgba(255, 255, 255, 0.5)
  }[]

for method getCSSVars

getCSSVars(colors: {color:string, isDark: boolean}[]): {
    "cssVarName": string, // example: --colorNeutralForeground1
    "lightColor": string, // examples: #d6d6d6, rgba(255, 255, 255, 0.4)
    "darkColor": string, //examples: #242424, rgba(255, 255, 255, 0.5)
  }[]