Check the plugin documentation for setup and configuration guidance:
https://jedistudios.io/plugins/color-jedi

Check out the plugin demo editor:

https://bubble.io/page?id=color-jedi-demo&tab=Design&name=plugin-demo&type=page

Install the plugin in your Bubble app. No element needs to be placed on the page.

Once installed, your Bubble theme colors are available globally as CSS variables using the `--color-jedi-` prefix.

Example:

```css
.my-button {
 background-color: var(--color-jedi-primary);
 color: var(--color-jedi-primary-contrast);
}
```

```css
.my-card {
 background-color: var(--color-jedi-surface);
 border-color: var(--color-jedi-gray-30);
 color: var(--color-jedi-text);
}
```

Custom colors from your Bubble color palette are also available using their color names converted to CSS-friendly format.

Example:

```css
.highlight {
 background-color: var(--color-jedi-hot-pink);
}
```

Use these variables anywhere custom CSS is supported, including HTML elements, reusable components, page-level CSS, and plugin styling.