A method and system for switching theme styles

Abstract

The present application discloses a method and system for switching theme styles, which extracts a color style cascade table from an acquired style file, and determines the basic style for theme color switching based on the color style cascade table; the style file is a file for displaying the theme style of a web page, and when a change in the theme style is detected, a target style theme style is determined based on the changed theme style and the basic style, and a theme style switching operation is performed based on the target style theme style. Through the above scheme, there is no need to dynamically refresh the current web page to achieve the switching of theme styles, thereby avoiding the waste of resources requested by the current web page. When switching the theme style, there is no need to interact with the server, thereby achieving automatic switching of theme styles without perception, and improving the efficiency of theme style switching. In addition, theme style switching can be achieved through IE browser and other lower versions of browsers to improve compatibility.

Description

Technical Field

[0001] The present application relates to the field of information processing technology, and more specifically, to a theme style switching method and system. Background Art

[0002] In web pages, different systems have different theme color styles. In order to meet the theme color styles of different systems and the color theme preferences of different users, it is necessary to provide a theme style switching function to meet the personalized needs of users.

[0003] The existing theme style switching includes the following three switching methods: one is to compile multiple sets of different theme style cascading tables according to the characteristics of the product, provide them to users for selection on the web page, interact with the back end in real time, obtain the color cascading table selected by the current user to replace or refresh the web page to achieve theme style switching; the second is to use the theme generation based on the CSS preprocessing language (less), use the less insertion method to obtain the user's configuration information and submit it to the back end service for recompilation, and generate a new CSS style sheet file, and then the client obtains the CSS style sheet returned by the back end and adds it to the link of the style tag; the third is to use var variables to define color variables, so as to dynamically change the value of the color variable to make changes.

[0004] When switching themes through method 1, the current web page needs to be refreshed, which wastes the performance of web page rendering. When switching themes through method 2, each switch needs to communicate with the server and wait for the compilation of less, which makes the efficiency of theme switching low. When switching themes through method 3, it is not compatible with IE browser and lower versions of browsers.

[0005] Therefore, the existing method of switching theme styles will cause waste of resources, low switching efficiency and poor compatibility. Summary of the invention

[0006] In view of this, the present application discloses a method and system for switching theme styles, aiming to avoid waste of resources in current web page requests and improve the efficiency and compatibility of switching theme styles.

[0007] In order to achieve the above purpose, the disclosed technical solution is as follows:

[0008] In a first aspect, the present application discloses a method for switching a theme style, the method comprising:

[0009] Extracting a color style stacking table from the acquired style file, and determining a basic style for theme color switching based on the color style stacking table; the style file is a file that displays the theme style of the web page;

[0010] When a change in the theme style is detected, a target style theme style is determined based on the changed theme style and the basic style;

[0011] A theme style switching operation is performed based on the target style theme style.

[0012] Preferably, extracting a color style stacking table from the acquired style file, and determining a basic style for theme color switching based on the color style stacking table, includes:

[0013] Extracting a color style stacking table from the acquired style file through a preset function; the color style stacking table is a style content related to the color value;

[0014] The color style stacking table is written into a preset theme color file to obtain a basic style for theme color switching.

[0015] Preferably, when a change in the theme style is detected, determining a target style theme style based on the changed theme style and the basic style includes:

[0016] When receiving a theme color modification instruction or a theme style switching instruction, determining that the theme style has changed;

[0017] When the theme style changes, the color values ​​of the basic style are classified to obtain preset placeholders;

[0018] Calculate the color value of the changed theme style and obtain the color value in the preset format;

[0019] Binding the preset placeholder with the color value of the preset format to obtain a binding result; the binding result is used to provide a prompt for binding the preset placeholder with the color value of the preset format;

[0020] Calculate the color value in the preset format by using a preset calculation dimension to obtain a target color value;

[0021] Replacing the preset placeholder in the binding result with the target color value to obtain a target theme string;

[0022] The target theme character string is used to update the basic style to obtain a target style theme style.

