Fixed surveyjs/private-tasks#467 - Library theme doesn't return to th…

…e light theme after switching a creator's theme from Dark to Light (#6608) * Fixed surveyjs/private-tasks#467 - Library theme doesn't return to the light theme after switching a creator's theme from Dark to Light * Pinged build --------- Co-authored-by: tsv2013 <[email protected]>
surveyjs · Feb 18, 2025 · a7b3e38 · a7b3e38
1 parent fa9bc1c
commit a7b3e38
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 1 deletion.
diff --git a/packages/survey-creator-core/src/creator-theme/creator-theme-model.ts b/packages/survey-creator-core/src/creator-theme/creator-theme-model.ts
@@ -220,6 +220,7 @@ export class CreatorThemeModel extends Base implements ICreatorTheme {
     assign(_json, json);
     delete _json["cssVariables"];
     super.fromJSON(_json, options);
+    this.isLight = json.isLight !== undefined ? json.isLight : true;
 
     if (json.cssVariables) {
       super.fromJSON(json.cssVariables, options);
@@ -234,6 +235,9 @@ export class CreatorThemeModel extends Base implements ICreatorTheme {
     this.scaleCssVariables();
 
     const result = super.toJSON(options);
+    if (!this.isLight) {
+      result.isLight = false;
+    }
     const cssVariables = {};
     assign(cssVariables, this.initialCssVariables, this.themeCssVariablesChanges);
     result.cssVariables = cssVariables;
@@ -393,4 +397,4 @@ Serializer.addProperties("creatortheme", [
   { name: "--sjs-secondary-background-10", visible: false },
   { name: "--sjs-special-haze", visible: false },
   { name: "--sjs-special-glow", visible: false },
-]);
+]);
diff --git a/packages/survey-creator-core/src/creator-theme/creator-themes.ts b/packages/survey-creator-core/src/creator-theme/creator-themes.ts
@@ -4,6 +4,7 @@ import { DefaultLightColorCssVariables } from "../themes/default-light-color-css
 export interface ICreatorTheme {
   themeName?: string;
   iconSet?: string;
+  isLight?: boolean;
   cssVariables?: { [index: string]: string | any };
 }
 

diff --git a/packages/survey-creator-core/tests/creator-theme/creator-theme-model.tests.ts b/packages/survey-creator-core/tests/creator-theme/creator-theme-model.tests.ts
@@ -243,3 +243,37 @@ test("sjs-special-background calculations on primary background changed", (): an
   expect(colorsAreEqual(themeModel["--sjs-primary-background-500"], "#fefefe")).toBeTruthy();
   expect(colorsAreEqual(themeModel["--sjs-special-background"], PredefinedBackgroundColors["light"]["gray"])).toBeTruthy();
 });
+
+test("Creator theme model isLight de/serialization", (): any => {
+  const themeModel = new CreatorThemeModel();
+  let result = themeModel.cssVariables || {};
+  expect(Object.keys(result).length).toBe(0);
+
+  const lightThemeJson: ICreatorTheme = {
+    themeName: "custom-light",
+  };
+  themeModel.fromJSON(lightThemeJson);
+  expect(themeModel.isLight).toBeTruthy();
+  expect(themeModel.themeName).toBe("custom-light");
+
+  let themeModelJson = themeModel.toJSON();
+  expect(themeModelJson).toStrictEqual(lightThemeJson);
+
+  const darkThemeJson: ICreatorTheme = {
+    themeName: "custom-dark",
+    isLight: false,
+  };
+  themeModel.fromJSON(darkThemeJson);
+  expect(themeModel.isLight).toBeFalsy();
+  expect(themeModel.themeName).toBe("custom-dark");
+
+  themeModelJson = themeModel.toJSON();
+  expect(themeModelJson).toStrictEqual(darkThemeJson);
+
+  themeModel.fromJSON(lightThemeJson);
+  expect(themeModel.isLight).toBeTruthy();
+  expect(themeModel.themeName).toBe("custom-light");
+
+  themeModelJson = themeModel.toJSON();
+  expect(themeModelJson).toStrictEqual(lightThemeJson);
+});