---
url: /api/plugins/pantoken/custom-theme-colors/src.md
---
[pantoken-root](../../../../index.md) / custom-theme-colors

# custom-theme-colors

Beta

`@pantoken/plugin-custom-theme-colors` — custom theme color rules and hero/brand variables.

Emits scoped `:root[data-pantoken-color="…"]` and `:root[data-pantoken-theme="canvasHighContrast"][data-pantoken-color="…"]`
rules for all 13 color namespaces (`navy`, `blue`, `green`, `red`, `orange`, `grey`, `plum`, `violet`, `stone`, `sky`, `honey`, `sea`, `aurora`).

## Example

```ts
import { toCss } from "@pantoken/css";
import { byTheme } from "@pantoken/tokens";
import { customThemeColors } from "@pantoken/plugin-custom-theme-colors";

const css = toCss(byTheme("rebrand"), { plugins: [customThemeColors()] });
```

## Interfaces

* [ReferenceCurve](interfaces/ReferenceCurve.md)
* [CustomColorScale](interfaces/CustomColorScale.md)
* [CustomThemeColorsOptions](interfaces/CustomThemeColorsOptions.md)
* [CustomThemeColorsCssOptions](interfaces/CustomThemeColorsCssOptions.md)
* [CustomColorCssOptions](interfaces/CustomColorCssOptions.md)

## Type Aliases

* [PantokenColorNamespace](type-aliases/PantokenColorNamespace.md)

## Variables

* [COLOR_KEYS](variables/COLOR_KEYS.md)
* [CUSTOM_COLOR_KEY](variables/CUSTOM_COLOR_KEY.md)

## Functions

* [parseHexColor](functions/parseHexColor.md)
* [isHexColor](functions/isHexColor.md)
* [deriveScale](functions/deriveScale.md)
* [customColorReferenceCurve](functions/customColorReferenceCurve.md)
* [deriveCustomColorScale](functions/deriveCustomColorScale.md)
* [customColorCss](functions/customColorCss.md)
* [customColorRemapCss](functions/customColorRemapCss.md)
* [customThemeColorsCss](functions/customThemeColorsCss.md)
* [customThemeColors](functions/customThemeColors.md)

## References

### default

Renames and re-exports [customThemeColors](functions/customThemeColors.md)