[0023] Preferably, the process of performing a theme style switching operation based on the target style theme style includes:

[0024] Through the preset script, the target style theme replaces the theme color content in the preset tag to complete the theme style switching.

[0025] Preferably, it also includes:

[0026] If the preset tag is not detected, creating the preset tag;

[0027] Through the preset script, the target style theme replaces the theme color content in the preset tag to complete the theme style switching.

[0028] Preferably, after extracting the color style stacking table from the acquired style file and determining the basic style for theme color switching based on the color style stacking table, the method further includes:

[0029] The basic pattern is stored in a preset memory.

[0030] The second aspect of the present application discloses a theme style switching system, the system comprising:

[0031] A first determining unit is used to extract a color style stacking table from the acquired style file, and determine a basic style for theme color switching based on the color style stacking table; the style file is a file that displays the theme style of a web page;

[0032] A second determining unit is configured to determine a target style theme style based on the changed theme style and the basic style when a change in the theme style is detected;

[0033] An execution unit is used to execute a theme style switching operation based on the target style theme style.

[0034] Preferably, the first determining unit includes:

[0035] An extraction module, used to extract a color style stacking table from the acquired style file through a preset function; the color style stacking table is a style content related to the color value;

[0036] The acquisition module is used to write the color style stacking table into a preset theme color file to obtain a basic style for theme color switching.

[0037] Preferably, the second determining unit includes:

[0038] A determination module, used to determine that the theme style has changed when receiving a theme color modification instruction or a theme style switching instruction;

[0039] A classification module, used for classifying the color values ​​of the basic style to obtain preset placeholders when the theme style changes;

[0040] A first calculation module is used to calculate the color value of the changed theme style to obtain the color value of the preset format;

[0041] A binding module, used to bind the preset placeholder with the color value of the preset format to obtain a binding result; the binding result is used to provide a prompt for binding the preset placeholder with the color value of the preset format;

[0042] A second calculation module, used to calculate the color value in the preset format through a preset calculation dimension to obtain a target color value;

[0043] A replacement module, used to replace the preset placeholder in the binding result with the target color value to obtain a target theme character string;

[0044] The updating module is used to update the basic style with the target theme character string to obtain the target style theme style.

[0045] Preferably, the execution unit is specifically used for:

[0046] Through the preset script, the target style theme replaces the theme color content in the preset tag to complete the theme style switching.

[0047] It can be known from the above technical scheme that the present application discloses a method and system for switching theme styles, extracting a color style cascade table from an acquired style file, and determining a basic style for theme color switching based on the color style cascade table; the style file is a file for displaying the theme style of a web page, and when a change in the theme style is detected, the target style theme style is determined based on the changed theme style and the basic style, and the theme style switching operation is performed based on the target style theme style. Through the above scheme, there is no need to dynamically refresh the current web page to achieve the switching of theme styles, thus avoiding the waste of resources requested by the current web page. When switching the theme style, there is no need to interact with the server, thus achieving imperceptible automatic switching of theme styles and improving the efficiency of theme style switching. In addition, theme style switching can be achieved through IE browser and other lower versions of browsers to improve compatibility. BRIEF DESCRIPTION OF THE DRAWINGS

[0048] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on the provided drawings without paying any creative work.

[0049] Figure 1 A flowchart of a method for switching a theme style disclosed in an embodiment of the present application;

[0050] Figure 2 A schematic diagram of a process for determining a basic style for switching theme colors disclosed in an embodiment of the present application;

[0051] Figure 3 A schematic diagram of a process for determining a target style theme disclosed in an embodiment of the present application;

[0052] Figure 4 A flowchart of a theme switching system disclosed in an embodiment of the present application is shown. DETAILED DESCRIPTION

[0053] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0054] In this application, the terms "comprises", "comprising" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device comprising a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, an element defined by the sentence "comprising a ..." does not exclude the presence of other identical elements in the process, method, article or device comprising the element.

[0055] As can be seen from the background technology, the existing method of switching themes will cause waste of resources, low switching efficiency and poor compatibility.

