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.

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:

1
#feb2b2, #fc8181, #f56565, #e53e3e, #c53030

Querying

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

1
query ArticleQuery {
2
  allArticles {
3
    theme {
4
      hex
5
      red
6
      green
7
      blue
8
      alpha
9
    }
10
  }
11
}

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

1
query ArticleQuery {
2
  allArticles {
3
    theme {
4
      hex
5
    }
6
  }
7
}

Development

The plugin is built using Vite.js. 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 in a DatoCMS project, and point it to http://localhost:3000.