Theme management method and system for dynamic switching and real-time updating

Abstract

The invention discloses a theme management method and system for dynamic switching and real-time updating. The method comprises the following steps that service development is carried out based on page style requirements, and a configuration compiling entry is provided; generating configuration information according to a theme page designed by a user based on a compiling entry; obtaining style configuration parameters in the configuration information, using placeholders to realize dynamic interpolation of styles, and converting the styles into css codes; combining the style css codes of the same theme to generate a css file; uploading the css file to an OSS object storage, and storing the css file in a server and generating a corresponding address by the object storage; and when the application is opened, the front end calls the back-end interface to obtain the theme css file address of the application and presents an updated page style after quoting the theme css file address. According to the invention, more intelligent, fluent and personalized theme design experience is provided for the user; and meanwhile, the workload of developers in the aspects of theme management, maintenance and expansion is greatly simplified.

Description

Technical Field

[0001] The present invention belongs to the field of software platform theme design, and in particular relates to a theme management method and system for dynamic switching and real-time updating. Background Art

[0002] Theme design has a significant impact on improving user experience, brand image, diversifying scenarios and needs, and application maintainability. Theme design refers to changing the visual style of an application in the user interface (UI) by adjusting elements such as color, font, and background to meet the aesthetic needs and usage preferences of different users. Theme design is more than just a simple visual switch. Some software design companies have the need to develop multiple software products, so it also involves cross-device and cross-platform uniformity, smooth user experience, and optimized system performance. Currently, theme design can be achieved in the following ways:

[0003] 1. Combining CSS variables with JavaScript. CSS variables allow developers to define and use custom properties that can be dynamically updated in stylesheets, allowing colors to be dynamically adjusted based on the user's selected theme. This approach enables more fine-grained control, supporting multiple theme switching and real-time updates. Developers first define CSS variables, such as color and font size, and then use JavaScript to modify the values of these variables when switching themes.

[0004] 2. Switch independent CSS files. Change themes by switching different CSS files. Define a separate CSS file for each theme. When the user selects a theme, switch the referenced CSS file.

[0005] 3. Use a preprocessor. Utilize variables and conditional statements provided by CSS preprocessors (such as Sass and Less) to implement theme design. Use predefined variables to set theme-related properties such as color and font, and then compile to generate different theme CSS files.

[0006] Of the three solutions mentioned above, Solution 1 offers greater flexibility and real-time performance than the other two, making it suitable for the personalized needs and multi-platform adaptation of modern web applications. It uses CSS custom properties to define modifiable theme styles, such as colors, fonts, and background colors. JavaScript or the framework's state management tools dynamically update the values of CSS variables when users select different themes, enabling instant switching between multiple themes. However, this solution still has the following limitations: developers need to design and maintain different theme files, increasing development and maintenance costs; because CSS variables are dynamically updated, styles may not be directly displayed during debugging, complicating development and debugging; and it cannot be used directly across platforms. Summary of the Invention

[0007] In order to solve the above problems, the present invention adopts a technical solution: a theme management method for dynamic switching and real-time updating, which includes the following steps:

[0008] Provide configuration compilation entry for business development based on page style requirements;

[0009] Generate configuration information based on the theme page designed by the user based on the compilation entry;

[0010] Obtaining the style configuration parameters in the configuration information, using placeholders to implement dynamic interpolation of the style, and converting them into CSS code;

[0011] Merge the style CSS codes of the same theme to generate a CSS file;

[0012] Upload the CSS file to the OSS object storage, which saves the CSS file on the server and generates a corresponding address.

[0013] When the application is opened, the front-end calls the back-end interface to obtain the application's theme CSS file address and references it to present the updated page style.

[0014] Optionally, the page style includes a global basic style, a frame style and a component style; the global basic style includes color, font, border and shadow, the frame style includes page layout, and the component style includes button, link, paging and data entry style.

[0015] Optionally, the method further comprises the following steps:

[0016] Storing the configuration information in a database;

[0017] When editing a theme, read the corresponding configuration information through the interface to continue editing.