[0056] In order to solve the above problems, the embodiment of the present application discloses a method and system for switching theme styles, which can realize the switching of theme styles without dynamically refreshing the current web page, thereby avoiding the waste of resources requested by the current web page. When switching theme styles, there is no need to interact with the server, and the automatic switching of theme styles without perception is realized, thereby improving the efficiency of theme style switching. In addition, theme style switching can be realized through IE browser and other browsers of lower versions, thereby improving compatibility. The specific implementation method is described by the following embodiment.

[0057] refer to Figure 1 FIG. 1 is a flow chart of a method for switching a theme style disclosed in an embodiment of the present application. The method for switching a theme style mainly includes the following steps:

[0058] S101: extracting a color style stacking table from the acquired style file, and determining a basic style for theme color switching based on the color style stacking table; the style file is a file that displays the theme style of a web page.

[0059] In S101, the basic style for switching the theme colors is a css file, or a file in another format, the content of which is the style string related to all the acquired color values, which is the same as the content of the style cascading table, but is not necessarily a style cascading table, which mainly depends on the format of the file written by the compiled file (generally, in order to facilitate understanding, the format of the cascading style sheet is directly generated for management and maintenance).

[0060] The front-end adopts an engineering approach to develop and implement technology. Therefore, the entire front-end code (html, css, js code, etc.) will be compiled in the early stage of deployment (engineering stage).

[0061] The specific process of extracting the color style cascading table from the acquired style file and determining the basic style for theme color switching based on the color style cascading table is as follows:

[0062] First, a color style stacking table is extracted from the retrieved style file through a preset function; the color style stacking table is the style content related to the color value.

[0063] Among them, the style file includes all style resource files and style content written in the network, etc.

[0064] The preset function may be a hook function or other functions, etc. The specific preset function is determined by the technicians according to the actual situation, and this application does not make any specific restrictions. The preset function of this application is preferably a hook function.

[0065] Use the lifecycle hook function provided in the packaging editing phase to traverse all style resource files in the style file and the style content written in the network, parse all style resource files and the style content written in the network, compile and extract all style content related to color values, and form a very small style cascading table related only to color values, which serves as the basic style for theme color switching.

[0066] During the compilation phase, relevant style files are compiled through corresponding css-loaders (such as scss-loader, less-loader), etc. to form relevant js style running files; secondly, during the js compilation phase, plugins are used to hijack the js running process, traverse and read color-related content, and obtain style content related to color values ​​through the corresponding color information through the theme model.

[0067] The compilation can be webpack compilation, roolup compilation, glup compilation, etc. This solution does not make specific restrictions.

