🎈 Welcome to the Marketplace — Explore and discover the ecosystem around DatoCMS, and share your own work with the community!
Theme selector
A plugin for DatoCMS that allows you select a color from a predefined list.
This is a Community Plugin! Learn how create your own plugin, or copy and remix existing ones in our documentation

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.

Example

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.

Example

Preview
Theme selector
A plugin for DatoCMS that allows you select a color fro…
Publisher
Author gravatarthebuilder
Plugin type
Field editor
Compatible with fields
Color
First released
May 24th, 2021
Current version
1.0.5
Installs count
Last update