[0018] Optionally, the method further comprises the following steps:

[0019] When creating an application, bind the designed theme to the application, or

[0020] When creating or editing a theme, the theme is bound to the created application.

[0021] Optionally, the configuration information is a configuration in a json format file description style.

[0022] Optionally, after the step of merging the CSS codes to generate the CSS file, the following steps are also included:

[0023] Optimize the css files.

[0024] Optionally, the method further comprises the following steps:

[0025] When creating or editing an application, bind other existing applications to it;

[0026] Added a synchronous binding option. When an application in multiple applications that are bound to each other is bound to a theme, the user's choice is used to determine whether to synchronously bind the theme to other applications.

[0027] Added a synchronous application option. When an application among multiple bound applications changes its current theme, it is determined whether to synchronously apply the theme to other applications based on the user's choice.

[0028] And, a theme management system for dynamic switching and real-time updating, the system comprising:

[0029] Development module, used to provide configuration and compilation entry for business development based on page style requirements;

[0030] Configuration module, used to generate configuration information according to the theme page designed by the user based on the compilation entrance;

[0031] A style generation module is used to obtain the style configuration parameters in the configuration information, use placeholders to implement dynamic interpolation of the style, convert them into CSS code, and merge the style CSS codes of the same theme to generate a CSS file;

[0032] An address generation module is used to upload the CSS file to the OSS object storage, which saves the CSS file on the server and generates a corresponding address;

[0033] The front-end style module is used to call the back-end interface to obtain the application's theme CSS file address when the application is opened, and then reference it to present the updated page style.

[0034] Optionally, the system further comprises:

[0035] Application binding module, used for mutual binding between multiple applications;

[0036] Theme binding module, used to bind themes to applications, and also to synchronize multiple applications with the same theme style in one click.

[0037] The synchronous application module is used to synchronize and apply the same theme style to multiple applications that are bound to each other with one click.

[0038] Optionally, the system further includes a storage module for storing the configuration information, and reading the corresponding configuration information through an interface to continue editing when editing a theme.

[0039] Due to the adoption of the above technical solution, the present invention has the following beneficial effects: providing users with a more intelligent, smooth and personalized theme design experience; and greatly simplifying the workload of developers in theme management, maintenance and expansion.

[0040] Other features and advantages of the present invention will be described in the following description, and in part will become apparent from the description, or will be understood by practicing the present invention. The purpose and other advantages of the present invention can be realized and obtained by the structures pointed out in the description, claims and drawings. BRIEF DESCRIPTION OF THE DRAWINGS

[0041] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following is a brief introduction to the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0042] Figure 1 A flow chart of a topic management method according to an embodiment of the present invention is shown;

[0043] Figure 2 A schematic diagram of a theme design page according to an embodiment of the present invention is shown. DETAILED DESCRIPTION

[0044] To make the objectives, technical solutions, and advantages of the embodiments of the present invention more clear, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the accompanying drawings in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative efforts shall fall within the scope of protection of the present invention.

[0045] Example 1

[0046] like Figure 1 As shown, the theme management method for dynamic switching and real-time updating of the embodiment of the present invention provides a flexible and efficient web / mobile dynamic theme design and application solution. Through the design page, users can modify the global basic style (color, font, border, shadow, etc.) and individually adjust the page content such as the style of each component, and flexibly apply it to the web / mobile page. The method includes the following steps:

[0047] S1: Provides configuration and compilation entry for business development based on page style requirements;

[0048] Specifically, in the R&D process, UI designers focus on UI design drafts and define adjustable page styles through semantic variables (that is, giving variables clear and easy-to-understand names so that they can intuitively express the purpose or function of the variables, rather than just describing the value content. For example, the word "primary" indicates the main color of the page). Front-end developers only need to focus on business development and provide configuration editing entrances. As for the final presented style, front-end developers do not need to pay attention to it.