[0068] The style contents related to color values ​​include color values ​​in rgb mode, color values ​​in rgba mode, color values ​​in hexadecimal 3-bit mode, and color values ​​in hexadecimal 6-bit mode (for example: rgb(0,0,0), rgba(0,0,0,0.3), #000, #000000)).

[0069] Then, the color style overlay table is written into the preset theme color file to obtain the basic style for theme color switching.

[0070] The corresponding color style cascading table is written into the themecolor.css file on the disk by means of file writing, forming a basic style for theme color switching.

[0071] When the theme switching system is initialized, the basic style is stored in the memory of the theme switching system.

[0072] S102: When a change in the theme style is detected, a target style theme style is determined based on the changed theme style and the basic style.

[0073] Specifically, when a change in the theme style is detected, the process of determining the target style theme style based on the changed theme style and the basic style is shown in A1-A7.

[0074] A1: When a theme color modification instruction or a theme style switching instruction is received, it is determined that the theme style has changed.

[0075] The operation of the user selecting a different theme color (theme color modification instruction) or selecting a corresponding style (theme style switching instruction) is monitored to trigger the operation of the theme model.

[0076] A2: When the theme style changes, the color values ​​of the basic style are classified to obtain preset placeholders.

[0077] Among them, in order to distinguish the replacement of the previous and next colors, the colors calculated by the corresponding theme are named and labeled to obtain preset placeholders, so as to ensure that the latter colors cover the former colors in the process of calculating the new and old themes of the theme template (for example: the original style is black and the new style is white. At this time, the replacement needs to distinguish which are the original white and which need to replace black with the new white, and the original white must be automatically converted to black according to the theme model calculation. If there is no naming and labeling method, the new and old white cannot be distinguished, resulting in the abnormal situation that all are white after calculation).

[0078] A3: Calculate the color value of the changed theme style and obtain the color value of the preset format.

[0079] The theme model is used to calculate the color value in a preset format by corresponding to the user's selection of different theme colors or the selection of corresponding styles.

[0080] The theme model is used to select different theme colors or corresponding styles for user selection for split calculation to obtain color values ​​in a preset format.

[0081] The split calculation is to calculate all color values ​​of one type into color values ​​of other types for processing. For example, the corresponding 6-bit color value is split and calculated to obtain a 3-bit color value, an RGB color value, and an RGBA color value.

[0082] The color value of the preset format can be in several forms such as a hexadecimal 3-digit string, a hexadecimal 6-digit string, an RGB mode string, an RGBA mode string, etc.

[0083] A4: Bind the preset placeholder with the color value of the preset format to obtain a binding result; the binding result is used to provide a prompt for binding the preset placeholder with the color value of the preset format.

[0084] A5: Calculate the color value in the preset format using the preset calculation dimension to obtain the target color value.

[0085] Among them, the calculation dimension of rgb (red, green, blue) is traversed and calculated in steps of 5 to obtain the target color value.

[0086] In technology, all colors are realized by mixing red, green and blue, and all color values ​​are between 0 and 255. In the calculation of the entire theme model, all related color values ​​are basically 5, and the current mainstream UI libraries are basically implemented in accordance with basic design specifications. The basic standard color deviations are basically 5, 10, 15 and other different color value deviations. Therefore, in order to ensure that all mainstream third-party UI libraries can adapt, a calculation method with a step size of 5 is adopted, that is, each calculation increases the number by 5 to calculate the color value and obtain the target color value.

[0087] A6: Replace the preset placeholder in the binding result with the target color value to obtain the target theme string.

[0088] The target theme character string is composed of a color value in a preset format and a target color value.

[0089] A7: Update the target theme string to the base style to obtain the target style theme style.

[0090] The generated target theme string is inserted into the body corresponding to the basic style to achieve the theme change and obtain the target style theme style.

[0091] S103: Perform a theme style switching operation based on the target style theme.

[0092] In S103, the target style theme style replaces the theme color content in the preset tag through a preset script to complete the theme style switching. Specifically, the target style theme style replaces the content of the id named themeColor in the style tag through a script to complete the theme style switching.

[0093] It is compatible with various low-version browsers (such as IE8 and above) without interacting with the server, and the theme switching of the entire system can be completed without perception.

[0094] The preset scripts of this application are not specifically limited.

[0095] In actual web pages, different systems will have different theme color styles, and users also have their own favorite main color preferences. In order to meet the needs of different system styles to be consistent with the customer's UI specifications and meet the preferences of different users for their own color themes, a theme style switching function is provided to meet the personalized requirements of customers and users.

[0096] In the application scenario embodiment, when a user visits a web page for the first time, a request is made to the server according to the current user theme data (user theme color modification instruction or theme style switching instruction), the extracted color theme original file is obtained, and the corresponding theme file is associated with the theme's calculation model to become the color file of the basic style of the theme calculation model. At the same time, the content of the basic style color file is saved in the memory of the current theme style switching. When the user subsequently modifies the theme or selects other colors, the cached data in the system memory is directly used to run the theme model to realize the change of the new theme.

[0097] Users can switch any theme style according to their own preferences, truly realizing thousands of faces for thousands of people. And there is no need to communicate with the server multiple times to complete theme calculation and replacement, which greatly saves the communication resources of the server.

[0098] If the preset tag is not detected, a preset tag is created, and the target style theme replaces the theme color content in the preset tag through the preset script to complete the theme style switching.

[0099] Among them, if there is no preset tag (style tag), a style tag is dynamically created, and the target style theme replaces the content of the style tag with the id name themeColor, so as to achieve the theme switching of the entire system without the need to interact with the server and be compatible with various low-version browsers (such as ie8 and above).

[0100] In the entire theme style switching solution, all third-party UI libraries that are open source in the current mainstream way can be applied. In order to better illustrate the universality of the current solution, the color fields in the corresponding third-party UI library are extracted as part of the theme file content source during the compilation process.

[0101] To facilitate understanding of the process of switching themes, here is an example:

[0102] For example, first change the webpack split to compile split (not limited to webpack, it can also be other compilation implementations, such as: roolup, glup and other implementations).

[0103] The calculation of the theme is implemented in the compilation stage (webpack compilation, roolup compilation, glup compilation), and all color-related content involved in the system is extracted through compilation splitting to form a basic theme template file (the file only contains styles of all color values).

[0104] The custom style or custom theme replacement selected by the user is sent to the theme model, and the color values ​​of the corresponding theme template are labeled as placeholders (ie, each color value is given a corresponding color name for subsequent theme replacement).

[0105] According to the calculation rules of the topic model, all color values ​​are calculated (RGB mode calculation, RGBA mode calculation, hexadecimal 3-bit mode calculation, hexadecimal 6-bit mode calculation) to obtain the target topic string.

[0106] Use the target theme string as the new theme template, update the current original memory cached theme template content, and insert it into the body corresponding to the basic style to implement the theme change and obtain the target style theme style.

[0107] Use the script to replace the target style theme with the content of the id named themeColor in the style tag to complete the theme style switch.

[0108] In the embodiment of the present application, there is no need to dynamically refresh the current web page to switch the theme style, thereby avoiding the waste of resources requested by the current web page. When switching the theme style, there is no need to interact with the server, thereby achieving automatic switching of the theme style without perception, thereby improving the efficiency of the theme style switching. Moreover, the theme style switching can be achieved through the IE browser and other lower version browsers, thereby improving compatibility.

[0109] refer to Figure 2As shown, the process involved in the above S101 is to extract the color style stacking table from the acquired style file, and determine the basic style for theme color switching based on the color style stacking table, which mainly includes the following steps:

[0110] S201: extracting a color style stacking table from the retrieved style file through a preset function; the color style stacking table is style content related to color values.

[0111] S202: Writing the color style overlay table into the preset theme color file to obtain a basic style for theme color switching.

[0112] The execution principle and execution process of S201-S202 are consistent with the execution process and execution principle of extracting the color style cascade table from the acquired style file in the above S101, and determining the basic style for theme color switching based on the color style cascade table, which can be used as a reference and will not be repeated here.

[0113] In an embodiment of the present application, a color style overlay table is extracted from the retrieved style file through a preset function; the color style overlay table is a style content related to the color value, and the color style overlay table is written into a preset theme color file to achieve the purpose of obtaining the basic style for theme color switching.

[0114] refer to Figure 3 As shown, the process of determining the target style theme style based on the changed theme style and the basic style when the theme style is detected to have changed in the above S102 mainly includes the following steps:

[0115] S301: When a theme color modification instruction or a theme style switching instruction is received, determining that the theme style has changed.

[0116] S302: When the theme style changes, the color values ​​of the basic style are classified to obtain preset placeholders.

[0117] S303: Calculate the color value of the changed theme style to obtain the color value of the preset format.

[0118] S304: Bind the preset placeholder with the color value of the preset format to obtain a binding result; the binding result is used to provide a prompt for binding the preset placeholder with the color value of the preset format.

[0119] S305: Calculate the color value in the preset format using the preset calculation dimension to obtain the target color value.

[0120] S306: Replace the preset placeholder in the binding result with the target color value to obtain the target theme string.

[0121] S307: Update the basic style with the target theme character string to obtain the target style theme style.

[0122] The execution process and execution principle of S301-S307 are consistent with the execution process and execution principle of determining the target style theme style based on the changed theme style and the basic style when the theme style is monitored to change in the above S102, which can be used as a reference and will not be repeated here.

[0123] In the embodiment of the present application, when a change in theme style is detected, a target style theme style is determined based on the changed theme style and the basic style, so as to achieve the purpose of performing a theme style switching operation through the target style theme style.

[0124] Based on the above embodiments Figure 1 A method for switching a theme style is disclosed, and an embodiment of the present application also discloses a system for switching a theme style, such as Figure 4 As shown, the theme style switching system mainly includes a first determining unit 401 , a second determining unit 402 and an executing unit 403 .

[0125] The first determining unit 401 is used to extract a color style stacking table from the acquired style file, and determine a basic style for theme color switching based on the color style stacking table; the style file is a file that displays the theme style of a web page.

[0126] The second determining unit 402 is configured to determine a target style theme style based on the changed theme style and the basic style when a change in the theme style is detected.

[0127] The execution unit 403 is used to execute a theme style switching operation based on the target style theme style.

[0128] Furthermore, the first determining unit 401 includes an extraction module and an acquisition module.

[0129] The extraction module is used to extract a color style stacking table from the acquired style file through a preset function; the color style stacking table is the style content related to the color value.

[0130] The acquisition module is used to write the color style overlay table into the preset theme color file to obtain the basic style for theme color switching.

[0131] Furthermore, the second determining unit 402 includes a determining module, a classification module, a first calculating module, a binding module, a second calculating module, a replacing module and an updating module.

[0132] The determination module is used to determine whether the theme style has changed when receiving a theme color modification instruction or a theme style switching instruction.

[0133] The classification module is used to classify the color values ​​of the basic style and obtain preset placeholders when the theme style changes.

[0134] The first calculation module is used to calculate the color value of the changed theme style to obtain the color value in a preset format.

[0135] The binding module is used to bind the preset placeholder with the color value of the preset format to obtain a binding result; the binding result is used to provide a prompt for binding the preset placeholder with the color value of the preset format.

[0136] The second calculation module is used to calculate the color value in a preset format through a preset calculation dimension to obtain a target color value.

[0137] The replacement module is used to replace the preset placeholders in the binding result with the target color value to obtain the target theme string.

[0138] The update module is used to update the basic style of the target theme string to obtain the target style theme style.

[0139] Furthermore, the execution unit 403 is specifically configured to replace the theme color content in the preset tag with the target style theme through a preset script to complete the theme style switching.

[0140] Furthermore, the theme style switching system also includes a creation unit and a replacement unit.

[0141] The creating unit is used to create a preset tag if the preset tag is not detected.

[0142] The replacement unit is used to replace the theme color content in the preset tag with the target style theme through the preset script to complete the theme style switching.

[0143] Furthermore, the theme switching system also includes a storage unit.

[0144] Storage unit, used to store basic patterns in memory.

[0145] In the embodiment of the present application, there is no need to dynamically refresh the current web page to switch the theme style, thereby avoiding the waste of resources requested by the current web page. When switching the theme style, there is no need to interact with the server, thereby achieving automatic switching of the theme style without perception, thereby improving the efficiency of the theme style switching. Moreover, the theme style switching can be achieved through the IE browser and other lower version browsers, thereby improving compatibility.

[0146] For the aforementioned method embodiments, for the sake of simplicity, they are all described as a series of action combinations, but those skilled in the art should be aware that the present application is not limited by the order of the actions described, because according to the present application, some steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in the specification are all preferred embodiments, and the actions and modules involved are not necessarily required by the present application.

[0147] It should be noted that each embodiment in this specification is described in a progressive manner, and each embodiment focuses on the differences from other embodiments, and the same or similar parts between the embodiments can be referred to each other. For system embodiments, since they are basically similar to method embodiments, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0148] The steps in the methods of the embodiments of the present application can be adjusted in order, combined, and deleted according to actual needs.

