sfnext_configure_theme
Guides theming changes (colors, fonts, visual styling) for Storefront Next and validates color combinations for WCAG accessibility.
Note: 🚧 This MCP tool is for Storefront Next. Storefront Next is part of a closed pilot and isn't available for general use.
Overview
The sfnext_configure_theme tool provides a structured workflow for applying theming to Storefront Next sites:
- Guidelines - Layout preservation rules, specification compliance, and accessibility requirements
- Guided Questions - Collects user preferences (colors, fonts, mappings) one at a time
- WCAG Validation - Automatically validates color contrast when
colorMappingis provided
The tool guides you through a structured workflow: answer questions about your design preferences → validate colors for accessibility → review findings → apply theme changes.
Prerequisites
- Storefront Next project
Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
fileKeys | string[] | No | File keys to add to the default set. Custom keys are merged with defaults: theming-questions, theming-validation, theming-accessibility. |
conversationContext | object | No | Context from previous rounds. Omit to list available files. See Conversation Context for details. |
Conversation Context
When using the tool across multiple turns, provide conversationContext with the following structure:
| Field | Type | Description |
|---|---|---|
currentStep | "updating-information" | "validation" | Current step in the workflow |
collectedAnswers | object | Previously collected answers. Include colorMapping to trigger automatic WCAG validation. |
questionsAsked | string[] | List of question IDs already asked |
collectedAnswers can include:
| Field | Type | Description |
|---|---|---|
colors | object[] | Extracted colors with hex and optional type |
fonts | object[] | Extracted fonts with name and optional type |
colorMapping | object | Maps color keys to hex values (for example, lightText, lightBackground, buttonText, buttonBackground). Providing this triggers automatic WCAG contrast validation. |
Workflow
The tool guides you through a structured workflow:
- Information Gathering - Answer questions about your brand colors, fonts, and design preferences
- Validation - Automatic WCAG accessibility validation of color combinations
- Implementation - Apply theme changes to your
app.cssfile
Usage Examples
Use natural language prompts to interact with the tool:
Start theming:
I want to apply my brand colors to my Storefront Next site. Use the MCP tool to help me.Provide colors upfront:
Use these colors: #635BFF (accent), #0A2540 (dark), #F6F9FC (brand), #FFFFFF (light). Use the MCP tool to guide me through theming.Specify fonts:
I want to use Inter for body text and Playfair Display for headings. Use the MCP tool to help me theme my site.Validate colors for accessibility:
I have a color scheme ready. Use the MCP tool to validate my colors for accessibility before I implement.Change existing theme:
I want to change my site theme. Use the MCP tool to walk me through the process.Output
The tool returns guidance and questions, or validation results when color mappings are provided. Validation includes contrast ratios, WCAG compliance status (AA/AAA), and recommendations for accessibility improvements.
Related Tools
- Part of the STOREFRONTNEXT toolset
- Auto-enabled for Storefront Next projects
See Also
- STOREFRONTNEXT Toolset - Overview of Storefront Next development tools
- Storefront Next Guide - Storefront Next development guide
- Configuration - Configure project directory