🎈 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

Theme selector
A plugin for DatoCMS that allows you select a color fro…
Publisher
Author gravatarthebuilder
Package
Visit NPM
Current version
2.2.0
Installs count
Last update
We use cookies to enhance the user experience. Do you consent their use in accordance with our cookie policy?