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:

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

Querying

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

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.

query ArticleQuery {
  allArticles {
    theme {
      hex
    }
  }
}

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.

​​​​‌‍​‍​‍‌‍‌​‍‌‍‍‌‌‍‌‌‍‍‌‌‍‍​‍​‍​‍‍​‍​‍‌‍‌​‌‍​‌‌‌​‌‍‌‍​‌‍‌‌​​‍‍‌‍​‌‍‌‍‌​‍​‍​‍​​‍​‍‌‍‍​‌​‍‌‍‌‌‌‍‌‍​‍​‍​‍‍​‍​‍‌‍‍​‌‌​‌‌​‌​​‌​​‍‍​‍​‍‌‍​‌‍‌‌​​‍‍‌‍‌​‌‍​‌‌‌​‌‍‌‍​‌‍‌‌​​‍‍‌‍​‌‍‌‍‌​‍‌‍‌‌‌‍‌​‌‍‍‌‌‌​‌‍‌​‍​‍‌‍‍‌‌‌​‌‍‌‌‌‍‌‌‌‌‌​‌‍‌‌​​‌‍‌‌‌​​‍​‍​​​‌​​​​‍‌​​‌​​​‍‌‍‍‌‌‌​‌‍‌‌‌‍‌‌​​‍​‌‍​‌​​‌​​​​‌​​​​​‍​​‌‍​‍‌‍‌‌‌‍‌​‌‍‍‌‌‌​​‍​‌‍‌‍‌‍‍‌‌‍‌‌‌‍​‌‍‌​‌‌​​‌‍​‌‌‌​‌‍‍​​‌‌​‍‌‍‌‌‌‍​‌‌‍‌​‌‍‌‌‍‌‌​‍​‍‌‌