[0049] When a user creates a new theme, he or she first defines the theme name and then enters the theme design page. In this embodiment, the configuration of the editing entry is as follows Figure 2 The page style includes global basic styles, framework styles, and component styles. The global basic styles include colors, fonts, borders, and shadows; the framework styles include page layouts, such as the top layout, sidebars, and homepage; and the component styles include buttons, forms, links, paging, and data entry styles.

[0050] This method also includes providing a developer mode. When the provided style compilation entry does not meet the requirements, the developer mode can be used to compile the style.

[0051] When users design themes based on the compilation entry, these operations are processed by the front-end and dynamically displayed on the design page. Users can preview the effects of the current changes in real time.

[0052] S2: Generate configuration information based on the theme page designed by the user based on the compilation entrance, where the configuration information is a configuration style described in a json format file.

[0053] When users design styles, they modify the style configuration items, triggering the system to transmit and record the user's operations.

[0054] S3: Obtain the style configuration parameters in the configuration information, use placeholders to implement dynamic interpolation of the style, and finally convert them into standard CSS code.

[0055] S4: Merge the style CSS codes of the same theme to generate a complete CSS file, and optimize the CSS file to reduce redundant code and compress the file size to improve performance;

[0056] S5: Upload the CSS file to the OSS object storage. The object storage saves the CSS file on the server and generates a URL that can access the CSS file for subsequent style loading.

[0057] In addition, the configuration information needs to be stored in a database. When the theme is edited next time, the corresponding existing configuration information is read through the interface to continue editing.

[0058] S6: In the associated web application, when the application is opened, the front-end calls the back-end interface to obtain the application's theme CSS file address, and the page applies the user's theme style by dynamically loading the obtained CSS file URL. <link> The tag references the URL, and the page automatically updates its style and renders.

[0059] Example 2

[0060] In this embodiment, the dynamic switching and real-time updating theme management method described in the first embodiment is applied to application development software. Specifically, when creating an application, the designed theme is bound to the application, or when creating or editing a theme, the theme is bound to the created application. This enables the modification and presentation of the application theme style in step S6.

[0061] Example 3

[0062] Based on the above embodiment 2, this embodiment further includes the following steps to simplify the process of using the theme style:

[0063] S01: When creating or editing an application, bind other existing applications associated with it;

[0064] S02: Add a synchronous binding option. When an application among multiple applications that are bound to each other is bound to a theme, it is determined whether to synchronize the theme with other applications based on the user's choice.

[0065] In some actual uses, multiple applications are related to each other, such as the web and mobile versions of the same application software, or multiple versions of the same application software. When the theme design user completes the design of a theme, the theme can be quickly bound to multiple applications that are related to each other and have been bound.

[0066] S03: Add a synchronous application option. When an application among multiple applications that are bound to each other changes the currently used theme, it is determined based on the user's choice whether to synchronously apply the theme to other applications. Through synchronous application, multiple related applications can quickly enable the same theme at the same time, ensuring the unity of the theme style between the related applications.

[0067] Example 4

[0068] Based on the methods in the above embodiments 1 to 3, this embodiment provides a theme management system for dynamic switching and real-time updating, including:

[0069] Development module, used to provide configuration and compilation entry for business development based on page style requirements;

[0070] Configuration module, used to generate configuration information according to the theme page designed by the user based on the compilation entrance;

[0071] A style generation module is used to obtain the style configuration parameters in the configuration information, use placeholders to implement dynamic interpolation of the style, convert them into CSS code, and merge the style CSS codes of the same theme to generate a CSS file;

[0072] An address generation module is used to upload the CSS file to the OSS object storage, which saves the CSS file on the server and generates a corresponding address;

[0073] The front-end style module is used to call the back-end interface to obtain the address of the application's theme CSS file when the application is opened, and then reference it to present the updated page style;

[0074] Application binding module, used for mutual binding between multiple applications;

[0075] Theme binding module, used to bind themes to applications, and also to synchronize multiple applications with the same theme style in one click.

[0076] Synchronous application module, used for multiple applications bound to each other to synchronize and apply the same theme style with one click;

[0077] The storage module is used to store the configuration information and read the corresponding configuration information through the interface to continue editing when editing the theme.

