Data processing method and device, electronic equipment and storage medium

Abstract

The embodiment of the invention discloses a data processing method and device, electronic equipment and a storage medium, and the method comprises the steps that a target color function corresponding to a page element is searched for from a style code corresponding to a page, the target color function comprises a color group parameter corresponding to the page element, and a target color function corresponding to the page element is searched for from a color group corresponding to the color group parameter; the method comprises the steps of obtaining color values of a page element in multiple theme modes, generating a style sheet corresponding to each theme mode based on the color value of the page element in each theme mode, generating a style file corresponding to a page according to the style sheets corresponding to the multiple theme modes respectively, obtaining a to-be-displayed target theme mode from the multiple theme modes, and displaying the to-be-displayed target theme mode according to the to-be-displayed target theme mode. And rendering the color of the page element based on the color value contained in the style sheet corresponding to the target theme mode in the style file. According to the technical scheme, the style development cost corresponding to the theme mode can be saved, and the theme mode switching effect is improved.

Description

Technical Field

[0001] This application relates to the field of computers, and more specifically, to a data processing method and apparatus, electronic device, storage medium, and program product. Background Technology

[0002] To achieve diverse page displays and meet the display needs of different customers and scenarios, multiple theme modes are usually set up, and the colors of page elements are different in different theme modes.

[0003] To achieve differentiated color display of page elements under different theme modes, related technologies require developers to write style sheets corresponding to each theme mode and define the colors of page elements in the theme mode. This not only consumes a lot of manpower and increases development costs, but manual writing is also prone to omissions or errors, which can lead to errors such as incomplete color switching of page elements during theme mode switching, thus reducing the theme switching effect. Summary of the Invention

[0004] The embodiments of this application provide a data processing method and apparatus, electronic device, storage medium, and program product, which can save the style development cost corresponding to theme mode and improve the theme mode switching effect.

[0005] According to one aspect of the embodiments of this application, a data processing method is provided, the method comprising:

[0006] Find the target color function corresponding to the page element from the style code of the page; wherein, the target color function contains the color group parameter corresponding to the page element;

[0007] Obtain the color values ​​of the page element under various theme modes from the color groups corresponding to the color group parameters; wherein, each color group contains the color values ​​corresponding to the various theme modes respectively;

[0008] Based on the color values ​​of the page elements in each theme mode, a style sheet corresponding to each theme mode is generated, and a style file corresponding to the page is generated according to the style sheets corresponding to the various theme modes.

[0009] The target theme mode to be displayed is obtained from the multiple theme modes, and the color of the page element is rendered based on the color value contained in the style sheet corresponding to the target theme mode in the style file.

[0010] According to one aspect of the embodiments of this application, a data processing apparatus is provided, the apparatus comprising:

[0011] The search module is configured to search for the target color function corresponding to a page element from the style code of the page; wherein the target color function contains the color group parameter corresponding to the page element;

[0012] The acquisition module is configured to acquire the color values ​​of the page element under multiple theme modes from the color groups corresponding to the color group parameters; wherein, each color group contains the color values ​​corresponding to the multiple theme modes respectively;

[0013] The generation module is configured to generate a style sheet corresponding to each theme mode based on the color value of the page element in each theme mode, and generate a style file corresponding to the page according to the style sheets corresponding to the multiple theme modes respectively;

[0014] The rendering module is configured to obtain the target theme mode to be displayed from the multiple theme modes, and render the color of the page elements based on the color values ​​contained in the style sheet corresponding to the target theme mode in the style file.

[0015] In an exemplary embodiment, based on the foregoing scheme, and provided that the color group parameters include a target color group identifier, the acquisition module is specifically configured as follows:

[0016] From the color group identifier contained in the color file and the color group corresponding to the color group identifier, find the color group corresponding to the target color group identifier, and obtain the color value of the page element in the various theme modes.

[0017] In an exemplary embodiment, based on the foregoing scheme, and assuming the color file contains a color group file and a color value file, the acquisition module is specifically configured as follows:

[0018] From the mapping relationship between color group identifiers and color identifier sets contained in the color group file, find the target color identifier set corresponding to the target color group identifier; wherein, each color identifier set contains color identifiers corresponding to the various theme modes respectively;

[0019] From the mapping relationship between color identifiers and color values ​​contained in the color value file, find the color value corresponding to the color identifier of each theme mode of the target color identifier set, and obtain the color value of the page element in each theme mode.

[0020] In an exemplary embodiment, based on the foregoing solution, the device further includes an update module, specifically configured as follows:

[0021] Get color file update request;

[0022] Based on the color file update request, the color groups contained in the color file are updated to obtain the updated color file;

[0023] Based on the updated color file and the style code, the style file corresponding to the page is regenerated.

[0024] In an exemplary embodiment, based on the foregoing scheme, the search module is specifically configured as follows:

[0025] Compile the style code corresponding to the page;

[0026] During the compilation process, the style code is parsed to obtain the abstract syntax tree corresponding to the style code;

[0027] The target color function contained in each node is obtained by traversing each node in the abstract syntax tree.

[0028] In an exemplary embodiment, based on the foregoing scheme, the search module is specifically configured as follows:

[0029] Obtain the modification operation for the abstract syntax tree, and modify the abstract syntax tree according to the modification operation to obtain the modified abstract syntax tree;

[0030] Traverse each node in the modified abstract syntax tree to obtain the target color function contained in each node;

[0031] The specific configuration of the generation module is as follows:

[0032] Based on the style sheets corresponding to the various theme modes and the modified abstract syntax tree, the style file corresponding to the page is generated.

[0033] In an exemplary embodiment, based on the foregoing scheme, the search module is specifically configured as follows:

[0034] The style declarations contained in the style code corresponding to the page are traversed to obtain the style declarations to be processed that contain the target color function;

[0035] The specific configuration of the generation module is as follows:

[0036] Based on the color values ​​of the page elements in each theme mode, a style declaration corresponding to each theme mode is generated; wherein, the style declaration corresponding to each theme mode includes the color values ​​of the page elements in each theme mode;

[0037] Based on the style declaration corresponding to each theme mode, a style sheet corresponding to each theme mode is generated.

[0038] In an exemplary embodiment, based on the foregoing scheme, the generation module is specifically configured as follows:

[0039] Based on the style declaration corresponding to each theme mode, construct the style rules corresponding to each theme mode, and generate the style table corresponding to each theme mode according to the style rules corresponding to each theme mode;

[0040] Replace the style declaration to be processed contained in the style code with the style sheets corresponding to the various theme modes respectively to obtain the updated style code;

[0041] Based on the updated style code, a style file corresponding to the page is generated.

[0042] In an exemplary embodiment, based on the foregoing scheme, the generation module is specifically configured as follows:

[0043] In the root node corresponding to the Hypertext Markup Language (HTML) file of the page, generate the attribute selector corresponding to each theme mode;

[0044] Based on the attribute selector corresponding to each theme mode, construct the style rules corresponding to each theme mode;

[0045] Add the style declaration corresponding to each theme mode to the style rule corresponding to each theme mode.

[0046] In an exemplary embodiment, based on the foregoing scheme, the rendering module is specifically configured as follows:

[0047] Input the target theme pattern into the root node to find the target attribute selector corresponding to the target theme pattern;

[0048] The style rule to which the target attribute selector belongs is triggered, and the color of the page element is rendered based on the color value in the style declaration contained in the triggered style rule.

[0049] In an exemplary embodiment, based on the foregoing scheme, the generation module is specifically configured as follows:

[0050] Obtain a first theme pattern and a second theme pattern other than the first theme pattern from the multiple theme patterns;

[0051] Based on the style declaration corresponding to the first theme pattern, generate the style sheet corresponding to the first theme pattern;

[0052] Based on the style declaration corresponding to the second theme pattern, construct the style rules corresponding to the second theme pattern, and generate the style sheet corresponding to the second theme pattern based on the style rules corresponding to the second theme pattern.

[0053] In an exemplary embodiment, based on the foregoing solution, the device further includes a processing module, specifically configured as follows:

[0054] Obtain the color group parameters corresponding to the page element, as well as the style code template; the style code template includes a color definition template;

[0055] Assign the color group parameter corresponding to the page element to the target color function template contained in the color definition template, and assign the identifier corresponding to the page element to the page element template contained in the color definition template;

[0056] Based on the assigned color definition template, the style code corresponding to the page is generated.

[0057] According to one aspect of the embodiments of this application, an electronic device is provided, comprising:

[0058] One or more processors;

[0059] A storage device for storing one or more computer programs that, when executed by one or more processors, cause the electronic device to perform the method described above.

[0060] According to one aspect of the embodiments of this application, a computer-readable storage medium is provided having a computer program stored thereon, which, when executed by a processor of an electronic device, causes the electronic device to perform the method described above.

[0061] According to one aspect of the embodiments of this application, a computer program product is provided, including a computer program that, when executed by a processor, implements the method described above.

[0062] In the technical solution provided in the embodiments of this application, the target color function corresponding to the page element is first searched in the style code corresponding to the page. The target color function contains a color group parameter corresponding to the page element. Then, the color value of the page element under various theme modes is obtained from the color group corresponding to the color group parameter. Each color group contains color values ​​corresponding to various theme modes. Based on the color value of the page element under each theme mode, a style sheet corresponding to each theme mode is generated. In other words, during the development of the style code, only the color group parameter corresponding to the page element needs to be defined in the target color function, thereby allowing the style sheet to be determined based on the target color function. This method generates page elements automatically, avoiding errors and omissions during style generation. Furthermore, it automatically finds the color values ​​of page elements under various theme modes based on color group parameters and automatically generates style sheets corresponding to each theme mode. This improves the efficiency and accuracy of style sheet generation, eliminating the need to manually write style sheets for each theme mode and saving development costs. Then, based on the style sheets corresponding to each theme mode, it generates the corresponding style file for the page. It retrieves the target theme mode to be displayed from the various theme modes and renders the colors of page elements based on the color values ​​contained in the style sheet corresponding to the target theme mode in the style file, improving the theme mode switching effect.

