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 7295735f53..51a03817c7 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 @@ -170,7 +170,7 @@ export class CreatorThemeModel extends Base implements ICreatorTheme { } private blockThemeChangedNotifications = 0; - public loadTheme(theme: ICreatorTheme = {}) { + public loadTheme(theme: ICreatorTheme = { themeName: CreatorThemeModel.defautlThemeName }) { this.blockThemeChangedNotifications += 1; try { const baseTheme = CreatorThemes[theme.themeName] || {}; 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 0ccb527007..42d7ae9fdf 100644 --- a/packages/survey-creator-core/src/creator-theme/creator-themes.ts +++ b/packages/survey-creator-core/src/creator-theme/creator-themes.ts @@ -1,21 +1,28 @@ +import { assign } from "../utils/utils"; +import designTabSurveyThemeJSON from "../designTabSurveyThemeJSON"; + export interface ICreatorTheme { themeName?: string; cssVariables?: { [index: string]: string }; } export const PredefinedCreatorThemes: string[] = ["sc2020"]; +const sc2020CssVariables = {}; +assign(sc2020CssVariables, designTabSurveyThemeJSON.cssVariables, { + "--sjs-special-background": "#F3F3F3FF", + "--sjs-primary-background-500": "#19B394FF", + "--sjs-primary-background-10": "#19B3941A", + "--sjs-primary-background-400": "#14A48BFF", + "--sjs-secondary-background-500": "#FF9814FF", + "--sjs-secondary-background-25": "#FF981440", + "--sjs-secondary-background-10": "#FF98141A", + "--ctr-surface-background-color": "var(--sjs-special-background)", + "--ctr-toolbox-background-color": "var(--sjs-special-background)", +}); + export const CreatorThemes: { [index: string]: ICreatorTheme } = { "sc2020": { themeName: "sc2020", - cssVariables: { - "--sjs-special-background": "#F3F3F3FF", - "--sjs-primary-background-500": "#19B394FF", - "--sjs-primary-background-10": "#19B3941A", - "--sjs-primary-background-400": "#14A48BFF", - "--sjs-secondary-background-500": "#FF9814FF", - "--sjs-secondary-background-25": "#FF981440", - "--sjs-secondary-background-10": "#FF98141A", - "--ctr-surface-background-color": "var(--sjs-special-background)", - } + cssVariables: sc2020CssVariables } };