Color scheme configuration

Color schemes allow you to define and manage custom color palettes in your content item templates. With this feature, you can create consistent brand colors, apply them throughout your project, and make them available in the eWizard Editor color picker.

Color schemes configuration involves the following:

• Defining scheme and scheme.color for your required theme in ./themes/your-theme/theme.js
• Reserved color categories
• Color picker options configuration

Setting up color schemes

To configure custom color schemes, add them to the ./themes/your-theme/theme.js file. For example,

// ./themes/aethercare/theme.js
module.exports.schemes = {
  scheme1: {
    color1: '#000000',
    color2: '#ffffff',
  },
  scheme2: {
    color1: '#336699',
    color2: '#CCDDEE',
  }
};

// Map scheme colors to reserved color categories
module.exports.colors = (scheme) => {
  return {
    brandColors: {
      color1: scheme.color1,
      color2: scheme.color2,
    },
  };
};

This configuration consists of two main parts:

• schemes defines named color schemes with specific color values
• colors maps colors from the active scheme to specific color categories used in the template

Color categories

The colors function can return the following reserved color categories:

Reserved color name	Description
brandColors	Default color configuration for brand identity
blockBackgroundColors	Colors available for block backgrounds
componentBackgroundColors	Colors available for component backgrounds
containerBackgroundColors	Colors available for container backgrounds
generalBackgroundColors	Colors available for content backgrounds
propColors	Colors available for component properties
textColors	Colors available for text elements

Using colors in templates

Once configured, you can apply these colors in your templates using the $theme object.

• Apply colors with style bindings:

  <div :style="{ 'background-color': $theme.blockBackgroundColors.color1 }"></div>

• Apply colors to properties:

  <div :propName="$theme.blockBackgroundColors.color1"></div>

Color picker configuration

To customize which colors appear in eWizard Editor's color picker for specific components and properties, use the following reserved color category attributes:

Reserved attribute	Description
data-background-colors	Applies to background color options
data-prop-colors	Applies to property color options
data-text-colors	Applies to text color options

Examples

• Text color configuration:

  <wiz-text text="Text colors" data-text-colors="customTextColors"></wiz-text>

• Background color configuration:

  <wiz-text text="Some text" data-background-colors="customBackgroundColors"></wiz-text>

• Property color configuration:

  <wiz-social-follow-icons data-prop-colors="customPropColors"></wiz-social-follow-icons>

The values used in these attributes (like customTextColors) must match color categories defined in your ./themes/your-theme/theme.js file.

Once your dynamic template is ready, archive it with wiz archive and upload it to eWizard. When users select your template to create content items, they will see theme-specific color schemes, based on the selected theme.