From ddadde6034c69e0e0bfb0b9b4472c715d270ffdb Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.developer@gmail.com>
Date: Thu, 13 Feb 2025 13:17:23 +0300
Subject: [PATCH] resolve #6583 add registerCreatorTheme function (#6592)

Co-authored-by: OlgaLarina <olga.larina.dev@gmail.com>
---
 .../src/creator-theme/creator-themes.ts       |  5 +++
 .../tests/creator-theme/creator-theme.test.ts | 32 +++++++++++++++++++
 2 files changed, 37 insertions(+)

diff --git a/packages/survey-creator-core/src/creator-theme/creator-themes.ts b/packages/survey-creator-core/src/creator-theme/creator-themes.ts
index 4d28d01107..1c9c2359a8 100644
--- a/packages/survey-creator-core/src/creator-theme/creator-themes.ts
+++ b/packages/survey-creator-core/src/creator-theme/creator-themes.ts
@@ -10,6 +10,11 @@ export interface ICreatorTheme {
 export const PredefinedCreatorThemes: string[] = ["default-light"];
 export const defaultCreatorThemesOrder = ["default-light", "default-contrast", "default-dark", "sc2020"];
 
+export function registerCreatorTheme(theme: ICreatorTheme) {
+  PredefinedCreatorThemes.push(theme.themeName);
+  CreatorThemes[theme.themeName] = theme;
+}
+
 const defaultVariables = {
   "--sjs-special-background": "#EDF9F7FF",
   "--sjs-primary-background-500": "#19B394FF",
diff --git a/packages/survey-creator-core/tests/creator-theme/creator-theme.test.ts b/packages/survey-creator-core/tests/creator-theme/creator-theme.test.ts
index bab61edb47..3dd5b8d08e 100644
--- a/packages/survey-creator-core/tests/creator-theme/creator-theme.test.ts
+++ b/packages/survey-creator-core/tests/creator-theme/creator-theme.test.ts
@@ -1,5 +1,7 @@
+import { QuestionDropdownModel } from "survey-core";
 import { TabDesignerPlugin } from "../../src/components/tabs/designer-plugin";
 import { CreatorThemeModel } from "../../src/creator-theme/creator-theme-model";
+import { CreatorThemes, PredefinedCreatorThemes, registerCreatorTheme } from "../../src/creator-theme/creator-themes";
 import { CreatorTester } from "../creator-tester";
 
 test("onCreatorThemePropertyChanged event", (): any => {
@@ -14,4 +16,34 @@ test("onCreatorThemePropertyChanged event", (): any => {
 
   themeModel["--sjs-secondary-background-500"] = "#ff0000";
   expect(modificationsLog).toBe("->THEME_MODIFIED --sjs-secondary-background-500 - #ff0000");
+});
+
+test("registerCreatorTheme function", (): any => {
+  const customThemeName = "customLight";
+  const customCssVariables = {
+    "--sjs-primary-background-500": "red",
+    "--sjs-secondary-background-500": "orange",
+  };
+
+  registerCreatorTheme({
+    themeName: customThemeName,
+    cssVariables: { ...customCssVariables }
+  });
+
+  try {
+    const creator: CreatorTester = new CreatorTester();
+    const designerPlugin: TabDesignerPlugin = <TabDesignerPlugin>creator.getPlugin("designer");
+    const themeChooser = designerPlugin["themePropertyGrid"].survey.getQuestionByName("themeName") as QuestionDropdownModel;
+    expect(themeChooser.choices).toHaveLength(5);
+    expect(themeChooser.choices[4].value).toBe(customThemeName);
+    expect(creator.creatorTheme).toBeUndefined();
+    expect(creator.themeVariables).toStrictEqual({});
+
+    themeChooser.value = customThemeName;
+    expect(creator.creatorTheme.themeName).toBe(customThemeName);
+    expect(creator.themeVariables).toStrictEqual({ ...customCssVariables });
+  } finally {
+    PredefinedCreatorThemes.splice(PredefinedCreatorThemes.indexOf(customThemeName), 1);
+    delete CreatorThemes[customThemeName];
+  }
 });
\ No newline at end of file