diff --git a/aidbox-forms-renderer-angular-controlled/index.html b/aidbox-forms-renderer-angular-controlled/index.html
index bdef536..da20747 100644
--- a/aidbox-forms-renderer-angular-controlled/index.html
+++ b/aidbox-forms-renderer-angular-controlled/index.html
@@ -113,7 +113,7 @@
Questionnaires
questionnaire="{{ questionnaire }}"
ng-on-change="handleChange($event)"
ng-on-ready="handleReady($event)"
- theme='{{ theme }}'
+ config='{{ config }}'
>
@@ -9109,7 +9109,13 @@ Questionnaires
};
$scope.changeTheme = function() {
- $scope.theme = JSON.stringify(theme);
+ $scope.config = JSON.stringify({ theme });
+ const [element] = document.getElementsByTagName('aidbox-form-renderer');
+ const parent = element.parentNode;
+ parent.removeChild(element);
+ setTimeout(() => {
+ parent.appendChild(element);
+ }, 0);
};
$scope.questionnaire = JSON.stringify($scope.questionnaires[$scope.currentQuestionnaireIndex], null, 2);
diff --git a/aidbox-forms-renderer-angular/index.html b/aidbox-forms-renderer-angular/index.html
index 42e29f0..0c21b33 100644
--- a/aidbox-forms-renderer-angular/index.html
+++ b/aidbox-forms-renderer-angular/index.html
@@ -112,7 +112,7 @@ Questionnaires
base-url="https://form-builder.aidbox.app"
style="width: 100%; border: none; align-self: stretch; display: flex"
questionnaire-id="{{ id }}"
- theme='{{ theme }}'
+ config='{{ config }}'
>
@@ -138,7 +138,7 @@ Questionnaires
];
$scope.id = $scope.questionnaires[0].id;
- $scope.theme = '';
+ $scope.config = '';
$scope.sidebarOpen = false;
$scope.selectQuestionnaire = function (id) {
@@ -161,7 +161,13 @@ Questionnaires
};
$scope.changeTheme = function() {
- $scope.theme = JSON.stringify(theme);
+ $scope.config = JSON.stringify({ theme });
+ const [element] = document.getElementsByTagName('aidbox-form-renderer');
+ const parent = element.parentNode;
+ parent.removeChild(element);
+ setTimeout(() => {
+ parent.appendChild(element);
+ }, 0);
};
}]);
diff --git a/aidbox-forms-renderer-react-controlled/index.html b/aidbox-forms-renderer-react-controlled/index.html
index bec4208..dea4dbd 100644
--- a/aidbox-forms-renderer-react-controlled/index.html
+++ b/aidbox-forms-renderer-react-controlled/index.html
@@ -8988,7 +8988,7 @@
const questionnaires = window.questionnaires;
const [sidebarOpen, setSidebarOpen] = React.useState(false);
- const [theme, setTheme] = React.useState();
+ const [config, setConfig] = React.useState();
const formRendererRef = React.useRef();
@@ -9109,15 +9109,17 @@ Questionnaires
setTheme(JSON.stringify({
- "base-font-size": "12px", // Base font size for the theme
- background: {
- "toolbar-color": "#2c3e50", // Background color of the toolbar
- },
- button: {
- "accent-color": "#27ae60", // General accent color for buttons
- },
- }))}
+ onClick={() => setConfig({
+ theme: {
+ "base-font-size": "12px", // Base font size for the theme
+ background: {
+ "toolbar-color": "#2c3e50", // Background color of the toolbar
+ },
+ button: {
+ "accent-color": "#27ae60", // General accent color for buttons
+ },
+ }
+ })}
>
Apply custom theme
@@ -9126,7 +9128,8 @@ Questionnaires
diff --git a/aidbox-forms-renderer-react/index.html b/aidbox-forms-renderer-react/index.html
index 601add4..3044043 100644
--- a/aidbox-forms-renderer-react/index.html
+++ b/aidbox-forms-renderer-react/index.html
@@ -39,10 +39,12 @@
const [id, setId] = React.useState(questionnaires[0].id);
const [sidebarOpen, setSidebarOpen] = React.useState(false);
- const [theme, setTheme] = React.useState({
- button: {
- "accent-color": "#e34001", // General accent color for buttons
- },
+ const [config, setConfig] = React.useState({
+ theme: {
+ button: {
+ "accent-color": "#e34001", // General accent color for buttons
+ },
+ }
});
@@ -51,8 +53,9 @@
- setSidebarOpen(!sidebarOpen)}>
+ setSidebarOpen(!sidebarOpen)}>
☰
@@ -107,7 +110,8 @@
-
+
Questionnaires
@@ -136,14 +140,16 @@
Questionnaires
setTheme({
- "base-font-size": "12px", // Base font size for the theme
- background: {
- "toolbar-color": "#2c3e50", // Background color of the toolbar
- },
- button: {
- "accent-color": "#27ae60", // General accent color for buttons
- },
+ onClick={() => setConfig({
+ theme: {
+ "base-font-size": "12px", // Base font size for the theme
+ background: {
+ "toolbar-color": "#2c3e50", // Background color of the toolbar
+ },
+ button: {
+ "accent-color": "#27ae60", // General accent color for buttons
+ },
+ }
})}
>
Apply custom theme
@@ -154,7 +160,8 @@ Questionnaires
base-url="https://form-builder.aidbox.app"
style={{width: '100%', border: 'none', alignSelf: 'stretch', display: 'flex'}}
questionnaire-id={id}
- theme={JSON.stringify(theme)}
+ key={JSON.stringify(config)}
+ config={JSON.stringify(config)}
disable-load-sdc-config={true}
>