> ## Documentation Index
> Fetch the complete documentation index at: https://dtexplorer.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Multiple Sources

> Load tokens from multiple files or remote URLs simultaneously — useful for multi-package design systems, theming, and component library setups.

## Overview

Design Tokens Explorer supports loading any number of token sources in parallel. Each source appears as a separate panel in the sidebar, switchable via a dropdown. This is useful when your design system is split across multiple packages, themes, or token categories.

## Basic multi-source setup

```json settings.json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
"designTokensExplorer.sources": [
  {
    "name": "Brand Tokens",
    "path": "./tokens/brand.css",
    "groups": [
      { "name": "color", "type": "color" },
      { "name": "radius", "type": "radius" }
    ]
  },
  {
    "name": "Semantic Tokens",
    "path": "./tokens/semantic.css",
    "groups": [
      { "name": "color", "type": "color" },
      { "name": "space", "type": "size" },
      { "name": "shadow", "type": "shadow" }
    ]
  }
]
```

In the sidebar, a dropdown at the top of the panel lets you switch between sources. Only one source is shown at a time. Searching filters tokens within the active source.

## Common use cases

### Design system packages

When consuming a published design system alongside local overrides:

```json settings.json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
"designTokensExplorer.sources": [
  {
    "name": "Acme Design System",
    "path": "node_modules/@acme/tokens/dist/tokens.css",
    "groups": [
      { "name": "color", "type": "color" },
      { "name": "space", "type": "size" },
      { "name": "text", "type": "font-size" }
    ]
  },
  {
    "name": "Local Overrides",
    "path": "./src/tokens/overrides.css",
    "groups": [
      { "name": "color", "type": "color" }
    ]
  }
]
```

### Theming (light / dark)

When you maintain separate token files for themes:

```json settings.json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
"designTokensExplorer.sources": [
  {
    "name": "Theme: Light",
    "path": "./tokens/theme-light.css",
    "groups": [
      { "name": "color", "type": "color" },
      { "name": "surface", "type": "color" }
    ]
  },
  {
    "name": "Theme: Dark",
    "path": "./tokens/theme-dark.css",
    "groups": [
      { "name": "color", "type": "color" },
      { "name": "surface", "type": "color" }
    ]
  }
]
```

### Remote + local

Combining tokens from a remote design tool export with local additions:

```json settings.json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
"designTokensExplorer.sources": [
  {
    "name": "Figma Export",
    "path": "https://tokens.example.com/figma-tokens.json",
    "groups": [
      { "name": "color", "type": "color" },
      { "name": "spacing", "type": "size" }
    ]
  },
  {
    "name": "Component Tokens",
    "path": "./src/tokens/components.css",
    "groups": [
      { "name": "button", "type": "color" },
      { "name": "input", "type": "color" }
    ]
  }
]
```

### Monorepo

In a monorepo with tokens in multiple packages:

```json settings.json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
"designTokensExplorer.sources": [
  {
    "name": "Core",
    "path": "./packages/tokens-core/dist/tokens.css",
    "groups": [
      { "name": "color", "type": "color" },
      { "name": "space", "type": "size" },
      { "name": "radius", "type": "radius" }
    ]
  },
  {
    "name": "Brand A",
    "path": "./packages/tokens-brand-a/dist/tokens.css",
    "groups": [
      { "name": "color", "type": "color" }
    ]
  },
  {
    "name": "Brand B",
    "path": "./packages/tokens-brand-b/dist/tokens.css",
    "groups": [
      { "name": "color", "type": "color" }
    ]
  }
]
```

## Sharing settings across a team

Token source configuration is typically kept in **workspace** settings (`.vscode/settings.json`) so it is shared with the team:

```json .vscode/settings.json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
{
  "designTokensExplorer.sources": [
    {
      "name": "Design System",
      "path": "./tokens/tokens.css",
      "groups": [
        { "name": "color", "type": "color" },
        { "name": "space", "type": "size" }
      ]
    }
  ]
}
```

Commit this file to version control so that every team member gets the same token sources without manual setup.

## Reload behavior

* **Local sources** are watched for file changes. When any source file is saved, only that source is reloaded — other sources remain cached.
* **Remote sources** are fetched once on activation. To re-fetch, run **Design Tokens: Refresh Sources**.
* When any source changes (file or config), the [adoption audit](/docs/features/adoption-audit) re-runs in the background automatically.

## Search across sources

The search box in the sidebar filters tokens within the currently selected source. To search across all sources, use the Command Palette:

```
Design Tokens: Search
```

This opens a QuickPick that searches all loaded tokens from all sources simultaneously.