CN114090160A - Theme style switching method and system - Google Patents
Theme style switching method and system Download PDFInfo
- Publication number
- CN114090160A CN114090160A CN202111394262.7A CN202111394262A CN114090160A CN 114090160 A CN114090160 A CN 114090160A CN 202111394262 A CN202111394262 A CN 202111394262A CN 114090160 A CN114090160 A CN 114090160A
- Authority
- CN
- China
- Prior art keywords
- style
- theme
- color
- preset
- switching
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 46
- 238000004364 calculation method Methods 0.000 claims description 33
- 230000006870 function Effects 0.000 claims description 17
- 230000004048 modification Effects 0.000 claims description 12
- 238000012986 modification Methods 0.000 claims description 12
- 230000008859 change Effects 0.000 claims description 6
- 239000002699 waste material Substances 0.000 abstract description 8
- 230000003993 interaction Effects 0.000 abstract description 7
- 230000008447 perception Effects 0.000 abstract description 5
- 230000008569 process Effects 0.000 description 18
- 239000003086 colorant Substances 0.000 description 11
- 101001133605 Homo sapiens Parkin coregulated gene protein Proteins 0.000 description 3
- 102100034314 Parkin coregulated gene protein Human genes 0.000 description 3
- 230000009471 action Effects 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 3
- 238000000605 extraction Methods 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 230000002159 abnormal effect Effects 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000010365 information processing Effects 0.000 description 1
- 238000003780 insertion Methods 0.000 description 1
- 230000037431 insertion Effects 0.000 description 1
- 238000002372 labelling Methods 0.000 description 1
- 238000012856 packing Methods 0.000 description 1
- 238000007781 pre-processing Methods 0.000 description 1
- 238000007639 printing Methods 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The application discloses a theme style switching method and a theme style switching system, wherein a color style overlay table is extracted from an acquired style file, and a basic style of theme color switching is determined based on the color style overlay table; the style file is a file for displaying the theme style of the webpage, when the theme style is monitored to be changed, the target style theme style is determined based on the changed theme style and the basic style, and the theme style switching operation is executed based on the target style theme style. By the scheme, the current webpage does not need to be refreshed dynamically to realize theme style switching, and resource waste of the current webpage request is avoided. When the theme styles are switched, interaction with the server is not needed, the automatic switching of the non-perception theme styles is realized, and the efficiency of switching the theme styles is improved. Moreover, theme style switching can be realized through an IE browser and other low-version browsers, and compatibility is improved.
Description
Technical Field
The present application relates to the field of information processing technologies, and in particular, to a theme style switching method and system.
Background
Different systems have different theme color styles in the web page. In order to satisfy the theme color styles of different systems and the color theme preferences of different users, a theme style switching function needs to be provided to satisfy the personalized requirements of the users.
The existing theme style switching comprises the following three switching modes, namely, a plurality of sets of different theme style laminated tables are respectively compiled according to the characteristics of products, the different theme style laminated tables are provided for users to select in webpages, the interaction with a back end is carried out in real time, and the sample style laminated table selected by the current user is obtained to replace or refresh the webpages to realize the switching of theme styles; secondly, generating a theme based on a cs preprocessing language (less), acquiring configuration information of a user by using a less insertion mode, submitting the configuration information to a back-end service for recompilation, generating a new cs style sheet file, and then acquiring a cs style sheet returned by the back end by a client and adding the cs style sheet into a link of a style label; and thirdly, defining the color variable by using the var variable, and dynamically changing the value of the color variable to change.
The theme style is switched in the first mode, and the current webpage needs to be refreshed, so that the webpage rendering performance is wasted; the theme style is switched in the second mode, each time the switching needs to be communicated with the server, less compiling needs to be waited, and therefore the theme style switching efficiency is low; and the theme style switching is carried out in the third mode, so that the IE browser and the lower-version browser cannot be compatible.
Therefore, the conventional theme style switching mode causes resource waste, low switching efficiency and poor compatibility.
Disclosure of Invention
In view of this, the present application discloses a theme style switching method and system, which aim to avoid resource waste of a current webpage request and improve the efficiency and compatibility of theme style switching.
In order to achieve the purpose, the technical scheme is as follows:
the first aspect of the present application discloses a theme style switching method, which includes:
extracting a color style overlay table from the acquired style file, and determining a basic style of theme color switching based on the color style overlay table; the style file is a file for displaying the theme style of the webpage;
when the theme style is monitored to be changed, determining the theme style of the target style based on the changed theme style and the basic style;
and executing theme style switching operation based on the target style theme style.
Preferably, the extracting a color style overlay table from the obtained style file, and determining a basic style of theme color switching based on the color style overlay table includes:
extracting a color style stacking table from the obtained style file through a preset function; the color style cascading sheet is style content related to color values;
and writing the color style overlay table into a preset theme color file to obtain a basic style of theme color switching.
Preferably, when the theme style is monitored to be changed, the determining the theme style of the target style based on the changed theme style and the basic style comprises:
when a theme color modification instruction or a theme style switching instruction is received, determining that the theme style changes;
under the condition that the theme style is changed, classifying the color values of the basic style to obtain preset placeholders;
calculating the color value of the changed theme style to obtain the color value of the preset format;
binding the preset placeholder with the color value in the preset format to obtain a binding result; the binding result is used for prompting the binding of the preset placeholder and the color value in the preset format;
calculating the color value of the preset format through a preset calculation dimension to obtain a target color value;
replacing preset placeholders in the binding result by the target color value to obtain a target subject character string;
and updating the basic style of the target theme character string to obtain the target style theme style.
Preferably, the process of performing the theme style switching operation based on the target style theme style includes:
and replacing the theme color content in the preset label with the target style theme style through a preset script to complete theme style switching.
Preferably, the method further comprises the following steps:
if the preset label is not monitored, creating the preset label;
and replacing the theme color content in the preset label with the target style theme style through the preset script to complete theme style switching.
Preferably, after the extracting the color style overlay table from the obtained style file and determining the basic style of the theme color switching based on the color style overlay table, the method further includes:
and storing the basic pattern into a preset memory.
A second aspect of the present application discloses a theme style switching system, the system comprising:
the first determining unit is used for extracting a color style overlay table from the acquired style file and determining a basic style of theme color switching based on the color style overlay table; the style file is a file for displaying the theme style of the webpage;
the second determining unit is used for determining the theme style of the target style based on the changed theme style and the basic style when the theme style is monitored to be changed;
and the execution unit is used for executing theme style switching operation based on the target style theme style.
Preferably, the first determining unit includes:
the extraction module is used for extracting the color style stacking list from the acquired style file through a preset function pair; the color style overlay table is style content related to color values;
and the acquisition module is used for writing the color style stacking list into a preset theme color file to obtain a basic style of theme color switching.
Preferably, the second determination unit includes:
the determining module is used for determining that the theme style changes when a theme color modification instruction or a theme style switching instruction is received;
the classification module is used for classifying the color values of the basic styles to obtain preset placeholders under the condition that the styles of the themes are changed;
the first calculation module is used for calculating the color value of the changed theme style to obtain the color value of the preset format;
the binding module is used for binding the preset placeholder with the color value in the preset format to obtain a binding result; the binding result is used for prompting the binding of the preset placeholder and the color value in the preset format;
the second calculation module is used for calculating the color value of the preset format through a preset calculation dimension to obtain a target color value;
the replacing module is used for replacing a preset placeholder in the binding result through the target color value to obtain a target subject character string;
and the updating module is used for updating the basic style of the target theme character string to obtain the target style theme style.
Preferably, the execution unit is specifically configured to:
and replacing the theme color content in the preset label with the target style theme style through a preset script to complete theme style switching.
According to the technical scheme, the application discloses a theme style switching method and system, a color style overlay table is extracted from an obtained style file, and a basic style of theme color switching is determined based on the color style overlay table; the style file is a file for displaying the theme style of the webpage, when the theme style is monitored to be changed, the target style theme style is determined based on the changed theme style and the basic style, and the theme style switching operation is executed based on the target style theme style. By the scheme, the current webpage does not need to be dynamically refreshed to realize theme style switching, and resource waste of the current webpage request is avoided. When the theme styles are switched, interaction with the server is not needed, the automatic switching of the non-perception theme styles is realized, and the efficiency of switching the theme styles is improved. Moreover, theme style switching can be realized through an IE browser and other low-version browsers, and compatibility is improved.
Drawings
In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings needed to be used in the description of the embodiments or the prior art will be briefly introduced below, it is obvious that the drawings in the following description are only embodiments of the present application, and for those skilled in the art, other drawings can be obtained according to the provided drawings without creative efforts.
Fig. 1 is a schematic flowchart of a theme style switching method disclosed in an embodiment of the present application;
FIG. 2 is a schematic flowchart of a basic style for determining theme color switching disclosed in an embodiment of the present application;
FIG. 3 is a schematic flow chart illustrating a process for determining a target style theme style as disclosed in an embodiment of the present application;
fig. 4 is a schematic flowchart of a theme style switching system disclosed in an embodiment of the present application.
Detailed Description
The technical solutions in the embodiments of the present application will be described clearly and completely with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are only some embodiments of the present application, and not all embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.
In this application, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other identical elements in a process, method, article, or apparatus that comprises the element.
As known from the background art, the conventional theme style switching method causes resource waste, low switching efficiency and poor compatibility.
In order to solve the above problems, embodiments of the present application disclose a theme style switching method and system, which do not need to dynamically refresh a current webpage to implement theme style switching, and avoid resource waste of a current webpage request. When the theme styles are switched, interaction with the server is not needed, the automatic switching of the non-perception theme styles is realized, and the efficiency of switching the theme styles is improved. Moreover, theme style switching can be realized through an IE browser and other low-version browsers, and compatibility is improved. The specific implementation is illustrated by the following examples.
Referring to fig. 1, a schematic flow chart of a theme style switching method disclosed in an embodiment of the present application is shown, where the theme style switching method mainly includes the following steps:
s101: extracting a color style overlay table from the acquired style file, and determining a basic style of theme color switching based on the color style overlay table; the style file is a file showing the theme style of the webpage.
In S101, the basic style for switching the theme color may be a css file, or may be a file in another format, where the content of the file is a style string related to all the obtained color values, and is the same as the content of the style overlay table, but is not necessarily the style overlay table, and mainly depends on the format of the write file for compiling the generated file (generally, for easier understanding, the format of the overlay table is directly generated to manage and maintain).
The front end adopts an engineering mode to develop and realize the technology, so that the whole front end codes (html, css, js codes and the like) are compiled in the early stage of deployment (engineering stage).
Specifically, a process of extracting a color style overlay table from the acquired style file and determining a basic style of theme color switching based on the color style overlay table is as follows:
firstly, extracting a color style stacking list from a fetched style file through a preset function pair; a color style overlay table is a style content associated with a color value.
The style file comprises all style resource files, style contents written in a network and the like.
The preset function may be a hook function, or may be other functions, and the specific preset function is determined by a technician according to an actual situation, which is not specifically limited in the present application. The preset function of the present application is preferably a hook function.
And traversing all style resource files in the style files and style contents written in the network by using a hook function of a life cycle provided in a packing and editing stage, analyzing all the style resource files and the style contents written in the network, and compiling and extracting all the style contents related to the color values to form a very small style overlay table only related to the color values as a basic style for switching the colors of the theme.
In the compiling stage, compiling related style files through corresponding css-loaders (such as scss-loaders and less-loaders) and the like to form related js style running files; secondly, in the stage of compiling js, adopting a plugin mode of plugins to hijack the operation process of js, traversing and reading the content related to the color, and obtaining the style content related to the color value from the corresponding color information through a theme model.
The compiling may be webpack compiling, roolup compiling, glup compiling, etc., and the scheme is not particularly limited.
The contents of the pattern related to the color values include color values of rgb pattern, color values of rgba, color values of 16-system 3-bit pattern, etc., and color values of 16-system 6-bit pattern (e.g.: rgb (0,0,0), rgba (0,0,0, 0.3), #000, # 000000)).
And then, writing the color style stacking table into a preset theme color file to obtain a basic style of theme color switching.
And writing the corresponding color style stacking table into the media color.
And when the theme style switching system is initialized, storing the basic style into a memory of the theme style switching system.
S102: and when the theme style is monitored to be changed, determining the theme style of the target style based on the changed theme style and the basic style.
Specifically, when it is detected that the theme style is changed, a process of determining the theme style of the target style based on the changed theme style and the basic style is shown as a1-a 7.
A1: and when a theme color modification instruction or a theme style switching instruction is received, determining that the theme style is changed.
The operation that the user selects different theme colors (theme color modification instruction) or selects corresponding styles (theme style switching instruction) is monitored, so that the operation of the theme model is triggered.
A2: and under the condition that the theme style changes, classifying the color values of the basic styles to obtain the preset placeholder.
In order to distinguish replacement of the front and rear colors, the colors calculated by the corresponding theme are named and labeled to obtain a preset placeholder, so that the situation that the colors of the latter cover the former is ensured to occur in the process of calculating the new and old themes of the theme template (for example, the original style is black, the new style is white, at the moment, the replacement needs to distinguish the original white, the black needs to be replaced by the new white, the original white needs to be automatically converted into the black according to the calculation of the theme model, if the mode of naming and labeling is not adopted, the new and old white cannot be distinguished, and the abnormal situation that all the colors are white after calculation is caused to occur).
A3: and calculating the color value of the changed theme style to obtain the color value of the preset format.
And selecting different theme colors or selecting corresponding styles for calculation by a user corresponding to the theme model to obtain the color value in the preset format.
And selecting different theme colors or selecting a corresponding style for split calculation by a user corresponding to the theme model to obtain the color value in the preset format.
The splitting calculation is to calculate all color values of one type into color values of other types for processing. For example, the color value corresponding to 6 bits is subjected to splitting calculation to obtain a color value of 3 bits, a color value of rgb, and a color value of rgba.
The color value of the preset format can be in the forms of a 16-system 3-bit string, a 16-system 6-bit string, an rgb mode string, an rgba mode string and the like.
A4: binding a preset placeholder with a color value in a preset format to obtain a binding result; and the binding result is used for prompting the binding of the preset placeholder and the color value in the preset format.
A5: and calculating the color value of the preset format through the preset calculation dimension to obtain the target color value.
And performing traversal calculation according to the calculation dimensions (red, green and blue) of rgb and the step length of 5 to obtain the target color value.
In the technology, all colors are realized by mixing red, green and blue, all color values are numerical values between 0 and 255, in the calculation of the whole theme model, all related color values are basically 5, the current mainstream UI library is basically realized according to basic design specifications, the basic standard color deviation is basically different color value deviations of 5, 10, 15 and the like, therefore, in order to ensure that each mainstream third UI library can be adapted, a calculation mode with the step length of 5 is adopted, namely, the number is increased by 5 every time of calculation to calculate the color values, and the target color values are obtained.
A6: and replacing the preset placeholder in the binding result by the target color value to obtain the target subject character string.
The target subject character string is composed of a color value in a preset format and a target color value.
A7: and updating the basic style of the target theme character string to obtain the target style theme style.
And inserting the generated target theme character string into the body corresponding to the basic style to realize the change of the theme so as to obtain the style of the target style theme.
S103: and executing theme style switching operation based on the target style theme style.
In S103, the theme style switching is completed by replacing the theme color content in the preset tag with the target style theme style through the preset script. Specifically, the theme style switching is completed by replacing the content with the id name of the themeColor in the style label with the target style theme style through the script.
The switching of the theme of the whole system is completed without the unaware of compatible various low-version browsers (such as ie8 and above) interacting with the server.
The preset script of the present application is not particularly limited.
In an actual webpage, different systems have different theme color styles, and users also have the requirements of favorite main color preferences, so that the different system styles can be consistent with the UI specifications of the clients and the preferences of the different users on the color themes, thereby providing a theme style switching function and meeting the personalized requirements of the clients and the users.
In the application scene embodiment, in the process that a user accesses a webpage for the first time, a request is sent to a server according to current user theme data (a user theme color modification instruction or a theme style switching instruction), a withdrawn color theme original file is obtained, and the corresponding theme file is associated with a theme calculation model to form a color file of a basic style of the theme calculation model. Meanwhile, the content of the color file of the basic style is stored in the memory for switching the style of the current theme, and when a subsequent user modifies the theme or selects other colors, the cache data in the memory of the system is directly used for operating the theme model to realize the change of the new theme.
The user can switch any theme style according to the preference of the user, and thousands of people and thousands of faces are really realized. And the theme calculation and replacement can be completed without communicating with the server for many times, so that the communication resource of the server is greatly saved.
And if the preset label is not monitored, creating the preset label, replacing the theme color content in the preset label with the target style theme style through the preset script, and finishing theme style switching.
If no preset tag (style tag) exists, the style tag is dynamically created, and the target style theme style replaces the content with the id name of the mecolor in the style tag, so that the problem that the whole system is switched without interaction with a server and is compatible with various low-version browsers (such as ie8 and above) is solved.
In the whole theme style switching scheme, the third-party UI library which is open according to the current mainstream mode can be applied. Just to better illustrate the general type of the current scheme, the color fields in the corresponding third UI library are extracted as part of the source of the subject document content during the compilation process.
To facilitate understanding of the process of theme style switching, an example is given here:
for example, webpack splitting is first changed to compilation splitting (without limitation, webpack, but other compilation implementations are also possible, such as roolup, glup, and others).
The calculation of the theme is realized in the compiling (webpack compiling, roolup compiling, glup compiling) stage, and all the contents related to all the colors in the system are extracted through compiling and splitting, so as to form a file of a basic theme template (the file only has the style of all the color values).
And sending the custom style or custom theme replacement selected by the user to the theme model, and carrying out tag printing processing on the color value of the corresponding theme template by using the placeholder (namely, taking a corresponding color name for each color value to carry out the theme replacement required later).
And (4) calculating all color values (rgb mode calculation, rgba mode calculation, 16-system 3-bit mode calculation and 16-system 6-bit mode calculation) according to the calculation rule of the theme model to obtain the target theme character string.
And taking the target theme character string as a new theme template, updating the theme template content cached in the current original memory, and inserting the target theme character string into the body corresponding to the basic style to realize the theme change so as to obtain the target style theme style.
And replacing the content with the id name of the themeColor in the style label with the target style and the theme style through the script to complete the switching of the theme style.
In the embodiment of the application, the switching of the theme styles is realized without dynamically refreshing the current webpage, so that the resource waste of the current webpage request is avoided. When the theme styles are switched, interaction with the server is not needed, the automatic switching of the non-perception theme styles is realized, and the efficiency of switching the theme styles is improved. Moreover, theme style switching can be realized through an IE browser and other low-version browsers, and compatibility is improved.
Referring to fig. 2, a process of extracting a color style overlay table from an obtained style file and determining a basic style for theme color switching based on the color style overlay table in S101 mainly includes the following steps:
s201: extracting a color style stacking list from the obtained style file through a preset function pair; a color style overlay table is a style content associated with a color value.
S202: and writing the color style overlay table into a preset theme color file to obtain a basic style of theme color switching.
The execution principle and execution process of S201-S202 are consistent with the execution principle and execution process of extracting the color style overlay table from the obtained style file in S101, and determining the basic style for theme color switching based on the color style overlay table, which may be referred to herein, and are not described herein again.
In the embodiment of the application, a color style stacking table is extracted from the extracted style file through a preset function pair; the color style overlay table is the style content related to the color value, and the color style overlay table is written into a preset theme color file, so that the purpose of obtaining the basic style of theme color switching is achieved.
Referring to fig. 3, a process for determining a theme style of a target style based on a changed theme style and a basic style when a change in the theme style is monitored in S102 is mainly shown, and includes the following steps:
s301: and when a theme color modification instruction or a theme style switching instruction is received, determining that the theme style is changed.
S302: and under the condition that the theme style changes, classifying the color values of the basic styles to obtain the preset placeholder.
S303: and calculating the color value of the changed theme style to obtain the color value of the preset format.
S304: binding a preset placeholder with the color value in the preset format to obtain a binding result; and the binding result is used for prompting the binding of the preset placeholder and the color value in the preset format.
S305: and calculating the color value of the preset format through the preset calculation dimension to obtain the target color value.
S306: and replacing the preset placeholder in the binding result by the target color value to obtain the target subject character string.
S307: and updating the basic style of the target theme character string to obtain the target style theme style.
The execution processes and execution principles of S301 to 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 be changed in S102, and may be referred to here, which is not described again.
In the embodiment of the application, when the theme style is monitored to be changed, the theme style of the target style is determined based on the changed theme style and the basic style, and the purpose of executing theme style switching operation through the theme style of the target style is achieved.
Based on the theme style switching method disclosed in fig. 1 in the foregoing embodiment, the embodiment of the present application further discloses a theme style switching system correspondingly, and as shown in fig. 4, the theme style switching system mainly includes a first determining unit 401, a second determining unit 402, and an executing unit 403.
A first determining unit 401, configured to extract a color style overlay table from the obtained style file, and determine a basic style for theme color switching based on the color style overlay table; the style file is a file showing the theme style of the webpage.
And a second determining unit 402, configured to determine a target style theme style based on the changed theme style and the basic style when it is monitored that the theme style changes.
An executing unit 403, configured to execute a theme style switching operation based on the target style theme style.
Further, the first determining unit 401 includes a drawing-off module and an obtaining module.
The extraction module is used for extracting the color style stacking list from the acquired style file through a preset function pair; a color style overlay table is a style content associated with a color value.
And the acquisition module is used for writing the color style overlay table into a preset theme color file to obtain a basic style of theme color switching.
Further, the second determining unit 402 includes a determining module, a classifying module, a first calculating module, a binding module, a second calculating module, a replacing module, and an updating module.
And the determining module is used for determining that the theme style changes when a theme color modification instruction or a theme style switching instruction is received.
And the classification module is used for classifying the color values of the basic styles to obtain the preset placeholder under the condition that the theme styles are changed.
And the first calculation module is used for calculating the color value of the changed theme style to obtain the color value of the preset format.
The binding module is used for binding the preset placeholder with the color value in the preset format to obtain a binding result; the binding result is used for prompting the binding of the preset placeholder and the color value in the preset format.
And the second calculation module is used for calculating the color value of the preset format through the preset calculation dimension to obtain the target color value.
And the replacing module is used for replacing the preset placeholder in the binding result through the target color value to obtain the target subject character string.
And the updating module is used for updating the basic style of the target theme character string to obtain the style of the target style theme.
Further, the execution unit 403 is specifically configured to replace, by the preset script, the theme color content in the preset tag with the target style theme style, so as to complete theme style switching.
Further, the theme style switching system further comprises a creating unit and a replacing unit.
And the creating unit is used for creating the preset label if the preset label is not monitored.
And the replacing unit is used for replacing the theme color content in the preset label with the target style and the theme style through the preset script so as to complete theme style switching.
Further, the theme style switching system further comprises a storage unit.
And the storage unit is used for storing the basic pattern into the memory.
In the embodiment of the application, the switching of the theme styles is realized without dynamically refreshing the current webpage, so that the resource waste of the current webpage request is avoided. When the theme styles are switched, interaction with the server is not needed, the automatic switching of the non-perception theme styles is realized, and the efficiency of switching the theme styles is improved. Moreover, theme style switching can be realized through an IE browser and other low-version browsers, and compatibility is improved.
While, for purposes of simplicity of explanation, the foregoing method embodiments have been described as a series of acts or combination of acts, it will be appreciated by those skilled in the art that the present application is not limited by the order of acts or acts described, as some steps may occur in other orders or concurrently with other steps in accordance with the application. Further, those skilled in the art should also appreciate that the embodiments described in the specification are preferred embodiments and that the acts and modules referred to are not necessarily required in this application.
It should be noted that, in the present specification, the embodiments are all described in a progressive manner, each embodiment focuses on differences from other embodiments, and the same and similar parts among the embodiments may be referred to each other. For the system-class embodiment, since it is basically similar to the method embodiment, the description is simple, and for the relevant points, reference may be made to the partial description of the method embodiment.
The steps in the method of the embodiments of the present application may be sequentially adjusted, combined, and deleted according to actual needs.
Finally, it should also be noted that, herein, relational terms such as first and second, and the like may be used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions.
The previous description of the disclosed embodiments is provided to enable any person skilled in the art to make or use the present application. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the generic principles defined herein may be applied to other embodiments without departing from the spirit or scope of the application. Thus, the present application is not intended to be limited to the embodiments shown herein but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.
The foregoing is only a preferred embodiment of the present application and it should be noted that those skilled in the art can make several improvements and modifications without departing from the principle of the present application, and these improvements and modifications should also be considered as the protection scope of the present application.
Claims (10)
1. A theme style switching method, comprising:
extracting a color style overlay table from the acquired style file, and determining a basic style of theme color switching based on the color style overlay table; the style file is a file for displaying the theme style of the webpage;
when the theme style is monitored to be changed, determining the theme style of the target style based on the changed theme style and the basic style;
and executing theme style switching operation based on the target style theme style.
2. The method according to claim 1, wherein the extracting a color style overlay table from the obtained style file, and determining a basic style for theme color switching based on the color style overlay table comprises:
extracting a color style stacking table from the obtained style file through a preset function pair; the color style overlay table is style content related to color values;
and writing the color style overlay table into a preset theme color file to obtain a basic style of theme color switching.
3. The method of claim 1, wherein determining a target style theme style based on a changed theme style and the base style when a change in theme style is monitored comprises:
when a theme color modification instruction or a theme style switching instruction is received, determining that the theme style changes;
under the condition that the theme style changes, classifying the color values of the basic style to obtain preset placeholders;
calculating the color value of the changed theme style to obtain the color value of 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 for prompting the binding of the preset placeholder and the color value in the preset format;
calculating the color value of the preset format through a preset calculation dimension to obtain a target color value;
replacing preset placeholders in the binding result by the target color value to obtain a target subject character string;
and updating the basic style of the target theme character string to obtain the target style theme style.
4. The method of claim 1, wherein performing a theme style switching operation based on the target style theme style comprises:
and replacing the theme color content in the preset label with the theme style of the target style through a preset script to complete theme style switching.
5. The method of claim 4, further comprising:
if the preset label is not monitored, creating the preset label;
and replacing the theme color content in the preset label with the target style theme style through the preset script to complete theme style switching.
6. The method according to claim 1, further comprising, after extracting a color style overlay table from the obtained style file and determining a basic style for theme color switching based on the color style overlay table:
and storing the basic pattern into a preset memory.
7. A theme style switching system, the system comprising:
the first determining unit is used for extracting a color style stacking table from the acquired style file and determining a basic style of theme color switching based on the color style stacking table; the style file is a file for displaying the theme style of the webpage;
the second determining unit is used for determining the theme style of the target style based on the changed theme style and the basic style when the theme style is monitored to be changed;
and the execution unit is used for executing theme style switching operation based on the target style theme style.
8. The system of claim 7, wherein the first determining unit comprises:
the drawing module is used for drawing out a color style stacking table from the acquired style file through a preset function pair; the color style overlay table is style content related to color values;
and the acquisition module is used for writing the color style stacking list into a preset theme color file to obtain a basic style of theme color switching.
9. The system of claim 7, wherein the second determining unit comprises:
the determining module is used for determining that the theme style changes when a theme color modification instruction or a theme style switching instruction is received;
the classification module is used for classifying the color values of the basic styles to obtain preset placeholders under the condition that the styles of the themes are changed;
the first calculation module is used for calculating the color value of the changed theme style to obtain the color value of the preset format;
the binding module is used for binding the preset placeholder and the color value in the preset format to obtain a binding result; the binding result is used for prompting the binding of the preset placeholder and the color value in the preset format;
the second calculation module is used for calculating the color value of the preset format through a preset calculation dimension to obtain a target color value;
the replacing module is used for replacing a preset placeholder in the binding result through the target color value to obtain a target subject character string;
and the updating module is used for updating the basic style of the target theme character string to obtain the target style theme style.
10. The system of claim 7, wherein the execution unit is specifically configured to:
and replacing the theme color content in the preset label with the target style theme style through a preset script to complete theme style switching.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111394262.7A CN114090160A (en) | 2021-11-23 | 2021-11-23 | Theme style switching method and system |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111394262.7A CN114090160A (en) | 2021-11-23 | 2021-11-23 | Theme style switching method and system |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114090160A true CN114090160A (en) | 2022-02-25 |
Family
ID=80303241
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111394262.7A Pending CN114090160A (en) | 2021-11-23 | 2021-11-23 | Theme style switching method and system |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114090160A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114780182A (en) * | 2022-03-11 | 2022-07-22 | 北京百度网讯科技有限公司 | Method, device, equipment, medium and product for switching icon styles |
| CN115202535A (en) * | 2022-08-01 | 2022-10-18 | 北京金山办公软件股份有限公司 | Icon editing method and device, electronic equipment and storage medium |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20120212501A1 (en) * | 2011-02-21 | 2012-08-23 | International Business Machines Corporation | Automated method for customizing theme colors in a styling system |
| CN108228677A (en) * | 2016-12-22 | 2018-06-29 | 北京国双科技有限公司 | Switch the method and apparatus of subject of Web site style |
| CN110780873A (en) * | 2019-09-06 | 2020-02-11 | 平安普惠企业管理有限公司 | Interface color adaptation method and device, computer equipment and storage medium |
| CN111522550A (en) * | 2020-04-27 | 2020-08-11 | 成都路行通信息技术有限公司 | Display method and configuration method for front-end online dynamic switching theme |
-
2021
- 2021-11-23 CN CN202111394262.7A patent/CN114090160A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20120212501A1 (en) * | 2011-02-21 | 2012-08-23 | International Business Machines Corporation | Automated method for customizing theme colors in a styling system |
| CN108228677A (en) * | 2016-12-22 | 2018-06-29 | 北京国双科技有限公司 | Switch the method and apparatus of subject of Web site style |
| CN110780873A (en) * | 2019-09-06 | 2020-02-11 | 平安普惠企业管理有限公司 | Interface color adaptation method and device, computer equipment and storage medium |
| CN111522550A (en) * | 2020-04-27 | 2020-08-11 | 成都路行通信息技术有限公司 | Display method and configuration method for front-end online dynamic switching theme |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114780182A (en) * | 2022-03-11 | 2022-07-22 | 北京百度网讯科技有限公司 | Method, device, equipment, medium and product for switching icon styles |
| CN114780182B (en) * | 2022-03-11 | 2024-05-10 | 北京百度网讯科技有限公司 | Icon style switching method, device, equipment, medium and product |
| CN115202535A (en) * | 2022-08-01 | 2022-10-18 | 北京金山办公软件股份有限公司 | Icon editing method and device, electronic equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108664239B (en) | Cross-technology-stack web front-end development system and method based on micro-service | |
| TW202141300A (en) | Page processing method, device, apparatus and storage medium | |
| CN114090160A (en) | Theme style switching method and system | |
| CN105511873B (en) | User interface control display method and device | |
| US8635548B2 (en) | Configuring a page for drag and drop arrangement of content artifacts in a page development tool | |
| US7941746B2 (en) | Extended cascading style sheets | |
| CN105700925B (en) | A kind of interface implementing method and device of APP | |
| IL188663A (en) | Web page rendering priority mechanism | |
| WO2009011837A1 (en) | Extraction and reapplication of design information to existing websites | |
| JP2004342105A (en) | Portlet style conformity in pervasive agent | |
| CN110020356A (en) | A kind of code generating method of page module, apparatus and system | |
| CN108959475A (en) | A kind of webpage setting method and device | |
| CN108984632A (en) | A kind of webpage setting method and device | |
| CN106708506A (en) | Method and device for optimizing starting speed of Android applications visually | |
| CN108874412A (en) | For updating the method, apparatus, equipment and system of interface layout | |
| CN104731815A (en) | Webpage element drawing method and device | |
| CN113656005B (en) | Application component library construction method, application component configuration method and related devices | |
| CN113268232B (en) | Page skin generation method and device and computer readable storage medium | |
| US9223894B2 (en) | Method for producing at least a portion of a data visualization layout on a display of a device provided with at least a smart card, method for codifying a plurality of HTML instructions and corresponding system | |
| CN105740239A (en) | Translation method and system of character on webpage | |
| CN112487330A (en) | UI skin changing method, system, device and storage medium based on XML | |
| CN111199568B (en) | Vector diagram drawing method and device and computer readable storage medium | |
| CN115904167A (en) | Processing method and device of webpage icon, storage medium and electronic equipment | |
| US8037015B2 (en) | Flexible interface using scalable vector graphics with metalevel palette | |
| CN108920561A (en) | A kind of webpage setting method and device |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |