### A plugin for DatoCMS that allows you select a color from a predefined list. Version with fixes.

(Image content)

[

**This is a Community Plugin!** Learn how create your own plugin, or copy and remix existing ones in our documentation

](https://www.datocms.com/docs/plugin-sdk/introduction.md)

## DatoCMS Theme Selector

A plugin for DatoCMS that allows you select a color from a predefined list. The normal `color` field opens a color picker, but doesn't enforce a fixed set of colors.

(Image content)

## Configuration

Make sure you apply the plugin on a color field, and fill out the preset color list. You can define a default set of colors globally, and override them on an instance. Use the global option if you have default set of values you should be able to select from.

A valid list of colors could look like this:

```plaintext
#feb2b2, #fc8181, #f56565, #e53e3e, #c53030
```

## Querying

The plugin is using the `color` field, which means you have access to a color object.

```graphql
query ArticleQuery {  allArticles {    theme {      hex      red      green      blue      alpha    }  }}
```

If you just need the `hex` value, like you added in the settings, you can limit your query lookup for that value.

```graphql
query ArticleQuery {  allArticles {    theme {      hex    }  }}
```

## Development

The plugin is built using [Vite.js](https://vitejs.dev/). This enables a fast development workflow, where you see the changes as soon as you save a file. For it to work, it needs to be rendered inside the DatoCMS interface.

So when testing the plugin locally, you should [create a new plugin](https://www.datocms.com/docs/building-plugins/creating-a-new-plugin.md) in a DatoCMS project, and point it to `http://localhost:3000`.

(Image content)