Plugin Theming

If your plugin should change appearance based on palette colors, you should dynamically define those classnames inside the theme function, which creates a new CSS object with the help of JSS Library.

Example#

Hashtag css file:

.hashtag {
  color: $accent-color;
  text-decoration: none;
}

Hashtag theme function that overrides the relevant classname:

export const THEME = (colors, utils) => ({
  hashtag: {
    color: colors.actionColor,
  },
});

Here's a Cheat Sheet to get you started with the JSS Format.

Arguments#

	description
colors	contains: `actionColor`, `bgColor`, `textColor` and `secondaryColor` of a Wix Palette (colors in HEX)
utils	contains: `hexToRgbA(hexColor, opacity)`, `adaptForeground(hexColor)` and `isBright(hexColor)` functions. Also contains `fallbackColor` and `fallbackColorBright` fields.

For complex CSS implementations (:hover / nested classnames...). You can also take example from here, or have a look at other wrapper-ready plugins / Cheat Sheet.