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 index ec2f1736ae..ba30b68317 100644 --- 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 }, -]); \ No newline at end of file +]); 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 1c9c2359a8..848283bb26 100644 --- 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 index 3b3be6b658..a18901a06a 100644 --- 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); +}); \ No newline at end of file