https://github.com/thebuilder/datocms-plugin-theme-selector
A plugin for DatoCMS that allows you select a color from a predefined list
https://github.com/thebuilder/datocms-plugin-theme-selector
Last synced: over 1 year ago
JSON representation
A plugin for DatoCMS that allows you select a color from a predefined list
- Host: GitHub
- URL: https://github.com/thebuilder/datocms-plugin-theme-selector
- Owner: thebuilder
- License: mit
- Created: 2021-05-24T11:25:15.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2022-04-16T15:48:27.000Z (about 4 years ago)
- Last Synced: 2024-10-07T04:43:35.532Z (over 1 year ago)
- Language: TypeScript
- Size: 433 KB
- Stars: 3
- Watchers: 2
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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.
```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) in a DatoCMS
project, and point it to `http://localhost:3000`.
