Create dynamic themes

This guide explains how to implement dynamic themes that can be selected within the eWizard Library. The implementation requires a specific directory structure and configuration files.

Prepare required plugins

To enable dynamic themes in your core template, include the following plugins in ./extensions/themes.js:

• ThemePlugin
• DynamicThemePlugin

import { ThemePlugin, DynamicThemePlugin } from 'ewizardjs';

export default function (Vue, { settings }) {
    Vue.use(ThemePlugin);
    Vue.use(DynamicThemePlugin, { settings });
}

These plugins connect the master template with theme-related features and make dynamic theme behaviors possible.

eWizard.js imports files alphabetically, making strict order important ensure conflicts between components and theme files. To maintain proper load order, name component files so that their names occur alphabetically before themes.js (e.g., globalComponents.js). This approach guarantees components load first, ensuring that themes apply correctly.

Set up the themes directory

Create a themes directory in your template's root folder with the following structure:

.
├─themes/
|  ├─aethercare/
|  |  ├─media/
|  |  |  └─images/
|  |  ├─index.js
|  |  ├─index.scss
|  |  ├─theme.js
|  |  └─variables.scss
|  ├─medipulse/
|  └─themes.json

Directories

• ./themes/: root directory containing all theme-specific subdirectories
• /themes/aethercare/, /themes/medipulse/: individual theme directories
  Lowercase alphanumeric characters only
• /aethercare/media/: container for theme-specific resources (images, fonts, etc.)

Configuration files

• /aethercare/index.js
  • Defines variables accessible with the $theme key within templates
  • Contains theme-specific configuration and functionality
• /aethercare/index.scss
  • Serves as the theme's entry point
  • Manages imports of theme components and global styles
  • Standard import structure:

  @import "./variables.scss";     // Theme variables
  @import "~/../../common/styles/theme.scss";  // Global theme styles

• /aethercare/theme.js
  • Defines theme configuration
  • Extracts and organizes color scheme information
  • Applies specified styling rules to components
  • In emails, exports a structured theme configuration for templating
• /aethercare/variables.scss
  • Declares Sass variables used throughout the theme
  • Defines theme-specific styling parameters
  • In sites, located within theme's /styles/ folder, along with the main.scss file that defines primary theme styling and /components/ folder with styles for theme-specific components
• /themes/themes.json
  • Defines the availability of the template's dynamic themes in eWizard Library

Custom file naming

To use custom names for SCSS files, specify them in ./.ewizard/settings.json:

{
  "path": {
    "themePaths": {
      "main": "entry.scss",    // Replace index.scss
      "variables": "vars.scss" // Replace variables.scss
    }
  }
}

Implement the required themes, add multiple layouts to your template, configuring individual blocks and components per layout, add theme-based icons, and more.

You can set which themes are default and current for your content item. For this, specify your required themes in your template's settings.json file located in the project root directory. Below is an example configuration:

{
  "theme": {
    "default": "aethercare",
    "current": "mediplus"
  }
}

• theme.default represents the initial theme associated with the core template. This theme appears first in the theme selection menu.
• theme.current identifies the theme currently applied, overriding the default theme.

Expose themes for eWizard Library

Once your template with dynamic themes is ready for use, run wiz archive to zip it and upload your archived template to eWizard. To expose dynamic themes for eWizard Library and set the brand dependency for them, specify your required themes in ./themes/themes.json.

The themes.json file controls theme availability and display in eWizard's ADD NEW popup:

{
  "themes": [
    {
      "id": "aethercare",
      "name": "AetherCare",
      "dependencies": {
        "brand": ["TheraVive", "Curealix"]
      }
    },
    {
      "id": "medipulse",
      "name": "MediPulse"
    }
  ]
}

Configuration parameters

• id: unique theme identifier
• name: display name shown in eWizard's interface
• dependencies (optional):
  • Controls theme visibility based on selected brand
  • When specified, limits theme availability to listed brands
  • Omit dependencies to make the theme available for all brands