[0063] It should be understood that the above general description and the following detailed description are exemplary and explanatory only, and do not limit this application. Attached Figure Description

[0064] Figure 1 This is a schematic diagram illustrating an implementation environment as shown in an exemplary embodiment of this application;

[0065] Figure 2 This is a flowchart illustrating a data processing method in an exemplary embodiment of this application;

[0066] Figure 3 This is a flowchart illustrating a data processing method in another exemplary embodiment of this application;

[0067] Figure 4 This is a flowchart illustrating a data processing method in another exemplary embodiment of this application;

[0068] Figure 5 This is a schematic diagram illustrating the style file generation process of an exemplary embodiment of this application;

[0069] Figure 6 This is a flowchart illustrating a data processing method in another exemplary embodiment of this application;

[0070] Figure 7 This is a flowchart illustrating a data processing method in another exemplary embodiment of this application;

[0071] Figure 8 This is a flowchart illustrating a data processing method in another exemplary embodiment of this application;

[0072] Figure 9 This is a schematic diagram illustrating the style sheet generation process in an exemplary embodiment of this application;

[0073] Figure 10 This is a schematic diagram of a data processing apparatus illustrating an exemplary embodiment of this application;

[0074] Figure 11 A schematic diagram of the structure of a computer system suitable for implementing the electronic device of the present application is shown. Detailed Implementation

[0075] Exemplary embodiments will now be described in a more comprehensive manner with reference to the accompanying drawings. However, the exemplary embodiments can be implemented in various forms and should not be construed as limited to these examples; rather, these embodiments are provided so that this application will be more comprehensive and complete, and will fully convey the concept of the exemplary embodiments to those skilled in the art.

[0076] Furthermore, the features, structures, or characteristics described in this application can be combined in any suitable manner in one or more embodiments. Numerous specific details are provided in the following description to provide a full understanding of the embodiments of this application. However, those skilled in the art will recognize that when implementing the technical solutions of this application, not all the detailed features in the embodiments may be used, one or more specific details may be omitted, or other methods, elements, devices, steps, etc., may be employed.

[0077] In this application embodiment, the terms "module" or "unit" refer to a computer program or part of a computer program that has a predetermined function and works with other related parts to achieve a predetermined goal, and can be implemented wholly or partially using software, hardware (such as processing circuitry or memory), or a combination thereof. Similarly, a processor (or multiple processors or memory) can be used to implement one or more modules or units. Furthermore, each module or unit can be part of an overall module or unit that includes the functionality of that module or unit.

[0078] The block diagrams shown in the accompanying drawings are merely functional entities and do not necessarily correspond to physically independent entities. That is, these functional entities can be implemented in software, in one or more hardware modules or integrated circuits, or in different network and / or processor devices and / or microcontroller devices.

[0079] The flowcharts shown in the accompanying drawings are merely illustrative and do not necessarily include all content and operations / steps, nor do they necessarily have to be performed in the described order. For example, some operations / steps can be broken down, while others can be combined or partially combined; therefore, the actual execution order may change depending on the specific circumstances.

[0080] It should also be noted that "multiple" as mentioned in this application refers to two or more. "And / or" describes the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A alone, A and B simultaneously, or B alone. The character " / " generally indicates that the preceding and following related objects have an "or" relationship.

[0081] The technical solutions of the embodiments of this application are described in detail below:

[0082] In related technologies, developers need to write style sheets corresponding to each theme mode and define the colors of page elements in each theme mode. This not only consumes a lot of manpower and increases development costs, but manual writing is also prone to omissions or errors, leading to errors such as incomplete color switching of page elements during theme mode switching, thus reducing the theme switching effect. Therefore, embodiments of this application provide a data processing method and apparatus, electronic device, storage medium, and program product that can save the style development costs corresponding to theme modes and improve the theme mode switching effect.

[0083] Please see Figure 1 , Figure 1 This is a schematic diagram of an implementation environment related to this application, which includes a terminal device 110 and a server 120. The terminal device 110 and the server 120 communicate with each other via a wired or wireless network. The terminal device 110 can upload its own data to the server 120, and can also retrieve data from the server 120.

[0084] Among them, terminal device 110 may include, but is not limited to, mobile phones, tablets, laptops, computers, voice interaction devices, home appliances, vehicle terminals, aircraft, remote driving terminals, etc.; server 120 may be an independent physical server, or a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDN (Content Delivery Network), and big data and artificial intelligence platforms. This document does not restrict the specific form of terminal devices and servers.

[0085] It should be noted that, Figure 1The number of terminal devices 110 and servers 120 is merely illustrative; any number of terminal devices 110 and servers 120 can be used as needed.

[0086] In an exemplary embodiment, the data processing method provided in the embodiments of this application can be executed by a terminal device 110. For example, the terminal device 110 can first search for the target color function corresponding to the page element in the style code corresponding to the page, wherein the target color function contains a color group parameter corresponding to the page element, and obtain the color value of the page element under multiple theme modes from the color group corresponding to the color group parameter, wherein each color group contains color values ​​corresponding to multiple theme modes respectively, so as to generate a style sheet corresponding to each theme mode based on the color value of the page element under each theme mode, generate a style file corresponding to the page according to the style sheets corresponding to the multiple theme modes respectively, obtain the target theme mode to be displayed from the multiple theme modes, and render the color of the page element based on the color value contained in the style sheet corresponding to the target theme mode in the style file. During the development of style code, you only need to define the color group parameters corresponding to the page elements in the target color function. This allows you to determine the page elements that need style generation based on the target color function, avoiding errors and omissions during style generation. Furthermore, based on the color group parameters, you can automatically find the color values ​​of the page elements in various theme modes and automatically generate style sheets corresponding to each theme mode. This improves the efficiency and accuracy of style sheet generation, eliminates the need to manually write style sheets for each theme mode, saves development costs, and enhances the theme mode switching effect.

[0087] In another exemplary embodiment, server 120 may have functions similar to terminal device 110 to execute the data processing method provided in this application embodiment. For example, server 120 may first search for the target color function corresponding to the page element in the style code corresponding to the page, and obtain the color value of the page element in multiple theme modes from the color group corresponding to the color group parameter, so as to generate a style sheet corresponding to each theme mode based on the color value of the page element in each theme mode, generate a style file corresponding to the page according to the style sheets corresponding to the multiple theme modes, obtain the target theme mode to be displayed from the multiple theme modes, and render the color of the page element based on the color value contained in the style sheet corresponding to the target theme mode in the style file.

[0088] In another exemplary embodiment, the terminal device 110 and the server 120 can also jointly execute the data processing method provided in the embodiments of this application. For example, after obtaining protein requirement information, the terminal device can send the protein requirement information to the server 120. The server 120 can first search for the target color function corresponding to the page element in the style code corresponding to the page, and obtain the color value of the page element in multiple theme modes from the color group corresponding to the color group parameter, so as to generate a style table corresponding to each theme mode based on the color value of the page element in each theme mode, and generate a style file corresponding to the page according to the style tables corresponding to the multiple theme modes. Then, the server 120 can transmit the style file to the terminal device 110, and the terminal device 110 obtains the target theme mode to be displayed from the multiple theme modes, and renders the color of the page element based on the color value contained in the style table corresponding to the target theme mode in the style file.

[0089] The embodiments of this application involve user-related data such as target theme patterns. When the methods of this application are applied to specific products or technologies, user permission or consent is obtained, and the extraction, use and processing of related data comply with local security standards and local laws and regulations.

[0090] See Figure 2 , Figure 2 This is a flowchart illustrating a data processing method in an exemplary embodiment of this application. The method can be applied to... Figure 1 The implementation environment shown can be composed of Figure 1 The terminal device 110 in the implementation environment shown can execute this, or it can be performed by... Figure 1 The server 120 in the implementation environment shown can perform the operation, or it can be performed by... Figure 1 The terminal device 110 and server 120 in the implementation environment shown execute together.

[0091] like Figure 2 As shown, in an exemplary embodiment, the data processing method may include steps S210-S240, which are described in detail below:

[0092] Step S210: Locate the target color function corresponding to the page element from the style code corresponding to the page; wherein, the target color function contains the color group parameter corresponding to the page element.

[0093] It should be noted that "page" refers to the display interface, which can be the display interface of a mini-program, application, etc. Applications include, but are not limited to, web applications and native applications.

[0094] A page contains various page elements, such as borders, backgrounds, text, and hyperlinks. The corresponding style code refers to the code used to describe the page's style; this can be code developed based on Cascading Style Sheets (CSS), i.e., CSS code. CSS is a language used to describe the styles of Hyper Text Markup Language (HTML) or Extensible Markup Language (XML) documents.

[0095] Page styles include the styles of page elements, which include, but are not limited to, the colors of page elements. Correspondingly, the style code contains the color function corresponding to the page element, that is, the target color function. The target color function is used to define the color corresponding to the page element, and it can contain the color parameters corresponding to the page element.

[0096] It should be understood that to enrich the page display, multiple theme modes can be set, with page elements displaying different colors in different theme modes, thus giving users more choices and meeting their needs. The number of theme modes can be flexibly set according to actual needs. For example, in daytime scenes with ample light, users may prefer bright color schemes, while in nighttime scenes with lower light, users may prefer comfortable dark tones. Therefore, a light mode and a dark mode can be set. The light mode can correspond to warm colors, and the dark mode can correspond to dark colors, allowing users to choose the light mode in well-lit conditions and the dark mode in low-light conditions to protect their eyes. Of course, three, four, or even more theme modes can also be set.

