resolve #6583 add registerCreatorTheme function (#6592)

Co-authored-by: OlgaLarina <[email protected]>
surveyjs · Feb 13, 2025 · ddadde6 · ddadde6
1 parent ef6da82
commit ddadde6
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 0 deletions.
diff --git 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
@@ -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];
+  }
 });