[0149] Finally, it should be noted that, in this article, relational terms such as first and second, etc. are merely used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any actual relationship or order between these entities or operations.

[0150] The above description of the disclosed embodiments enables those skilled in the art to implement or use the present application. Various modifications to these embodiments will be apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present application. Therefore, the present application will not be limited to the embodiments shown herein, but will conform to the widest scope consistent with the principles and novel features disclosed herein.

[0151] The above is only a preferred implementation of the present application. It should be pointed out that for ordinary technicians in this technical field, several improvements and modifications can be made without departing from the principles of the present application. These improvements and modifications should also be regarded as the scope of protection of the present application.

Claims

1. A method for switching a theme style, characterized in that: The method comprises: Extracting a color style stacking table from the acquired style file, and determining a basic style for theme color switching based on the color style stacking table; the style file is a file that displays the theme style of the web page; When a change in the theme style is detected, a target style theme style is determined based on the changed theme style and the basic style; Perform a theme style switching operation based on the target style theme style; The step of extracting a color style stacking table from the acquired style file and determining a basic style for switching the theme color based on the color style stacking table includes: Extracting a color style stacking table from the acquired style file through a preset function; the color style stacking table is a style content related to the color value; Writing the color style stacking table into a preset theme color file to obtain a basic style for theme color switching; When a change in the theme style is detected, determining a target style theme style based on the changed theme style and the basic style includes: When receiving a theme color modification instruction or a theme style switching instruction, determining that the theme style has changed; When the theme style changes, the color values ​​of the basic style are classified to obtain preset placeholders; Calculate the color value of the changed theme style and obtain the color value in the preset format; Binding the preset placeholder with the color value of the preset format to obtain a binding result; the binding result is used to provide a prompt for binding the preset placeholder with the color value of the preset format; Calculate the color value in the preset format by using a preset calculation dimension to obtain a target color value; Replacing the preset placeholder in the binding result with the target color value to obtain a target theme string; The target theme character string is used to update the basic style to obtain a target style theme style.

