A landing page template can have more than one theme, like emails with dynamic themes. With the eWizard.js builder you can generate the project build with the current theme ignoring other themes. This feature removes unused themes from the resulting build. As a result, this reduces the build size and improves the website performance in the browser.
TIP: This feature works only in the production build when you export your landing page to one of the target systems in eWizard. When you run the local dev build, the builder uses the current theme and adds all the themes from the themes.json file to the resulting build.
The current theme is the current field in the ./settings.json file.
// ./settings.json{
"theme": {
"current": "Unbranded",
"default": "Theme1"
}
}If there's no current theme, the builder uses the default one.
requireCurrentTheme API
To use the current theme in the resulting build, add the requireCurrentTheme API to your project.
import { requireCurrentTheme } from 'ewizardjs';For example, you can register the requireCurrentTheme API in the ./extensions/globalComponents.js file to use the current Unbranded theme:
// ./extensions/globalComponents.jsimport { requireCurrentTheme } from 'ewizardjs';const { default: defaultTheme } = requireCurrentTheme('index.js');The index.js file is the default value. The requireCurrentTheme function accepts the path to the current theme file, which is ./themes/Unbranded/index.js in this case.
You can omit the current theme filename if you use the default index.js file.
const { default: defaultTheme } = requireCurrentTheme();When you use the requireCurrentTheme API, the site builder ignores other themes in the themes/ directory and in the themes.json file. For example, Theme1 isn't included in the resulting build:
// ./themes/themes.json{
"themes": [
{
"id": "Unbranded",
"name": "Unbranded"
},
{
"id": "Theme1",
"name": "Theme 1"
}
]
}