[0097] When multiple theme modes are included, to reduce the difficulty of style code development, the color parameters corresponding to page elements can be color group parameters. The color group parameter is used to look up color groups, and each color group contains color values ​​corresponding to multiple theme modes. The color group parameter corresponding to the page element contains the color values ​​corresponding to the page element under each of the multiple theme modes. The color group parameter can be a color group itself, or it can be the identifier information of a color group, i.e., the target color group identifier. For example, the color definition function for page element 'a' could be:

[0098] a{color:getColor(GBK05A);}

[0099] Here, getColor(GBK05A) is the target color function, and GBK05A is the color group identifier, which contains color values ​​corresponding to various theme modes.

[0100] Step S220: Obtain the color values ​​of page elements under various theme modes from the color groups corresponding to the color group parameters; wherein each color group contains color values ​​corresponding to various theme modes respectively.

[0101] Each color group contains color values ​​corresponding to multiple theme modes. That is, the number of color values ​​in a color group is the same as the number of theme modes. For example, if there are two theme modes, the color group can be {#646464, #808080}. The color values ​​in the color group can be arranged in a set order, so that the theme mode corresponding to the color value can be determined according to the arrangement position.

[0102] Based on the color group parameter, the corresponding color group can be found, and the color value of each theme mode in the color group can be used as the color value of the page element in that theme mode.

[0103] Step S230: Based on the color values ​​of page elements in each theme mode, generate a style sheet corresponding to each theme mode, and generate a style file corresponding to the page based on the style sheets corresponding to the various theme modes.

[0104] Each theme mode's stylesheet contains the color values ​​for page elements within that theme mode. To determine which page element corresponds to each color value, the stylesheet also includes the element's identifier. Stylesheets can contain style declarations, such as CSS declarations, which describe the color values ​​for page elements within that theme mode. The page's style file contains stylesheets for each of the various theme modes.

[0105] In an optional implementation, style sheet generation rules can be set. Based on these rules and the color values ​​of page elements in each theme mode, a style sheet corresponding to each theme mode can be generated. The specific content of the style sheet generation rules can be flexibly set according to actual needs. Optionally, the style sheet generation rules can include style sheet templates. By assigning the identifiers of page elements and their color values ​​in each theme mode to the style sheet templates, a style sheet corresponding to each theme mode can be obtained.

[0106] Step S240: Obtain the target theme mode to be displayed from multiple theme modes, and render the color of the page elements based on the color values ​​contained in the style sheet corresponding to the target theme mode in the style file.

[0107] During the page rendering process, the current theme mode to be displayed, i.e. the target theme mode, can be determined from multiple theme modes. The style sheet corresponding to the target theme mode can then be found in the style file, and the colors of the page elements can be rendered according to the color values ​​contained in the style sheet corresponding to the target theme mode.

[0108] In an optional implementation, the process of obtaining the target theme mode to be displayed from multiple theme modes may include: if a theme switching instruction is detected, the theme mode to be switched can be determined according to the theme switching instruction and the current theme mode, and the switched theme mode can be used as the target theme mode, thereby rendering the color of the page elements based on the color values ​​contained in the style sheet corresponding to the target theme mode.

[0109] Optionally, the theme switching command can be triggered by the user. Correspondingly, if a user trigger event on the theme switching control is detected, a theme switching command is generated. The theme switching control can be a theme switching button, etc., which can be displayed on the page, or it can be displayed in the page settings interface after the user triggers the settings control. The specific type of the trigger event of the theme switching control can be flexibly set according to actual needs. For example, the trigger event can be at least one of the following: click event, long press event, double-click event, etc. In other words, the user can trigger the generation of the theme switching command by clicking, long-pressing, or double-clicking the theme switching control.

[0110] In order to detect the triggering event of the theme switching control, an event detector for the theme switching control can be set. The event detector is used to detect the theme switching control. If a triggering event corresponding to the theme switching control is detected, the corresponding program can be notified to execute step S240. Optionally, the event detector can be written based on JavaScript. JavaScript is a widely used programming language, mainly used for web development to achieve dynamic effects and interactivity on the client side.

[0111] Optionally, the theme switching command can be automatically generated. Correspondingly, it can detect whether the set theme switching conditions are met; if so, a theme switching command is generated. The specific content of the theme switching conditions can be flexibly set according to actual needs. For example, the theme mode can be set to switch based on time factors, environmental factors, etc. For instance, multiple time periods can be set with corresponding theme modes, and a theme switching command can be generated at the start time of each time period to switch to the theme mode of the corresponding time period. For example, the theme mode for daytime (e.g., 8:00-19:00) can be set to light mode, and the theme mode for nighttime (e.g., 19:01-7:59) can be set to dark mode. If the current time is 8:00, a theme switching command is generated to switch the current theme mode to light mode; if the current time is 19:01, a theme switching command is generated. This allows the current theme mode to be switched to dark mode, thus enabling automatic theme mode switching over time. Environmental factors include light intensity, and multiple theme modes can be set for different light intensities. If the light intensity in the current environment does not match the current theme mode, a theme switching command is generated to switch to the theme mode corresponding to the light intensity in the current environment. For example, it can be set to light mode for strong light and dark mode for weak light. If the current environment has weak light and the current theme mode is light mode, a theme switching command is generated to switch the theme mode to dark mode, thus enabling the theme mode to switch automatically with the light intensity.

[0112] In an optional implementation, the process of generating style files in steps S210-S230 can be encapsulated in a PostCSS plugin. This allows the PostCSS plugin to execute steps S210-S230, thus achieving automatic generation of style files. The PostCSS plugin is the core of its functionality; it extends the capabilities of PostCSS and enables the execution of various tasks.

[0113] exist Figure 2 In the illustrated embodiment, during the development of the style code corresponding to the page, it is only necessary to define the color group parameters corresponding to the page elements in the target color function. This allows the page elements that need to be styled to be determined based on the target color function, avoiding errors and omissions during style generation. Furthermore, the color values ​​of the page elements in various theme modes are automatically found based on the color group parameters, and style sheets corresponding to each theme mode are automatically generated. This improves the efficiency and accuracy of style sheet generation, eliminates the need to manually write style sheets for each theme mode, saves development costs, and enhances the theme mode switching effect.

[0114] In one exemplary embodiment, see Figure 3 , Figure 3 Is Figure 2 The flowchart illustrates a data processing method proposed based on the given information. This method can be applied to... Figure 1 The implementation environment shown can be composed of Figure 1 The terminal device 110 in the implementation environment shown can execute this, or it can be performed by... Figure 1 The server 120 in the implementation environment shown can perform the operation, or it can be performed by... Figure 1 The terminal device 110 and server 120 in the implementation environment shown execute together.

[0115] like Figure 3 As shown, if the color group parameters include the target color group identifier, step S220 may include step S310, which is described in detail below:

[0116] Step S310: From the color group identifiers and corresponding color groups contained in the color file, find the color group corresponding to the target color group identifier, and obtain the color value of the page element in multiple theme modes.

[0117] The color file contains color group identifiers and the corresponding color groups. Based on the target color group identifier, the color file is searched to obtain the corresponding color group. The color value corresponding to each theme mode in the color group is used as the color value of the page element in that theme mode.

[0118] In an optional implementation, the color file may directly contain a color group identifier and multiple color values ​​(i.e., a color group) corresponding to that identifier. Then, a search is performed in the color file based on the target color group identifier to obtain multiple color values. Based on the theme mode corresponding to each of these color values, the color value of the page element in each theme mode is determined. For example, assuming the color groups are arranged according to the color values ​​corresponding to light mode and dark mode, and the color group corresponding to the target color group identifier in the color file is {#646464, #808080}, then #646464 is used as the color value of the page element in light mode, and #808080 is used as the color value of the page element in dark mode.

[0119] In an optional implementation, the color file contains a color group file and a color value file. Under this condition, the process of searching for the color group corresponding to the target color group identifier from the color group identifiers and their corresponding color groups contained in the color file to obtain the color value of the page element in multiple theme modes may include:

[0120] From the mapping relationship between color group identifiers and color identifier sets contained in the color group file, find the target color identifier set corresponding to the target color group identifier; where each color identifier set contains color identifiers corresponding to multiple theme modes respectively;

[0121] From the mapping relationship between color identifiers and color values ​​contained in the color value file, find the color value corresponding to the color identifier of each theme mode in the target color identifier set, and obtain the color value of the page element in each theme mode.

[0122] The color group file contains a mapping between color group identifiers and color identifier sets. Each color identifier set contains identifiers (i.e., color identifiers) for color values ​​corresponding to various theme modes. Based on the target color group identifier, a search is performed in the color group file to obtain the target color identifier set. Color identifiers are used to identify color values. The color identifiers in each color identifier set can be arranged in a set order, thus determining the theme mode corresponding to each color identifier based on the order of the color identifiers.

[0123] The color value file contains the mapping relationship between color identifiers and color values. Based on each color identifier in the target color identifier set, a search is performed in the color value file, and the found color value is used as the color value of the page element in the corresponding theme mode.

[0124] For example, a color value file can be as follows:

[0125] {

[0126] "C01":"#eee",

[0127] "C02":"#111",}

[0128] Among them, "C01" and "C02" are color identifiers, and "#eee" and "#111" are color values.

[0129] With two theme modes included, the color group file can be as follows:

[0130] {

[0131] "G01":["C01","C02"],}

[0132] "G01" is the color group identifier.

[0133] The color definition function for the page element 'a' in the style code can be as follows:

[0134] a{

[0135] color:cc(G01);

[0136] }

[0137] Where cc(G01) is the target color function, and its color variable is the color group identifier G01.

[0138] In an optional implementation, the color file can be modified, and correspondingly, the data control method may further include the following steps:

[0139] Get color file update request;

[0140] Based on the color file update request, update the color groups contained in the color file to obtain the updated color file;

[0141] Based on the updated color file and style code, regenerate the corresponding style file for the page.

[0142] The color file update request is used to request an update to the data contained in the color file. This can be triggered by the user, for example, the page's design team can modify the color file. In this way, the page's code development team only needs to know the color group identifier during the style code development process, without needing to know the specific color value. The design team can specifically maintain the color identifier corresponding to the color group identifier, the color value corresponding to the color identifier, etc., and adjust the color value as needed. The adjustment of the color value will not affect the style code, and there is no need to redevelop the style code. This achieves decoupling of color value and color group, and decoupling of style code development and color value modification, thus saving development costs.

[0143] Updating a color file includes updating the color groups within the color file. For example, it can update the color identifiers in the color group file, or update the color identifiers and color values ​​in the color group file. For instance, "G01":["C01","C02"] can be updated to "G01":["C01","C03"], and "C01":"#eee" can be updated to "C01":"#222", etc.

[0144] After obtaining the updated color file, since the color groups have changed, the corresponding style file for the page can be regenerated. The process of regenerating the style file is similar to the process described above, except that it uses the target color group identifier contained in the target color function of the style code to search for the color group corresponding to the target color group identifier in the updated color file, thus obtaining the color values ​​of the page elements under various theme modes.

[0145] Optionally, updating the color file may also include adding or deleting color group identifiers and the color values ​​corresponding to those color group identifiers.

[0146] In an optional implementation, a color management platform can be developed to manage color files and provide a user input interface. Design teams or users can use this interface to update color files within the color management platform, thereby enabling customizable theme colors, flexible color configurations, and meeting diverse customer needs. This allows for user-defined theme colors.

[0147] It should be noted that, Figure 3 The specific implementation details of steps S210, S230-S240 shown can be found in [reference]. Figure 2 Steps S210, S230-S240 shown will not be repeated here.

[0148] exist Figure 3 In the illustrated embodiment, the color file is decoupled from the style code, so that the specific color values ​​do not need to be known during the development of the style code. After the style code is developed, the color values ​​in the color file can be adjusted without redeveloping the style code, which improves the flexibility and customizability of the theme colors and saves development costs.

[0149] In one exemplary embodiment, see Figure 4 , Figure 4 Is Figure 1 The flowchart illustrates a data processing method proposed based on the given information. This method can be applied to... Figure 1 The implementation environment shown can be composed of Figure 1 The terminal device 110 in the implementation environment shown can execute this, or it can be performed by... Figure 1 The server 120 in the implementation environment shown can perform the operation, or it can be performed by... Figure 1 The terminal device 110 and server 120 in the implementation environment shown execute together.

[0150] like Figure 4 As shown, step S210 may include steps S410-S430, which are described in detail below:

[0151] Step S410: Compile the style code corresponding to the page.

[0152] After obtaining the style code corresponding to the page, the style code can be compiled to convert it into executable code.

[0153] Step S420: During the compilation process, the style code is parsed to obtain the abstract syntax tree corresponding to the style code.

[0154] An Abstract Syntax Tree (AST) is an abstract representation of the syntax structure of source code. It represents the syntax structure of a programming language in a tree-like form, with each node in the tree representing a structure in the source code.

[0155] During the compilation of style code, it can be parsed, transforming the textual identifiers of the style code into a tree-like data structure, namely an abstract syntax tree. This data structure represents the syntactic structure of the style code in an abstract way, without including the specific formatting or textual details of the style code. During the transformation process, lexical analysis can be performed on the style code, breaking the code string down into individual lexical units (tokens). Lexical units are the smallest elements that constitute code, such as variable names, operators, parentheses, etc. Next, parsing is performed, which transforms the token stream into an abstract syntax tree.

[0156] Step S430: Traverse each node in the abstract syntax tree to obtain the target color function contained in each node.

[0157] Each node in the abstract syntax tree is examined to determine whether it contains the target color function, thus locating the target color function from the abstract syntax tree. The target color function is a function whose color variable is a color group parameter; the specific type of function and its name can be flexibly set according to actual needs.

[0158] In an optional implementation, after obtaining the abstract syntax tree corresponding to the style code of the page, the abstract syntax tree can be modified. Correspondingly, step S420, which involves traversing each node in the abstract syntax tree to obtain the target color function contained in each node, may include:

[0159] Obtain the modification operations on the abstract syntax tree, modify the abstract syntax tree according to the modification operations, and obtain the modified abstract syntax tree;

[0160] Traverse each node in the modified abstract syntax tree to obtain the target color function contained in each node.

[0161] The modification operation can be triggered by developers. Developers can view the abstract syntax tree (API) through a configured plugin and trigger the modification operation to modify the API. Modifications to the API include, but are not limited to, modifying selectors, style declarations, style rules, and styles within the API to implement custom style processing logic. Selectors define which page elements the style rules should apply to; these can be CSS selectors. Style rules are the basic building blocks of a stylesheet, defining how page elements are displayed; these can be CSS rules. Style declarations are the core component of a stylesheet, defining how page elements are displayed. Style declarations contain properties and their corresponding values, defining the styles of page elements. Properties include, but are not limited to, color, font size, and margin.

[0162] Under these conditions, step S230, which involves generating the style file corresponding to the page based on the style sheets corresponding to various theme modes, may include:

[0163] Based on the style sheets corresponding to various theme modes and the modified abstract syntax tree, generate the style files corresponding to the page.

[0164] In the modified abstract syntax tree, the target color function of page elements can be replaced with style sheets corresponding to various theme modes. Then, based on the replaced abstract syntax tree, a transformation is performed to obtain the corresponding style file for the page. The transformation methods include, but are not limited to, stringification.

[0165] For example, see Figure 5 As shown, when the style code is CSS code, the process of generating the style file includes: parsing the CSS code corresponding to the page to obtain an abstract syntax tree (Abstract Syntax Tree); traversing the Abstract Syntax Tree and modifying it during the traversal; developers can modify the Abstract Syntax Tree; and converting the target color function into style sheets corresponding to various theme modes. Then, the Abstract Syntax Tree is transformed into readable CSS code in a tree structure, generating the style file corresponding to the page.

[0166] It should be noted that, Figure 4 The specific implementation details of steps S220-S240 shown can be found in [reference]. Figure 2 Steps S220-S240 shown are not repeated here.

[0167] exist Figure 4In the illustrated embodiment, during the compilation process of the style code corresponding to the page, style sheets corresponding to various theme modes are generated, thereby obtaining the style file corresponding to the page. This allows for direct rendering of page elements' colors based on the target theme mode to be displayed, by retrieving color values ​​from the corresponding style sheet. This improves color rendering efficiency and avoids the inefficiency of generating style sheets for different theme modes and then switching them. Furthermore, traversing the abstract syntax tree to obtain the target color function for the page elements requiring style sheet generation avoids false positives and false negatives, improving the accuracy of the style sheets and consequently enhancing the accuracy of theme mode display.

[0168] In one exemplary embodiment, see Figure 6 , Figure 6 Is Figure 1 The flowchart illustrates a data processing method proposed based on the given information. This method can be applied to... Figure 1 The implementation environment shown can be composed of Figure 1 The terminal device 110 in the implementation environment shown can execute this, or it can be performed by... Figure 1 The server 120 in the implementation environment shown can perform the operation, or it can be performed by... Figure 1 The terminal device 110 and server 120 in the implementation environment shown execute together.

[0169] like Figure 6 As shown, step S210 may include step S610, which is described in detail below:

[0170] Step S610: Iterate through the style declarations contained in the style code corresponding to the page to obtain the style declaration to be processed, which contains the target color function.

[0171] In style code, the color attributes of page elements are usually defined based on style declarations. Correspondingly, the target color function is usually deployed in the style declaration. Therefore, we can iterate through the style declarations in the style code of the page to obtain the style declaration to be processed. The style declaration to be processed is the style declaration that contains the target color function, that is, the color declaration. In other words, the style declaration to be processed defines the color attributes of page elements, and the attribute value of the color attribute is the target color function.

[0172] Under these conditions, step S230 may include steps S620-S640, which are detailed below:

[0173] Step S620: Generate a style declaration corresponding to each theme mode based on the color value of the page element in each theme mode; wherein, the style declaration corresponding to each theme mode contains the color value of the page element in each theme mode.

[0174] The style declaration for each theme mode defines the color values ​​of page elements within that theme mode. It includes the color values ​​of the page elements for each theme mode. Optionally, the style declaration for each theme mode may also include the page element's identifier and color attributes. For example, the style declaration for the page element "a" could be as follows:

[0175] a{

[0176] color:#646464;

[0177] }

[0178] It declares the color attribute value of the page element a as #646464.

[0179] The style declaration generation method for each theme mode can be flexibly set according to actual needs.

[0180] In an optional example, the style declarations to be processed can be copied to obtain copied style declarations. The number of copied style declarations can match the number of theme modes, ensuring a one-to-one correspondence between theme modes and copied style declarations. Then, the target color function contained in the style declaration is modified to the color value of the page element in the corresponding theme mode, thus obtaining the style declaration for the corresponding theme mode. For example, assuming the theme modes include light mode and dark mode, for the following style declarations to be processed:

[0181] a{

[0182] color:cc(G01);

[0183] }

[0184] You can copy the style declaration to be processed, and replace the target color function cc(G01) in the copied style declaration with the color value "#eee" for light mode and the color value "#111" for dark mode, respectively, to obtain the style declaration corresponding to light mode:

[0185] a{

[0186] color:#eee;

[0187] }

[0188] Style declarations for dark mode:

[0189] a{

[0190] color:#111;

[0191] }

[0192] In another optional example, a style declaration template can be set up to assign the identifier of the page element and the color value of the page element in each theme mode to the style declaration template, thereby obtaining the style declaration corresponding to that theme mode.

[0193] Step S630: Generate a style sheet corresponding to each theme mode based on the style declaration corresponding to each theme mode.

[0194] Each theme mode's stylesheet contains style declarations for that theme mode.

[0195] Step S640: Generate the style file corresponding to the page based on the style sheets corresponding to the various theme modes.

[0196] The specific method for generating the style file can be flexibly set according to actual needs. Optionally, the style declarations to be processed in the style code can be replaced with style sheets corresponding to various theme modes to obtain the style file.

[0197] In an optional implementation, in step S610, the style code can be parsed first to obtain the abstract syntax tree corresponding to the style code, and then the style declarations contained in each node of the abstract syntax tree can be traversed to obtain the style declarations to be processed. Correspondingly, in step S640, a style file can be generated based on the abstract syntax tree and the style sheets corresponding to various theme modes. The process of obtaining the abstract syntax tree and the specific process of generating the style file based on the abstract syntax tree can be found in the description of the foregoing embodiments, and will not be repeated here.

[0198] In an optional implementation, a page contains multiple page elements. The style declarations of these elements under each theme mode can be categorized based on whether they belong to the same theme mode, resulting in style declaration groups. In other words, a style declaration group contains style declarations of multiple page elements under the same theme mode. For example, assuming the theme modes include light mode and dark mode, and the page elements include borders and characters, then the style declaration group corresponding to light mode contains style declarations of borders and characters under light mode; the style declaration group corresponding to dark mode contains style declarations of borders and characters under dark mode.

[0199] It should be noted that, Figure 6 The specific implementation details of steps S220 and S240 shown can be found in [reference]. Figure 2 Steps S220 and S240 shown will not be repeated here.

[0200] exist Figure 6In the illustrated embodiment, by searching for the style declaration to be processed that contains the target color function, the color value of the page element in each theme mode can be determined based on the color group parameter corresponding to the target color function contained in the style declaration to be processed. Then, a style declaration corresponding to each theme mode is generated based on the color value, thereby enabling the rendering of the color value of the page element based on the style declaration corresponding to each theme mode. This improves the accuracy of the target color function search and the efficiency of style declaration generation.

[0201] In one exemplary embodiment, see Figure 7 , Figure 7 Is Figure 6 The flowchart illustrates a data processing method proposed based on the given information. This method can be applied to... Figure 1 The implementation environment shown can be composed of Figure 1 The terminal device 110 in the implementation environment shown can execute this, or it can be performed by... Figure 1 The server 120 in the implementation environment shown can perform the operation, or it can be performed by... Figure 1 The terminal device 110 and server 120 in the implementation environment shown execute together.

[0202] like Figure 7 As shown, step S610 may include step S710, which is described in detail below:

[0203] Step S710: Based on the style declaration corresponding to each theme mode, construct the style rules corresponding to each theme mode, and generate the style sheet corresponding to each theme mode according to the style rules corresponding to each theme mode.

[0204] In other words, the stylesheet corresponding to each theme mode contains the style rules corresponding to that theme mode, and the style rules corresponding to each theme mode contain the style declarations corresponding to that theme mode. For a detailed description of the style rules, please refer to the description in the foregoing embodiments; it will not be repeated here.

[0205] Under these conditions, step S640 may include steps S720-S730, which are detailed below:

[0206] Step S720: Replace the style declarations to be processed contained in the style code with style sheets corresponding to various theme modes to obtain the updated style code.

[0207] The style declarations to be processed in the style code are replaced with style sheets corresponding to various theme modes. In other words, the updated style code contains multiple style sheets corresponding to different theme modes.

[0208] Step S730: Based on the updated style code, generate the style file corresponding to the page.

[0209] Based on the updated style code, generate the corresponding style file.

[0210] Optionally, the style rules corresponding to each theme mode may include attribute selectors corresponding to each theme mode. The attribute selectors are used to indicate the theme mode to which the style declaration applies. The style declaration contains attributes and attribute values ​​to describe the corresponding styles.

[0211] In an optional implementation, to improve the accuracy and timeliness of theme switching, the process of constructing style rules corresponding to each theme mode based on the style declaration for each theme mode may include:

[0212] In the root node of the page's HTML file, generate attribute selectors for each theme mode;

[0213] Based on the attribute selector corresponding to each theme mode, construct style rules corresponding to each theme mode;

[0214] Add the style declarations for each theme mode to the style rules for that theme mode.

[0215] To determine which theme mode a style declaration applies to, a style declaration corresponding to the theme mode is added to the style rule to which the style declaration belongs. This defines which theme mode the style declaration applies to. The attribute selector can contain theme mode attributes and their corresponding attribute values; that is, each style rule corresponding to each theme mode contains an attribute selector and a style declaration for that theme mode. The attribute selector is deployed in the root node of the HTML file. The root node of the HTML file is the `<head>` element, which identifies the beginning and section number of the HTML document. It is the starting point of the HTML DOM node tree and provides access to the entire document structure. Writing the attribute selector corresponding to each theme mode into the root node of the page's HTML file ensures that the target theme mode is promptly passed to the HTML file, enabling theme switching for all page elements and improving the globality, real-time nature, and accuracy of theme switching.

[0216] Given that the attribute selector corresponding to the theme mode is written to the root node of the HTML file, the process of rendering the color of page elements based on the color values ​​contained in the stylesheet corresponding to the target theme mode in the style file can include:

[0217] Input the target theme pattern into the root node to find the target attribute selector corresponding to the target theme pattern;

[0218] Trigger the style rule to which the target attribute selector belongs, and render the color of the page element based on the color value in the style declaration contained in the triggered style rule.

[0219] The target theme pattern is input into the root node, triggering the target attribute selector corresponding to that theme pattern. This causes the page elements to be rendered with colors based on the color values ​​in the style declarations of the target attribute selector. In other words, after the target theme pattern is passed to the root node, the target attribute selector corresponding to that theme pattern is triggered, making the style rules corresponding to the target attribute selector effective, thus achieving theme switching. Optionally, a specific function can be set to update the attribute values ​​corresponding to the theme pattern in the root node to the target theme pattern, thereby making the attribute selector corresponding to the target theme pattern effective. For example, if an event detector is included, after the event detector detects the triggering operation of the theme switching space, it calls a specific function to modify the attribute values ​​corresponding to the theme pattern in the root node.

[0220] Optionally, the target theme mode can also be determined based on the theme switching command and the currently valid theme mode in the root node. For example, assuming the theme modes include dark mode and light mode, and the currently valid theme mode is dark mode when the theme switching command is received, then the target theme mode is determined to be light mode.

[0221] In an optional implementation, to save code resources, the process of constructing style rules for each theme mode based on the style declarations for each theme mode, and generating style sheets for each theme mode based on the style rules for each theme mode, may include:

[0222] Obtain the first theme pattern and the second theme pattern other than the first theme pattern from multiple theme patterns;

[0223] Generate a stylesheet corresponding to the first theme pattern based on the style declaration corresponding to the first theme pattern.

[0224] Based on the style declarations corresponding to the second theme pattern, construct the style rules corresponding to the second theme pattern, and generate the style sheet corresponding to the second theme pattern based on the style rules corresponding to the second theme pattern.

[0225] The first theme mode can be the default theme mode, and the second theme mode can be a non-default theme mode. The stylesheet corresponding to the first theme mode can only contain the style declarations corresponding to the first theme mode, without the attribute selectors, so that the style declarations corresponding to the first theme mode are effective under default conditions. The stylesheet corresponding to the second theme mode contains the style rules corresponding to the second theme mode. The style rules contain the attribute selectors and style declarations corresponding to the second theme mode, so that under other conditions, the style declarations corresponding to the second theme mode can be triggered based on the attribute selectors, thereby realizing the switching of theme modes. The number of second theme modes can be flexibly set according to actual needs. Optionally, the stylesheets corresponding to the first theme mode are arranged before the stylesheets corresponding to the second theme mode.

[0226] For example, see the following: assuming light mode is the first theme mode and dark mode is the second theme mode, the stylesheet for the page element "a" is as follows:

[0227] a{

[0228] color:#646464;

[0229] }

[0230] html[data-theme='dark']a{

[0231] color:#808080;

[0232] }

[0233] The code above contains style declarations for "light" mode and style rules for "dark" mode. The style declaration for "light" mode defines the color value of the page element "a" as #646464 in "light" mode. The style rule for "dark" mode contains the attribute selector html[data-theme='dark'], where "html" is the root node of HTML. Under the condition that the attribute value "data-theme" of the theme is set to "dark" mode, the color value of the page element "a" in the style declaration is #808080.

[0234] In an optional implementation, a single page contains multiple page elements, and correspondingly, style sheets for each page element under each theme mode. To improve the speed of theme mode switching, style sheets can be categorized according to theme mode, and style sheets of the same category can be arranged in the same position in the style file. Attribute selectors in the style sheets of multiple page elements under a second theme mode can be merged, thereby saving code resources; that is, multiple page elements share the same attribute selector. Style sheets of the same category correspond to the same theme mode. For example, assuming there are light and dark modes, and page elements a and b, the corresponding style sheets in the style file can be as follows:

[0235] a{

[0236] color:#646464;

[0237] }

[0238] b{

[0239] color:#636363;

[0240]

[0241] It should be noted that, Figure 7 The specific implementation details of steps S220 and S240 shown can be found in [reference]. Figure 2 Steps S220 and S240 are shown. Figure 7 The specific implementation details of steps S620-S630 shown can be found in [reference]. Figure 6 Steps S620-S630 shown are not repeated here.

[0242] exist Figure 7 In the illustrated embodiment, style rules for each theme mode are constructed based on the style declaration corresponding to each theme mode, and style sheets for each theme mode are generated according to the style rules corresponding to each theme mode. This can improve the accuracy of the style sheets, thereby improving the display effect of the theme mode and the accuracy of theme mode switching.

[0243] In one exemplary embodiment, see Figure 8 , Figure 8 Is Figure 1 The flowchart illustrates a data processing method proposed based on the given information. This method can be applied to... Figure 1 The implementation environment shown can be composed of Figure 1 The terminal device 110 in the implementation environment shown can execute this, or it can be performed by... Figure 1 The server 120 in the implementation environment shown can perform the operation, or it can be performed by... Figure 1The terminal device 110 and server 120 in the implementation environment shown execute together.

[0244] like Figure 8 As shown, the data processing method may further include steps S810-S830, which are described in detail below:

[0245] Step S810: Obtain the color group parameters corresponding to the page element, as well as the style code template; the style code template contains color definition functions.

[0246] Color group parameters can be set by the designer. The style code template contains another style code template, which in turn contains a color definition template. The color definition template contains a target color function template and a page element template. The page element template is used to set the page elements for which colors need to be defined, and the target color function template is used to set the color parameters corresponding to the page elements.

[0247] Style code templates can be extracted from style code developed by developers or developed directly by developers.

[0248] Step S820: Assign the color group parameter corresponding to the page element to the target color function template contained in the color definition template, and assign the identifier corresponding to the page element to the page element template contained in the color definition template.

[0249] Assign the color group parameters corresponding to the page element to the target color function template to obtain the target color function corresponding to the page element. Assign the identifier corresponding to the page element to the page element template to obtain the color definition function corresponding to the page element. This color definition function contains the identifier of the page element and the target color function corresponding to the page element. The target color function contains the color group parameters corresponding to the page element.

[0250] Step S830: Based on the assigned color definition template, generate the corresponding style code for the page.

[0251] Based on the assigned color definition template, the corresponding style code for the page can be obtained.

[0252] It should be noted that, Figure 8 The specific implementation details of steps S210-S240 shown can be found in [reference]. Figure 2 Steps S210-S240 shown will not be repeated here.

[0253] exist Figure 8In the illustrated embodiment, the color group parameters corresponding to the page elements and the style code template are obtained. The style code template contains color definition functions. The color group parameters corresponding to the page elements are assigned to the target color function template contained in the color definition template, and the identifier corresponding to the page elements is assigned to the page element template contained in the color definition template. Based on the assigned color definition template, the style code corresponding to the page is generated. Thus, style code corresponding to different color group parameters can be automatically generated, realizing automatic generation of style code and high customization of theme mode.

[0254] To better understand this invention, the following explanation uses a theme mode that includes dark mode and light mode as an example, which includes the following process:

[0255] 1. Obtain the color value file and color group file.

[0256] The color value file and color group file can be JSON files. The color value file contains color values ​​and their corresponding color identifiers. For example, a color value file can be as follows:

[0257] {

[0258] "C01":"#eee",

[0259] "C02":"#111",

[0260] ...}

[0261] Optionally, the color value file can be named `colors.json`.

[0262] The color group file contains a color group identifier, as well as color identifiers for light mode and dark mode respectively. For example, a color group file can be as follows:

[0263] {

[0264] "G01":["C01","C02"],}

[0265] Among them, "G01" is the color group identifier, "C01" is the color identifier in light mode, and "C02" is the color identifier in dark mode.

[0266] Optionally, the color group file can be named `groups.json`.

[0267] Color group files and color value files can be maintained by the page design team.

[0268] 2. Compiling CSS code

[0269] After obtaining the color value file and color group file, the CSS code can be compiled. The compilation process is as follows:

[0270] 2.1 Obtain the CSS code corresponding to the page.

[0271] During CSS development, it's necessary to write CSS code that supports dual-theme mode. This code includes color declarations, which contain properties and values. The property is the color `color`, and the value is a target color function. The color variable in the target color function is a color group identifier. This target color function can be a predefined color function that requires conversion, such as the `ss` function or the `getColor` function. The target color group identifier can be obtained from a color group file. This way, code developers only need to know the color group identifier and don't need to know the specific color values.

[0272] For example, the color declaration of the page element "a" in the CSS code is as follows:

[0273] a{color:cc(G01);}

[0274] Here, cc(G01) is the ss function, which is a user-defined function.

[0275] 2.2 Compiling the CSS code

[0276] To convert CSS code into machine code that a computer can execute, the CSS code can be compiled. During the compilation process, color declarations need to be transformed, converting the target color function into the color value of the page element in each mode. The specific process is as follows:

[0277] (1) Traversing CSS declarations: The `style.walkDecls` method can be used to traverse all CSS declarations in the abstract syntax tree. Optionally, the traversal code in the PostCSS plugin is as follows:

[0278] style.walkDecls(decl=>{})

[0279] Here, decl represents the CSS declaration currently being iterated over.

[0280] (2) Check Declaration Values: For the current CSS declaration `decl`, retrieve its property value and check if it contains the target color function. If not, return, skip subsequent processing, and iterate to the next CSS declaration; if it does, proceed with subsequent processing. Optionally, the detection code in the PostCSS plugin is as follows:

[0281] const value = decl.value / / Define the attribute value of decl.

[0282] if (!group.test(value)) { return} / / If value does not contain the target color function, return

[0283] (3) Get theme style values: If the property value contains the target color function, it indicates that the current CSS declaration supports dual-theme mode color declaration. You can call the `getValue` function to get the color values ​​in light theme mode and dark theme mode. The `getValue` function will calculate the corresponding color value based on the theme mode, the target color function, the color group file, and the color value file, and replace the target color function with the corresponding color value.

[0284] Before the replacement, you can define the replacement rules in the PostCSS plugin. Optionally, you can define the color variable to be replaced as a color variable defined based on the ss function, i.e., an ss variable. The corresponding code is as follows:

[0285] const reGroup=new RegExp(`\\b ss\\(([^)]+)\\)`,'g')

[0286] We use the `getColorValue` method to find all values ​​that use the `ss` variable and replace them with the color values ​​corresponding to the theme mode. The corresponding code is as follows:

[0287] const aValue=getColorValue(value,'a')

[0288] const bValue=getColorValue(value,'b')

[0289] (4) Generate the CSS declaration corresponding to the dark theme mode: Clone a new CSS declaration `darkDecl` and set its property value to the color value corresponding to the dark theme mode. The corresponding code can be as follows:

[0290] const aDecl=decl.clone({value:a})

[0291] (5) Generate CSS rules for the dark theme mode: Generate a new CSS rule for the dark theme mode based on the set rules. The corresponding code can be as follows:

[0292] bRule = postcss.rule({

[0293] selector:`html[data-theme="dark"]&`,

[0294] })

[0295] Here, html[data-theme="dark" is the attribute selector corresponding to the dark theme mode.

[0296] (6) Add the CSS declaration corresponding to the dark theme mode: If the CSS rule corresponding to the dark theme mode is successfully generated, add the CSS declaration corresponding to the dark theme mode to the rule, and insert the rule after the original CSS declaration (i.e., the decl currently being traversed). The corresponding code is as follows:

[0297] if(bRule){

[0298] bRule.append(darkDecl)

[0299] decl.after(bRule)

[0300] }

[0301] For example, the CSS declaration for the dark theme mode is:

[0302] a{

[0303] color:#111;

[0304] }

[0305] The CSS rule for the dark theme mode is: html[data-theme="dark"]

[0306] After adding the CSS declaration corresponding to the dark theme mode to the CSS rules corresponding to the dark theme mode, the resulting CSS rules are as follows:

[0307] html[data-theme="dark"a{

[0308] color:#111;

[0309] }

[0310] Then, add the above statement after the original CSS statement:

[0311] a{color:cc(G01);}

[0312] html[data-theme="dark"a{

[0313] color:#111;

[0314] }

[0315] (7) Replace the original declaration: Finally, clone a new declaration `aDecl` and set its value to the color value corresponding to the light theme mode, resulting in `bDecl`. Then, replace the original CSS declaration with `bDecl`, as shown in the following code:

[0316] const aDecl=decl.clone({value:aValue})

[0317] decl.replaceWith(aDecl)

[0318] Continuing from the previous example, after replacing the original CSS declaration, the resulting stylesheet is as follows:

[0319] a{

[0320] color:#eee;

[0321] }

[0322] html[data-theme='dark']a{

[0323] color:##111;

[0324] }

[0325] This generates corresponding theme styles for each CSS declaration containing the target color function, for both light and dark theme modes, thus compiling a{color:cc(G01);} into the above form.

[0326] In an optional example, see Figure 9 As shown, the stylesheet generation process may include: obtaining the PostCSS plugin, recognizing the syntax corresponding to the color properties in the CSS code through the PostCSS plugin, obtaining the corresponding color values ​​based on the color group identifiers contained in the syntax and the color value files and color group files contained in the configuration file, and thus generating a stylesheet based on the color values.

[0327] 3. Switching between theme modes

[0328] To implement theme mode switching, a theme switching button can be set up and displayed on the page. Users can trigger a theme switching event by clicking the button. Then, using JavaScript, an event detector is added to the theme switching control. When a user clicks the button, the event detector detects the click and triggers a function to modify the "data-theme" attribute value corresponding to the theme mode of the root node of the HTML file. In the triggered function, the current "data-theme" attribute value of the root node of the HTML file is first obtained (document.documentElement). Based on the current attribute value, the target attribute value after switching is determined. If the current value is dark, the "data-theme" attribute value is set to light; otherwise, it is set to dark. When the "data-theme" attribute value of the HTML root node changes, the corresponding attribute selector automatically takes effect, thus achieving automatic style switching between light and dark modes. Specifically, if the modified attribute value is dark, the attribute selector corresponding to dark automatically takes effect; if the modified attribute value is light, the attribute selector corresponding to dark automatically becomes ineffective. Optionally, the code for implementing theme mode switching can be as follows:

[0329] const themeSwitchBtn = document.getElementById('theme-switch-btn'); / / Event detector detects the trigger events of the theme switching control.

[0330] themeSwitchBtn.addEventListener('click',()=>{ / / If a click event is detected const htmlRoot=document.documentElement; / / Get the current data-theme property value of the root node.

[0331] const currentTheme=htmlRoot.getAttribute('data-theme');

[0332] if (currentTheme === 'dark') { htmlRoot.setAttribute('data-theme', 'light'); / / If the current data-theme attribute value is dark, then set the theme attribute value to light.

[0333] }else{htmlRoot.setAttribute('data-theme','dark');}}); / / If the current data-theme attribute value is not dark, set the theme attribute value to dark.

[0334] In this embodiment, style sheets corresponding to different theme modes can be automatically generated, reducing the workload of manually writing multiple sets of styles and improving the development efficiency and accuracy of style sheets. The design team can define color schemes independently of business flow logic and import them through JSON files, realizing flexible color customization to meet the changes in different scenarios and needs. Furthermore, the independent color files ensure the consistency and repeatability of the mapping relationship between color groups and color values, avoiding visual inconsistencies caused by color discrepancies. The dynamic switching of theme modes allows users to switch theme modes in real time according to personal preferences or different usage scenarios, enhancing the personalization and real-time nature of the user experience.

[0335] See Figure 10 , Figure 10 This is a block diagram illustrating a data processing apparatus according to an exemplary embodiment of this application. Figure 10 As shown, the device includes:

[0336] The lookup module 1010 is configured to find the target color function corresponding to the page element from the style code of the page; wherein, the target color function contains the color group parameter corresponding to the page element;

[0337] The acquisition module 1020 is configured to retrieve the color values ​​of page elements under various theme modes from the color groups corresponding to the color group parameters; wherein each color group contains color values ​​corresponding to various theme modes respectively;

[0338] The generation module 1030 is configured to generate a style sheet corresponding to each theme mode based on the color value of the page element in each theme mode, and generate a style file corresponding to the page based on the style sheets corresponding to multiple theme modes.

[0339] The rendering module 1040 is configured to obtain the target theme mode to be displayed from multiple theme modes, and render the colors of page elements based on the color values ​​contained in the stylesheet corresponding to the target theme mode in the style file.

[0340] In an exemplary embodiment, based on the foregoing scheme, and provided that the color group parameters include the target color group identifier, the acquisition module 1020 is specifically configured as follows:

[0341] From the color group identifiers and corresponding color groups contained in the color file, find the color group corresponding to the target color group identifier, and obtain the color value of the page element in various theme modes.

[0342] In an exemplary embodiment, based on the foregoing scheme, given that the color file contains a color group file and a color value file, the acquisition module 1020 is specifically configured as follows:

[0343] From the mapping relationship between color group identifiers and color identifier sets contained in the color group file, find the target color identifier set corresponding to the target color group identifier; where each color identifier set contains color identifiers corresponding to multiple theme modes respectively;

[0344] From the mapping relationship between color identifiers and color values ​​contained in the color value file, find the color value corresponding to the color identifier of each theme mode in the target color identifier set, and obtain the color value of the page element in each theme mode.

[0345] In one exemplary embodiment, based on the foregoing solution, the device further includes an update module, specifically configured as follows:

[0346] Get color file update request;

[0347] Based on the color file update request, update the color groups contained in the color file to obtain the updated color file;

[0348] Based on the updated color file and style code, regenerate the corresponding style file for the page.

[0349] In an exemplary embodiment, based on the foregoing scheme, the lookup module 1010 is specifically configured as follows:

[0350] Compile the style code corresponding to the page;

[0351] During the compilation process, the style code is parsed to obtain the abstract syntax tree corresponding to the style code;

[0352] By traversing each node in the abstract syntax tree, the target color function contained in each node is obtained.

[0353] In an exemplary embodiment, based on the foregoing scheme, the lookup module 1010 is specifically configured as follows:

[0354] Obtain the modification operations on the abstract syntax tree, modify the abstract syntax tree according to the modification operations, and obtain the modified abstract syntax tree;

[0355] Traverse each node in the modified abstract syntax tree to obtain the target color function contained in each node;

[0356] The specific configuration of the generation module 1030 is as follows:

[0357] Based on the style sheets corresponding to various theme modes and the modified abstract syntax tree, generate the style files corresponding to the page.

[0358] In an exemplary embodiment, based on the foregoing scheme, the lookup module 1010 is specifically configured as follows:

[0359] Iterate through the style declarations contained in the style code corresponding to the page to obtain the style declarations to be processed, which contain the target color function;

[0360] The specific configuration of the generation module 1030 is as follows:

[0361] Based on the color values ​​of page elements in each theme mode, generate style declarations corresponding to each theme mode; wherein, the style declarations corresponding to each theme mode contain the color values ​​of page elements in each theme mode;

[0362] Based on the style declarations corresponding to each theme mode, a style sheet corresponding to each theme mode is generated.

[0363] In an exemplary embodiment, based on the foregoing scheme, the generation module 1030 is specifically configured as follows:

[0364] Based on the style declarations corresponding to each theme mode, construct the style rules corresponding to each theme mode, and generate the style sheets corresponding to each theme mode according to the style rules corresponding to each theme mode.

[0365] Replace the unprocessed style declarations in the style code with style sheets corresponding to the various theme modes to obtain the updated style code;

[0366] Based on the updated style code, generate the corresponding style file for the page.

[0367] In an exemplary embodiment, based on the foregoing scheme, the generation module 1030 is specifically configured as follows:

[0368] In the root node of the page's HTML file, generate attribute selectors for each theme mode;

[0369] Based on the attribute selector corresponding to each theme mode, construct style rules corresponding to each theme mode;

[0370] Add the style declarations for each theme mode to the style rules for that theme mode.

[0371] In an exemplary embodiment, based on the foregoing scheme, the rendering module 1040 is specifically configured as follows:

[0372] Input the target theme pattern into the root node to find the target attribute selector corresponding to the target theme pattern;

[0373] Trigger the style rule to which the target attribute selector belongs, and render the color of the page element based on the color value in the style declaration contained in the triggered style rule.

[0374] In an exemplary embodiment, based on the foregoing scheme, the generation module 1030 is specifically configured as follows:

[0375] Obtain the first theme pattern and the second theme pattern other than the first theme pattern from multiple theme patterns;

[0376] Generate a stylesheet corresponding to the first theme pattern based on the style declaration corresponding to the first theme pattern.

[0377] Based on the style declarations corresponding to the second theme pattern, construct the style rules corresponding to the second theme pattern, and generate the style sheet corresponding to the second theme pattern based on the style rules corresponding to the second theme pattern.

[0378] In one exemplary embodiment, based on the foregoing solution, the apparatus further includes a processing module, specifically configured as follows:

[0379] Retrieve the color group parameters corresponding to the page element, as well as the style code template; the style code template includes the color definition template;

[0380] Assign the color group parameters corresponding to the page element to the target color function template contained in the color definition template, and assign the identifier corresponding to the page element to the page element template contained in the color definition template;

[0381] Based on the assigned color definition template, generate the corresponding style code for the page.

[0382] It should be noted that, Figure 10 The data processing apparatus provided is based on the same concept as the data processing method provided in the above embodiments. The specific ways in which each module and unit performs operations have been described in detail in the method embodiments and will not be repeated here.

[0383] Embodiments of this application also provide an electronic device, including: one or more processors; and a storage device for storing one or more computer programs, which, when executed by one or more processors, cause the electronic device to implement the data processing methods provided in the above embodiments.

[0384] Figure 11 A schematic diagram of a computer system suitable for implementing an electronic device according to embodiments of this application is shown. The electronic device may be... Figure 1 The terminal device 110 or server 120 shown.

[0385] It should be noted that, Figure 11The computer system 1100 of the electronic device shown is merely an example and should not impose any limitation on the functionality and scope of use of the embodiments of this application.

[0386] like Figure 11 As shown, the computer system 1100 includes a Central Processing Unit (CPU) 1101, which can perform various appropriate actions and processes based on a computer program stored in Read-Only Memory (ROM) 1102 or a computer program loaded from storage portion 1108 into Random Access Memory (RAM) 1103, such as executing the data processing method described in the above embodiments. Various computer programs and data required for system operation are also stored in RAM 1103. The CPU 1101, ROM 1102, and RAM 1103 are interconnected via bus 1104. An input / output (I / O) interface 1105 is also connected to bus 1104.

[0387] In some embodiments, the following components are connected to I / O interface 1105: an input section 1106 including a keyboard, mouse, etc.; an output section 1107 including a cathode ray tube (CRT), liquid crystal display (LCD), etc., and a speaker, etc.; a storage section 1108 including a hard disk, etc.; and a communication section 1109 including a network interface card such as a LAN (Local Area Network) card, modem, etc. The communication section 1109 performs communication processing via a network such as the Internet. A drive 1110 is also connected to I / O interface 1105 as needed. A removable medium 1111, such as a disk, optical disk, magneto-optical disk, semiconductor memory, etc., is installed on drive 1110 as needed so that computer programs read from it can be installed into storage section 1108 as needed.

[0388] In particular, according to embodiments of this application, a computer program implementing the data processing method can be carried on a computer-readable medium, which can be downloaded and installed from a network via the communication section 1109, and / or installed from the removable medium 1111.

[0389] It should be noted that the computer-readable medium shown in the embodiments of this application can be a computer-readable signal medium or a computer-readable storage medium, or any combination of the two. A computer-readable storage medium can be, for example, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM), flash memory, optical fiber, portable compact disc read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In this application, a computer-readable storage medium can be any tangible medium containing or storing a computer program that can be used by or in conjunction with an instruction execution system, apparatus, or device. A computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying a computer-readable computer program. Such propagated data signals can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. The computer program contained in the computer-readable medium may be transmitted using any suitable medium, including but not limited to wireless, wired, etc., or any suitable combination thereof.

[0390] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this application. Each block in a flowchart or block diagram may represent a module, segment, or portion of code, which contains one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in a block diagram or flowchart, and combinations of blocks in a block diagram or flowchart, can be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and a computer program.

[0391] The units described in the embodiments of this application can be implemented in software or hardware, and the described units can also be located in a processor. The names of these units do not necessarily limit the specific unit itself.

[0392] Another aspect of this application provides a computer-readable storage medium storing a computer program thereon, which, when executed by a processor of an electronic device, causes the electronic device to perform the aforementioned data processing method. This computer-readable storage medium may be included in the electronic device described in the above embodiments, or it may exist independently and not assembled into the electronic device.

[0393] Another aspect of this application provides a computer program product, which includes a computer program that, when executed by a processor, implements the data processing methods provided in the various embodiments described above. The computer program can be stored in a computer-readable storage medium. The computer program product can be a computer program as a product, such as an APP (Application), webpage, mini-program, etc.; or, the computer program product can also be a storage medium, device, terminal, virtual machine, etc., containing the computer program.

[0394] The above description is merely a preferred exemplary embodiment of this application and is not intended to limit the implementation of this application. Those skilled in the art can easily make corresponding modifications or alterations based on the main concept and spirit of this application. Therefore, the scope of protection of this application should be determined by the scope of protection claimed in the claims.

Claims

1. A data processing method, characterized in that, The method includes: Find the target color function corresponding to the page element from the style code of the page; wherein, the target color function contains the color group parameter corresponding to the page element; Obtain the color values ​​of the page element under various theme modes from the color groups corresponding to the color group parameters; wherein, each color group contains the color values ​​corresponding to the various theme modes respectively; Based on the color values ​​of the page elements in each theme mode, a style sheet corresponding to each theme mode is generated, and a style file corresponding to the page is generated according to the style sheets corresponding to the various theme modes. The target theme mode to be displayed is obtained from the multiple theme modes, and the color of the page element is rendered based on the color value contained in the style sheet corresponding to the target theme mode in the style file.

2. The method as described in claim 1, characterized in that, The color group parameters include the target color group identifier; The step of obtaining the color value of the page element under multiple theme modes from the color group corresponding to the color group parameter includes: From the color group identifier contained in the color file and the color group corresponding to the color group identifier, find the color group corresponding to the target color group identifier, and obtain the color value of the page element in the various theme modes.

3. The method as described in claim 2, characterized in that, The color file contains a color group file and a color value file; The step of searching for the color group corresponding to the target color group identifier from the color group identifier contained in the color file and the color group corresponding to the color group identifier, and obtaining the color value of the page element in the various theme modes, includes: From the mapping relationship between color group identifiers and color identifier sets contained in the color group file, find the target color identifier set corresponding to the target color group identifier; wherein, each color identifier set contains color identifiers corresponding to the various theme modes respectively; From the mapping relationship between color identifiers and color values ​​contained in the color value file, find the color value corresponding to the color identifier of each theme mode of the target color identifier set, and obtain the color value of the page element in each theme mode.

4. The method as described in claim 2, characterized in that, The method further includes: Get color file update request; Based on the color file update request, the color groups contained in the color file are updated to obtain the updated color file; Based on the updated color file and the style code, the style file corresponding to the page is regenerated.

5. The method as described in claim 1, characterized in that, The function for finding the target color corresponding to a page element from the style code of the page includes: Compile the style code corresponding to the page; During the compilation process, the style code is parsed to obtain the abstract syntax tree corresponding to the style code; The target color function contained in each node is obtained by traversing each node in the abstract syntax tree.

6. The method as described in claim 5, characterized in that, The step of traversing each node in the abstract syntax tree to obtain the target color function contained in each node includes: Obtain the modification operation for the abstract syntax tree, and modify the abstract syntax tree according to the modification operation to obtain the modified abstract syntax tree; Traverse each node in the modified abstract syntax tree to obtain the target color function contained in each node; The step of generating the style file corresponding to the page based on the style sheets corresponding to the various theme modes includes: Based on the style sheets corresponding to the various theme modes and the modified abstract syntax tree, the style file corresponding to the page is generated.

7. The method as described in claim 1, characterized in that, The function for finding the target color corresponding to a page element from the style code of the page includes: The style declarations contained in the style code corresponding to the page are traversed to obtain the style declarations to be processed that contain the target color function; The step of generating a style sheet corresponding to each theme mode based on the color value of the page element in each theme mode includes: Based on the color values ​​of the page elements in each theme mode, a style declaration corresponding to each theme mode is generated; wherein, the style declaration corresponding to each theme mode includes the color values ​​of the page elements in each theme mode; Based on the style declaration corresponding to each theme mode, a style sheet corresponding to each theme mode is generated.

8. The method as described in claim 7, characterized in that, The step of generating a style sheet corresponding to each theme mode based on the style declaration corresponding to each theme mode includes: Based on the style declaration corresponding to each theme mode, construct the style rules corresponding to each theme mode, and generate the style sheet corresponding to each theme mode according to the style rules corresponding to each theme mode; The step of generating the style file corresponding to the page based on the style sheets corresponding to the various theme modes includes: Replace the style declaration to be processed contained in the style code with the style sheets corresponding to the various theme modes respectively to obtain the updated style code; Based on the updated style code, a style file corresponding to the page is generated.

9. The method as described in claim 8, characterized in that, The step of constructing style rules corresponding to each theme mode based on the style declarations corresponding to each theme mode includes: In the root node corresponding to the Hypertext Markup Language (HTML) file of the page, generate the attribute selector corresponding to each theme mode; Based on the attribute selector corresponding to each theme mode, construct the style rules corresponding to each theme mode; Add the style declaration corresponding to each theme mode to the style rule corresponding to each theme mode.

10. The method as described in claim 9, characterized in that, The step of rendering the color of the page elements based on the color values ​​contained in the stylesheet corresponding to the target theme mode in the style file includes: Input the target theme pattern into the root node to find the target attribute selector corresponding to the target theme pattern; The style rule to which the target attribute selector belongs is triggered, and the color of the page element is rendered based on the color value in the style declaration contained in the triggered style rule.

11. The method as described in claim 8, characterized in that, The step of constructing style rules for each theme mode based on the style declarations corresponding to each theme mode, and generating style sheets for each theme mode according to the style rules corresponding to each theme mode, includes: Obtain a first theme pattern and a second theme pattern other than the first theme pattern from the multiple theme patterns; Based on the style declaration corresponding to the first theme pattern, generate the style sheet corresponding to the first theme pattern; Based on the style declaration corresponding to the second theme pattern, construct the style rules corresponding to the second theme pattern, and generate the style sheet corresponding to the second theme pattern based on the style rules corresponding to the second theme pattern.

12. The method as described in claim 1, characterized in that, The method further includes: Obtain the color group parameters corresponding to the page element, as well as the style code template; the style code template includes a color definition template. Assign the color group parameter corresponding to the page element to the target color function template contained in the color definition template, and assign the identifier corresponding to the page element to the page element template contained in the color definition template; Based on the assigned color definition template, the style code corresponding to the page is generated.

13. A data processing apparatus, characterized in that, The device includes: The search module is configured to search for the target color function corresponding to a page element from the style code of the page; wherein the target color function contains the color group parameter corresponding to the page element; The acquisition module is configured to acquire the color values ​​of the page element under multiple theme modes from the color groups corresponding to the color group parameters; wherein, each color group contains the color values ​​corresponding to the multiple theme modes respectively; The generation module is configured to generate a style sheet corresponding to each theme mode based on the color value of the page element in each theme mode, and generate a style file corresponding to the page according to the style sheets corresponding to the multiple theme modes respectively; The rendering module is configured to obtain the target theme mode to be displayed from the multiple theme modes, and render the color of the page elements based on the color values ​​contained in the style sheet corresponding to the target theme mode in the style file.

14. An electronic device, characterized in that, include: One or more processors; A storage device for storing one or more computer programs that, when executed by one or more processors, cause the electronic device to perform the method of any one of claims 1-12.

15. A computer-readable storage medium, characterized in that, It stores a computer program that, when executed by the processor of the electronic device, causes the electronic device to perform the method described in any one of claims 1-12.

16. A computer program product, characterized in that, Includes a computer program that, when executed by a processor, implements the method described in any one of claims 1-12.

Images