Skip to main content

​
get_tokens_by_mode

Retrieves all design tokens from a specific mode within a tokenset, with the ability to find modes by name rather than ID. This is especially useful when you know the mode name (like “Light”, “Dark”) but don’t have the mode ID.

​
Tool Schema

{
  "name": "get_tokens_by_mode",
  "description": "Get all tokens from a specific mode in a tokenset",
  "inputSchema": {
    "type": "object",
    "properties": {
      "tokenset_id": {
        "type": "string",
        "description": "The ID of the tokenset"
      },
      "mode_name": {
        "type": "string",
        "description": "Optional mode name to search for (e.g., 'Light', 'Dark'). If not provided, uses the default mode"
      }
    },
    "required": ["tokenset_id"]
  }
}

​
Parameters

ParameterTypeRequiredDescription
tokenset_idstringYesThe ID of the tokenset to get tokens from
mode_namestringNoMode name to search for (case-insensitive). If not provided, uses the default mode

​
Response

{
  "mode": {
    "id": "550e8400-e29b-41d4-a716-446655440020",
    "name": "Light",
    "is_default": true
  },
  "tokens": [
    {
      "id": "550e8400-e29b-41d4-a716-446655440030",
      "name": "color.primary",
      "type": "color",
      "value": "#007AFF",
      "description": "Primary brand color",
      "alias_to": null
    }
  ],
  "total": 1
}

​
Example Usage in Claude

​
Get Default Mode Tokens

You: Show me all tokens in the default mode of my Colors tokenset

Claude: I'll get the tokens from the default mode (Light) of your Colors tokenset.

**Light Mode (Default)**
- **color.primary**: #007AFF (Primary brand color)
- **color.secondary**: #5856D6 (Secondary brand color)
- **color.accent**: #FF9500 (Accent color)

Total: 3 tokens

​
Get Specific Mode by Name

You: Get all tokens from the Dark mode in my Colors tokenset

Claude: I'll find and get tokens from the Dark mode.

**Dark Mode**
- **color.primary**: #0A84FF (Dark mode primary)
- **color.secondary**: #5E5CE6 (Dark mode secondary)
- **color.background**: #000000 (Dark background)

Total: 3 tokens

​
Compare Light and Dark

You: Compare the color tokens between Light and Dark modes

Claude: Let me get tokens from both modes for comparison.

**Light Mode:**
- color.primary: #007AFF
- color.secondary: #5856D6
- color.background: #FFFFFF

**Dark Mode:**
- color.primary: #0A84FF (darker variant)
- color.secondary: #5E5CE6 (darker variant)
- color.background: #000000

The dark mode uses darker variants for better contrast.

​
Handle Missing Mode

You: Get tokens from the "Experimental" mode

Claude: I tried to find a mode named "Experimental" but it doesn't exist.

Available modes in this tokenset:
- Light (Default)
- Dark

Would you like me to get tokens from one of these modes instead?

​
Common Use Cases

​
1. Theme Comparison

You: Show me how colors differ between Light and Dark themes

​
2. Mode-Specific Values

You: What are the token values in the Dark mode?

​
3. Default Mode Tokens

You: Give me all the default tokens for this tokenset

​
4. Named Mode Access

You: Get the High Contrast mode tokens

​
Mode Name Matching

  • Case-insensitive: “Light”, “light”, “LIGHT” all work
  • Partial matching: Will find the first mode containing the search term
  • Default fallback: If no mode_name provided, uses the default mode
  • Error handling: Shows available modes if the requested mode doesn’t exist

​
Notes

  • This tool is perfect when you know mode names but not IDs
  • Useful for theme comparisons and mode-specific token access
  • Returns resolved values (aliases are resolved to their actual values)
  • Includes token descriptions and types for context

​
Tips

  1. Mode Names: Common names are “Light”, “Dark”, “High Contrast”
  2. Default Mode: Omit mode_name to get the default mode tokens
  3. Case Insensitive: “dark”, “Dark”, “DARK” all work the same
  4. Comparison: Great for seeing how tokens change across themes

​
See Also