[0078] It should be noted that the implementation process of the functions and effects of each device, module, unit, etc. in this system is specifically described in the implementation process of the corresponding steps in the above method embodiment, and will not be repeated here.

[0079] The above description is merely a preferred embodiment of the present invention and does not constitute any form of limitation to the present invention. Although the present invention has been disclosed as a preferred embodiment as above, it is not intended to limit the present invention. Any technician familiar with this profession can make some changes or modifications to equivalent embodiments of the technical contents disclosed above without departing from the scope of the technical solution of the present invention. However, any simple modifications, equivalent changes and modifications made to the above embodiments based on the technical essence of the present invention without departing from the content of the technical solution of the present invention are still within the scope of the technical solution of the present invention.

Claims

1. A theme management method for dynamic switching and real-time updating, characterized in that: The method comprises the following steps: Provide configuration compilation entry for business development based on page style requirements; Generate configuration information based on the theme page designed by the user based on the compilation entry; Obtaining the style configuration parameters in the configuration information, using placeholders to implement dynamic interpolation of the style, and converting them into CSS code; Merge the style CSS codes of the same theme to generate a CSS file; Upload the CSS file to the OSS object storage, which saves the CSS file on the server and generates a corresponding address. When the application is opened, the front-end calls the back-end interface to obtain the application's theme CSS file address and references it to present the updated page style.

2. The theme management method for dynamic switching and real-time updating according to claim 1, characterized in that: The page style includes a global basic style, a frame style and a component style; the global basic style includes color, font, border and shadow, the frame style includes page layout, and the component style includes button, link, paging and data entry style.

3. The theme management method for dynamic switching and real-time updating according to claim 1, characterized in that: The method further comprises the following steps: Store the configuration information in the database: When editing a theme, read the corresponding configuration information through the interface to continue editing.

4. The theme management method for dynamic switching and real-time updating according to claim 1, characterized in that: The method further comprises the following steps: When creating an application, bind the designed theme to the application, or When creating or editing a theme, the theme is bound to the created application.

5. The theme management method for dynamic switching and real-time updating according to claim 1, characterized in that: The configuration information is in the form of a json file description.

6. The theme management method for dynamic switching and real-time updating according to claim 1, characterized in that: After the step of merging the CSS codes to generate the CSS file, the following steps are also included: Optimize the css files.

7. The theme management method for dynamic switching and real-time updating according to any one of claims 1 to 6, characterized in that: The method further comprises the following steps: When creating or editing an application, bind other existing applications to it; Added a synchronous binding option. When an application in multiple applications that are bound to each other is bound to a theme, the user's choice is used to determine whether to synchronously bind the theme to other applications: Added a synchronous application option. When an application among multiple bound applications changes its current theme, it is determined whether to synchronously apply the theme to other applications based on the user's choice.

8. A theme management system for dynamic switching and real-time updating, characterized in that: The system comprises: Development module, used to provide configuration and compilation entry for business development based on page style requirements; Configuration module, used to generate configuration information according to the theme page designed by the user based on the compilation entrance; A style generation module is used to obtain the style configuration parameters in the configuration information, use placeholders to implement dynamic interpolation of the style, convert them into CSS code, and merge the style CSS codes of the same theme to generate a CSS file; An address generation module is used to upload the CSS file to the OSS object storage, which saves the CSS file on the server and generates a corresponding address; The front-end style module is used to call the back-end interface to obtain the application's theme CSS file address when the application is opened, and then reference it to present the updated page style.

9. The theme management system for dynamic switching and real-time updating according to claim 8, characterized in that: The system further comprises: Application binding module, used for mutual binding between multiple applications; Theme binding module, used to bind themes to applications, and also to synchronize multiple applications with the same theme style in one click. The synchronous application module is used to synchronize and apply the same theme style to multiple applications that are bound to each other with one click.

10. The theme management system for dynamic switching and real-time updating according to claim 8, characterized in that: The system further comprises a storage module for storing the configuration information, and reading the corresponding configuration information through an interface to continue editing when editing a theme.

Images