Theme: enable to set theme for the scene

[mimoham24]

Leader

@issmail-basel

User story

Users want a consistent design for the published project. Now, most of the component's colors can be changed but some of them are not. Users want to define the basic theme which is used for all components on the scene. With this feature, users don't need to care about the consistency of the design.

Requirements

• There are 5 preset themes for published page
• This theme would be used as a base theme for the entire project
• This theme is not affected by UI theme
• Theme can be passed to plugins widget

• write document
  • Front-end
  • Back-end

The design link

here

Acceptance criteria

• design approved
• develop front-end and back-end

Testing list

• Editor
  • Add storytelling widget, Infobox, and menu widget
    • Default dark theme is selected
    • Change theme to predefined (forest/light) themes
    • Choose custom theme
  • Return to the dashboard and re-open the project, previously selected scene them should appear
• Preview page
  • Predefined theme (Same as Figma)
    • Check storytelling color
    • Check menu colors
    • Check info box colors
  • Custom colors (Same as user preferences and Figma rules)
    • Check storytelling color
    • Check menu colors
    • Check info box colors
• Published page
  • Predefined theme (Same as Figma)
    • Check storytelling color
    • Check menu colors
    • Check info box colors
  • Custom colors (Same as user preferences and Figma rules)
    • Check storytelling color
    • Check menu colors
    • Check info box colors

[yk-eukarya]

In the design link there is a case for custom theme, so
we have 2 main cases:

• pre-made theme
• custom theme

So I'm thinking about do not deal with those cases in the backend side, instead the backend always interact with themes as custom themes, and the pre-made theme can be declared in the front end side

Also can we treat the "themeConfig" object as a scene property?

@rot1024 @HideBa

[HideBa]

@yk-eukarya

So I'm thinking about do not deal with those cases in the backend side, instead the backend always interact with themes as custom themes, and the pre-made theme can be declared in the front end side

I also think that's a better way.

Also can we treat the "themeConfig" object as a scene property?

I think it's OK.

@rot1024 How do you think?

[rot1024]

It depends on the requirements of the feature.

If you don't need to customize the theme at all, it is enough to create a theme field in the scene property and store the theme identifier.

If you want to be able to customize the theme, you need to design a separate domain model, and the scene will have that model.

However, it is also possible to customize the theme using only properties. In that case, there is no need for a new domain model and UI for theme customization.

- id: theme
  fieds:
    - id: theme_base
      title: Theme
      type: string
      choices:
         - key: default
           label: Default
    - id: theme_color_primary
      title: Primary color
      type: string
      ui: color
# ...