2. The method according to claim 1, characterized in that The process of performing a theme style switching operation based on the target style theme style includes: Through the preset script, the target style theme replaces the theme color content in the preset tag to complete the theme style switching.

3. The method according to claim 2, characterized in that Also includes: If the preset tag is not detected, creating the preset tag; Through the preset script, the target style theme replaces the theme color content in the preset tag to complete the theme style switching.

4. The method according to claim 1, characterized in that: After extracting the color style stacking table from the acquired style file and determining the basic style for theme color switching based on the color style stacking table, the method further includes: The basic pattern is stored in a preset memory.

5. A theme style switching system, characterized in that: The system comprises: A first determining unit is used to extract a color style stacking table from the acquired style file, and determine a basic style for theme color switching based on the color style stacking table; the style file is a file that displays the theme style of a web page; A second determining unit is configured to determine a target style theme style based on the changed theme style and the basic style when a change in the theme style is detected; An execution unit, configured to execute a theme style switching operation based on the target style theme style; The first determining unit includes: An extraction module, used to extract a color style stacking table from the acquired style file through a preset function; the color style stacking table is a style content related to the color value; An acquisition module is used to write the color style stacking table into a preset theme color file to obtain a basic style for theme color switching; The second determining unit includes: A determination module, used to determine that the theme style has changed when receiving a theme color modification instruction or a theme style switching instruction; A classification module, used for classifying the color values ​​of the basic style to obtain preset placeholders when the theme style changes; A first calculation module is used to calculate the color value of the changed theme style to obtain the color value of the preset format; A binding module, used to bind the preset placeholder with the color value of the preset format to obtain a binding result; the binding result is used to provide a prompt for binding the preset placeholder with the color value of the preset format; A second calculation module, used to calculate the color value in the preset format through a preset calculation dimension to obtain a target color value; A replacement module, used to replace the preset placeholder in the binding result with the target color value to obtain a target theme character string; The updating module is used to update the basic style with the target theme character string to obtain the target style theme style.

6. The system according to claim 5, characterized in that The execution unit is specifically used for: Through the preset script, the target style theme replaces the theme color content in the preset tag to complete the theme style switching.

Images