Page theme generation method and device, electronic equipment and readable storage medium

Abstract

The embodiment of the invention provides a page theme generation method and device, electronic equipment and a readable storage medium. In the method, a first file comprising element identifiers of a plurality of page theme elements and default color identifiers respectively corresponding to the element identifiers is obtained, a second file comprising the element identifiers of at least part of the page theme elements and self-defined color identifiers respectively set for the element identifiers is obtained, and the first file and the second file are stored from the first file. Obtaining a target element identifier which is the same as the element identifier of the second file, and replacing a default color identifier corresponding to the target element identifier in the first file by using a self-defined color identifier to obtain a third file; and generating a custom page theme according to the third file. The page theme obtaining efficiency is high, and errors are not prone to occurring.

Description

Technical Field

[0001] The present invention belongs to the field of computer technology, and in particular, relates to a page theme generation method, device, electronic device and readable storage medium. Background Art

[0002] The page theme includes the color of the page, etc. With the development of front-end engineering development, the page functions increase accordingly, and the page theme styles become more and more abundant with the increase of page functions. There are differences between different page theme styles, which makes it difficult to modify and manage page themes.

[0003] In the related art, multiple sets of theme styles can be defined, and the theme styles can be switched according to user needs. However, based on this method, multiple sets of theme style files need to be set, and this method has the problem of low efficiency and error-prone generation of page themes. Summary of the invention

[0004] The present invention provides a page theme generation method, device, electronic device and readable storage medium to solve the technical problems of low efficiency and easy error in page theme generation in related technologies.

[0005] In a first aspect, the present invention provides a method for generating a page theme, the method comprising: obtaining a first file; the first file comprising: element identifiers of multiple page theme elements, and default color identifiers corresponding to each element identifier in the first file; obtaining a second file; the second file comprising: element identifiers of at least some of the page theme elements, and custom color identifiers set for each element identifier in the second file; obtaining a target element identifier that is the same as the element identifier of the second file from the first file; using the custom color identifier to replace the default color identifier corresponding to the target element identifier in the first file to obtain a third file; generating a custom page theme based on the third file.

[0006] Optionally, the method further includes: acquiring a fourth file; the fourth file includes: at least one preset color identifier, and preset color values ​​corresponding to each preset color identifier;

[0007] The method of generating a custom page theme according to the third file includes: obtaining color values ​​corresponding to each element identifier in the third file according to the fourth file; and setting the color of the page theme elements corresponding to the element identifiers in the third file according to the color values ​​corresponding to each element identifier in the third file to obtain a custom page theme.

[0008] Optionally, according to the fourth file, color values ​​corresponding to each element identifier in the third file are obtained, including: obtaining a preset color identifier in the fourth file that is identical to the color identifier of the third file; and determining the preset color value corresponding to the preset color identifier that is identical to the color identifier of the third file as the color value corresponding to the element identifier in the third file.

[0009] Optionally, the first file is a file in SCSS format, and the method further includes: obtaining a first variable mapping file based on the first file; the first variable mapping file includes a first correspondence between element identifiers in SCSS format in the first file and element identifiers in CSS format, and a second correspondence between default color identifiers in SCSS format in the first file and default color identifiers in CSS format; obtaining a default page theme based on the first variable mapping file and the first file.

[0010] Optionally, obtaining the first variable mapping file according to the first file includes: converting the element identifiers in SCSS format in the first file into element identifiers in CSS format according to CSS syntax, and constructing a first correspondence between the element identifiers in SCSS format and the element identifiers in CSS format; converting the default color identifiers in SCSS format in the first file into default color identifiers in CSS format according to CSS syntax, and constructing a second correspondence between the default color identifiers in SCSS format and the default color identifiers in CSS format; obtaining the first variable mapping file according to the first correspondence and the second correspondence.

[0011] Optionally, the third file is a file in SCSS format, and generating a custom page theme based on the third file includes: obtaining a second variable mapping file based on the third file; the second variable mapping file includes a third correspondence between element identifiers in SCSS format in the third file and element identifiers in CSS format, and a fourth correspondence between color identifiers in SCSS format in the third file and color identifiers in CSS format; obtaining a custom page theme based on the second variable mapping file and the third file.

[0012] Optionally, obtaining the second variable mapping file according to the third file includes: converting element identifiers in SCSS format in the third file into element identifiers in CSS format according to CSS syntax, and constructing a third correspondence between element identifiers in SCSS format and element identifiers in CSS format; converting color identifiers in SCSS format in the third file into color identifiers in CSS format according to CSS syntax, and constructing a fourth correspondence between color identifiers in SCSS format and color identifiers in CSS format; obtaining the second variable mapping file according to the third correspondence and the fourth correspondence.

[0013] In a second aspect, the present invention provides a page theme generating device, the device comprising: a first acquisition module, used to acquire a first file; the first file comprises: element identifiers of multiple page theme elements, and default color identifiers corresponding to each element identifier in the first file; a second acquisition module, used to acquire a second file; the second file comprises: element identifiers of at least some page theme elements, and custom color identifiers set for each element identifier in the second file; a third acquisition module, used to acquire, from the first file, a target element identifier that is the same as the element identifier of the second file; a replacement module, used to replace the default color identifier corresponding to the target element identifier in the first file with the custom color identifier, to obtain a third file; a generation module, used to generate a custom page theme based on the third file.

[0014] In a third aspect, an embodiment of the present application provides an electronic device, comprising: a processor, a memory, and a computer program stored in the memory and executable on the processor, wherein the processor implements the method described in the first aspect when executing the program.

[0015] In a fourth aspect, an embodiment of the present application provides a readable storage medium, when the instructions in the storage medium are executed by a processor of an electronic device, the electronic device can execute the method described in the first aspect.

[0016] In an embodiment of the present invention, a first file includes element identifiers of multiple page theme elements, and a default color identifier corresponding to each element identifier in the first file. The element identifier and the default color identifier corresponding to the element identifier constitute a variable for generating a default page theme. When it is necessary to obtain a custom page theme, it is only necessary to obtain a second file including variables different from the default page theme, and then use the part of the variables to overwrite the corresponding variables in the first file of the default page theme to obtain a third file for generating a custom page theme. Based on the third file, the custom page theme can be obtained. This embodiment does not require writing theme style files for multiple sets of page themes. It only needs to obtain a second file different from the first file to obtain the difference between the custom page theme and the default page theme. Based on the difference, the custom page theme can be obtained, which improves the generation efficiency of the custom page theme and is less prone to errors when modifying the default page theme. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0018] Figure 1 It is a flow chart of the steps of a method for generating a page theme provided by an embodiment of the present invention;

[0019] Figure 2 is a flowchart of another method for generating a page theme provided by an embodiment of the present invention;

[0020] Figure 3 It is a flowchart of the steps of another method for generating a page theme provided by an embodiment of the present invention;

[0021] Figure 4 is a flowchart of another method for generating a page theme provided by an embodiment of the present invention;

[0022] Figure 5 It is a flowchart of the steps of another method for generating a page theme provided by an embodiment of the present invention;

[0023] Figure 6 It is a structural diagram of a page theme generating device provided by an embodiment of the present invention;

[0024] Figure 7 It is a structural diagram of an electronic device provided by an embodiment of the present invention. DETAILED DESCRIPTION

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

[0026] Figure 1 is a flow chart of the steps of a method for generating a page theme provided by an embodiment of the present invention. Figure 1 As shown, the method may include:

[0027] Step 101, obtaining a first file.

[0028] The first file includes: element identifiers of a plurality of page theme elements, and a default color identifier corresponding to each element identifier in the first file.

[0029] Among them, the page theme elements may include a theme button, a background area, etc. of the theme page, and the default color identifier may be a color name, a number, etc.

[0030] The element identifier and its corresponding default color identifier constitute a set of variables for generating a default page theme. For example, the first file is a preprocessed Cascading Style Sheets (SCSS) format file for storing variables in the default page theme, and the first file can be marked as variables.scss.

[0031] For example, the first file may include the code: $color-master:$blue-base, which indicates that the theme element is the page main button color-master, and the default color identifier of the page main button color-master is the blue base color Blue-base.

[0032] Step 102: Obtain a second file.

[0033] The second file includes: element identifiers of at least some of the page theme elements, and a custom color identifier set for each element identifier in the second file.

[0034] The element identifiers and custom color identifiers in the second file are modified based on the first file and according to user needs.

[0035] For example, the first file includes:

[0036] $color-master:$blue-base; / / Theme color, used for theme buttons

[0037] $color-master-hover:$blue-5; / / Theme-hover color, used for theme button hover, etc.

[0038] $color-active:$blue-7; / / Theme-trigger color, used for selected state.

[0039] That is, the theme color in the default page theme is blue-base, the theme hover color is blue-5, and the theme trigger color is blue-7. When customizing the page theme, the theme color to be set is blue-1, so the second file can include:

[0040] $color-master:$blue-1; / / Theme color, used for theme buttons

[0041] Step 103: Acquire, from the first file, a target element identifier that is identical to the element identifier of the second file.

[0042] For example, the element identifier in the first file is compared with the element identifier in the second file to obtain the target element identifier.

[0043] For example, in one embodiment, the second file includes:

[0044] $color-master:$blue-1; / / Theme color, used for theme buttons

[0045] The first file includes:

[0046] $color-master:$blue-base; / / Theme color, used for theme buttons

[0047] $color-master-hover:$blue-5; / / Theme-hover color, used for theme button hover, etc.

[0048] $color-active:$blue-7; / / Theme-trigger color, used for selected state.

[0049] In this embodiment, the target element identifier is: color-master.

[0050] Step 104: Use the custom color identifier to replace the default color identifier corresponding to the target element identifier in the first file to obtain a third file.

[0051] In an example, the target element identifier is at least a part of multiple element identifiers of a first file, and a custom color identifier corresponding to the target element identifier is used to replace the default color identifier of the target element identifier in the first file to obtain a third file. The third file thus obtained includes: the target element identifier and the custom color identifier corresponding to the target element identifier, the element identifier that is not replaced, and the default color identifier corresponding to the element identifier that is not replaced.

[0052] For example, in the above embodiment, the target element identifier is color-master and the custom color identifier is blue-1. After the custom color identifier is used to replace the default color identifier of the target element identifier in the first file, the third file obtained is:

[0053] $color-master:$blue-1; / / Theme color, used for theme buttons

[0054] $color-master-hover:$blue-5; / / Theme-hover color, used for theme button hover, etc.

[0055] $color-active:$blue-7; / / Theme-trigger color, used for selected state

[0056] Step 105: Generate a custom page theme based on the third file.

[0057] For example, a fourth file is obtained, where the fourth file includes a correspondence between a preset color identifier and a preset color value, wherein the fourth file may be a SCSS format file, and the color value is a color code that complies with SCSS syntax requirements.

[0058] According to the fourth file, the color value corresponding to each color identifier in the third file is obtained, the color value is determined as the color value corresponding to the color identifier, and the color is set for the theme element corresponding to the element identifier according to the color value to generate a custom page theme.

[0059] For example, the fourth file may include:

[0060] $blue-1:#f0f7ff; / / The color value corresponding to blue-1 is f0f7ff

[0061] $blue-5:#699bff; / / The color value corresponding to blue-5 is 699bff

[0062] $blue-7:#2955cf; / / The color value corresponding to blue-7 is 2955cf

[0063] Among them, f0f7ff, 699bff and 2955cf are color codes in SCSS syntax, corresponding to light blue, lighter blue and dark blue respectively.

[0064] The third file is:

[0065] $color-master:$blue-1; / / Theme color, used for theme buttons

[0066] $color-master-hover:$blue-5; / / Theme-hover color, used for theme button hover, etc.

[0067] $color-active:$blue-7; / / Theme-trigger color, used for selected state

[0068] According to the third file and the fourth file, the theme color in the custom page theme is set to the color corresponding to f0f7ff, the theme-hover color of the custom page theme is set to the color corresponding to 699bff, and the theme-trigger color of the custom page theme is set to the color corresponding to 2955cf. After setting the colors, the custom page theme is obtained.

[0069] With the continuous development of front-end engineering development, the page theme styles involved in enterprise-level projects have expanded with the continuous increase in functions, making them increasingly difficult to manage and modify. On the one hand, it takes a lot of effort to make global modifications to a certain part of the style; on the other hand, when there is a need to replace the style on a large scale, there are high requirements for the overall style design and the implementation of switching styles.

[0070] In the related art, the method for modifying the style includes defining multiple sets of theme styles for switching, which requires setting up multiple sets of style files, each set of styles is fixed, which is not conducive to continuous development.

[0071] In this embodiment, a first file is obtained, and the element identifiers and the default color identifiers corresponding to the element identifiers included in the first file constitute a variable for generating a default page theme. When a custom page theme needs to be obtained, only a second file different from the first file needs to be obtained, and the variables in the second file are used to overwrite the corresponding variables in the first file to obtain a third file. Based on the third file, a custom page theme can be obtained. This embodiment does not require the preparation of theme style files for multiple sets of page themes. The custom page theme can be obtained by only obtaining the difference between the custom page theme and the default page theme variable, which improves the generation efficiency of the custom page theme and is not prone to errors when modifying the default page theme.

[0072] Reference Figure 2 The method of this embodiment may further include the following steps:

[0073] Step 201, obtaining a first file.

[0074] The first file includes: element identifiers of a plurality of page theme elements, and a default color identifier corresponding to each element identifier in the first file.

[0075] The method of this step has been described in the aforementioned step 101 and will not be repeated here.

[0076] Step 202: Obtain a second file.

[0077] The second file includes: element identifiers of at least some of the page theme elements, and a custom color identifier set for each element identifier in the second file.

[0078] The method of this step has been described in the aforementioned step 102 and will not be repeated here.

[0079] Step 203: Acquire, from the first file, a target element identifier that is identical to the element identifier of the second file.

[0080] The element identifier in the first file is compared with the element identifier in the second file to obtain the target element identifier.

[0081] Step 204: Use the custom color identifier to replace the default color identifier corresponding to the target element identifier in the first file to obtain a third file.

[0082] The third file includes the element identifiers that are not replaced in the first file, the default color identifiers corresponding to the element identifiers, and the element identifiers and the custom color identifiers in the second file.

[0083] Step 205: Obtain a fourth file.

[0084] For example, the fourth file includes: at least one preset color identifier, and a preset color value corresponding to each preset color identifier.

[0085] Step 206: Obtain, according to the fourth file, the color value corresponding to each element identifier in the third file.

[0086] The third file is a file after replacing the default color identifier corresponding to the target element identifier of the first file. This process can only replace the color identifier without replacing the element identifier, or can also replace the target element identifier and the custom color identifier in the second file at the same time. The element identifier in the third file is the same as the element identifier in the first file.

[0087] The fourth file includes a preset color identifier and a preset color value corresponding to the preset color identifier. The preset color value of the color identifier corresponding to the element identifier in the third file is queried from the fourth file, and the preset color value is determined as the color value corresponding to the element identifier in the third file.

[0088] For example, step 206 may include:

[0089] Step 2061: Obtain a preset color identifier in the fourth file that is the same as the color identifier of the third file.

[0090] The preset color identification of the fourth file is compared with the color identification in the third file to obtain the preset color identification which is the same as the color identification of the third file.

[0091] Step 2062: Determine the preset color value corresponding to the preset color identifier that is the same as the color identifier of the third file as the color value corresponding to the element identifier of the third file.

[0092] Specifically, for each element identifier in the third file: a color identifier corresponding to the element identifier is obtained, and a preset color value corresponding to a preset color identifier that is the same as the color identifier is determined as the color value corresponding to the element identifier.

[0093] For example, in one embodiment, the third file includes:

[0094] $color-master:$blue-1; / / Theme color, used for theme buttons

[0095] The fourth file includes:

[0096] $blue-1:#f0f7ff; / / The color value corresponding to blue-1 is f0f7ff

[0097] For the element identifier color-master in the third file, the corresponding color identifier is blue-1. In the fourth file, the color value corresponding to blue-1 is f0f7ff. In this embodiment, the color value corresponding to the element identifier color-master in the third file is f0f7ff.

[0098] By using the method of this embodiment, the color value of each element identifier in the third file can be obtained. When generating a custom page theme based on the third file, the color of the theme element corresponding to the element identifier in the third file is set according to the element identifier color value to obtain the custom page theme.

[0099] Step 207 , according to the color values ​​corresponding to each element identifier in the third file, color setting is performed on the page theme elements corresponding to the element identifiers in the third file to obtain a custom page theme.

[0100] In this embodiment, the page theme element of the first file and its corresponding default color identifier can constitute a variable of the default page theme. When it is necessary to obtain a custom page theme, it is only necessary to obtain a second file including variables different from the default page theme, and then use this part of the variables to overwrite the corresponding variables in the first file of the default page theme to obtain a third file. Based on the third file and a fourth file including a preset color identifier and a preset color value corresponding to the preset color identifier, the color value corresponding to the element identifier in the third file can be obtained. The color of the page theme element corresponding to the element identifier is set according to the color value to obtain the custom page theme. In this embodiment, there is no need to write theme style files for multiple sets of page themes respectively. It is only necessary to obtain a second file including the difference between the custom page theme and the default page theme, and a fourth file including a preset color identifier and a preset color value corresponding to the preset color identifier to obtain the custom page theme, thereby improving the generation efficiency of the custom page theme and not prone to errors when modifying the default page theme.

[0101] After step 201, the method further includes:

[0102] Step 208: Obtain a first variable mapping file according to the first file.

[0103] The first variable mapping file includes a first correspondence between element identifiers in SCSS format in the first file and element identifiers in CSS format, and a second correspondence between default color identifiers in SCSS format in the first file and default color identifiers in CSS format.

[0104] The first variables map file may be represented as variables-map.scss.

[0105] Step 208 may include the following sub-steps:

[0106] Sub-step 2081, converting the element identifier in the SCSS format in the first file into the element identifier in the CSS format according to the CSS syntax, and constructing a first corresponding relationship between the element identifier in the SCSS format and the element identifier in the CSS format.

[0107] For example, the element identifier in SCSS format is $color-master. According to the CSS syntax, the element identifier converted into CSS format is: --color-master.

[0108] Sub-step 2082, converting the default color identifier in SCSS format in the first file into the default color identifier in CSS format according to the CSS syntax, and constructing a second corresponding relationship between the default color identifier in SCSS format and the default color identifier in CSS format.

[0109] For example, the default color identifier in SCSS format is $blue-base, which is converted to the default color identifier in CSS format: --blue-base.

[0110] Sub-step 2083, obtaining a first variable mapping file according to the first corresponding relationship and the second corresponding relationship.

[0111] For example, the first variable mapping file may include:

[0112] $color-master:var(--color-master);

[0113] $blue-base:var(--blue-base).

[0114] Step 209: Obtain a default page theme according to the first variable mapping file and the first file.

[0115] According to the variable mapping file, the first file is converted into a default page theme file in CSS format. The default page theme file in CSS format is parsed and executed by a browser to obtain a default page theme.

[0116] For example, after step 204, the method further includes:

[0117] Step 210: Obtain a second variable mapping file according to the third file.

[0118] For example, the second variable mapping file includes a third correspondence between element identifiers in SCSS format and element identifiers in CSS format in the third file, and a fourth correspondence between color identifiers in SCSS format and color identifiers in CSS format in the third file.

[0119] Furthermore, the element identifier in the third file is the same as the element identifier in the first file, and the color identifier in the third file includes the target color identifier that is the same as the first file and the second file, and the color identifier in the first file except the target color identifier.

[0120] For example, step 210 may include the following sub-steps:

[0121] Sub-step 2101, converting the element identifiers in the SCSS format in the third file into element identifiers in the CSS format according to the CSS syntax, and constructing a third corresponding relationship between the element identifiers in the SCSS format and the element identifiers in the CSS format.

[0122] The method of this step can refer to the description of the aforementioned sub-step 2081 and will not be repeated here.

[0123] Sub-step 2102: converting the color identifier in the SCSS format in the third file into the color identifier in the CSS format according to the CSS syntax, and constructing a fourth corresponding relationship between the color identifier in the SCSS format and the color identifier in the CSS format.

[0124] The method of this step can refer to the description of the aforementioned sub-step 2082, which will not be repeated here.

[0125] Sub-step 2103, obtaining a second variable mapping file according to the third corresponding relationship and the fourth corresponding relationship.

[0126] For example, according to the variable mapping file, the third file is converted into a custom page theme file in CSS format. The custom theme page theme file in CSS format is parsed and executed by the browser to obtain the custom theme page theme.

[0127] Step 211, obtaining a custom page theme according to the second variable mapping file and the third file.

[0128] Figure 3 A method for adjusting the theme color of a page is provided in an embodiment of the present invention. Figure 3 , the method may include the following steps:

[0129] Step S1, define the palette file _palette.scss, the default variable file variables.scss, the palette file _palette.scss, and the custom variable file variables-source.scss of the custom body.

[0130] The palette file _palette.scss in this step is equivalent to the fourth file in the aforementioned embodiment, the default variable file variables.scss is equivalent to the first file in the aforementioned embodiment, and the custom variable file variables-source.scss is equivalent to the second file in the aforementioned embodiment.

[0131] The files created in this step are original files. Specifically, the developer formulates files for constructing the default page theme style and one or more sets of custom files that differ from the default page theme style according to the user interface (UI) prototype or design requirements.

[0132] Among them, if there is only one set of page theme style files, it is equivalent to having only one page theme style. The method of generating a default page theme based on this file has been explained in the above embodiment and will not be repeated here.

[0133] Furthermore, it is necessary to create a _palette.scss file, in which all variables and corresponding values ​​related to the theme style are recorded. The variables and corresponding values ​​here include the preset color identifiers and preset color values ​​in the aforementioned embodiment.

[0134] After creating the _palette.scss file, you also need to create the variables.scss file, which contains all the variables and corresponding values ​​of the styles that will be applied to the page. The variables here are equivalent to the element identifiers in the above embodiment, and the corresponding values ​​here are equivalent to the color identifiers in the above embodiment.

[0135] If you need to generate multiple sets of theme styles, you need to create a specific file directory and create the _palette.scss file and variables-source.scss file in the directory. In the variables-source.scss file, you only need to record the style variables and corresponding values ​​that are different between the custom page theme and the default page theme.

[0136] For example, the _palette.scss file of the default page theme style can include the following content:

[0137] $blue-1:#f0f7ff; / / The color value corresponding to blue-1 is f0f7ff

[0138] $blue-5:#699bff; / / The color value corresponding to blue-5 is 699bff

[0139] $blue-7:#2955cf; / / The color value corresponding to blue-7 is 2955cf

[0140] The variables.scss file of the default page theme style can include the following:

[0141] $color-master:$blue-base; / / Theme color, used for theme buttons

[0142] $color-master-hover:$blue-5; / / Theme-hover color, used for theme button hover, etc.

[0143] $color-active:$blue-7; / / Theme-trigger color, used for selected state

[0144] The _palette.scss file for custom theme styles can include the following:

[0145] $blue-1:#f0f7ff; / / The color value corresponding to blue-1 is f0f7ff

[0146] $blue-5:#699bff; / / The color value corresponding to blue-5 is 699bff

[0147] $blue-7:#2955cf; / / The color value corresponding to blue-7 is 2955cf

[0148] The variables-source.scss file for custom page theme styles can include the following:

[0149] $color-master:$blue-1; / / Theme color, used for theme buttons

[0150] Step S2, read in _palette.scss and variables.scss data.

[0151] Specifically, through the command Npm run build:vars, read the 8-bit Unicode Transformation Format (utf-8) _palette.scss and variables.scss data.

[0152] Step S3, determine whether the file to be processed is a default page theme file, if yes, proceed to step S6, otherwise proceed to step S4.

[0153] For example, whether the file to be processed is a default page theme file can be determined based on the keywords used to identify whether the page theme is the default page theme or a custom page theme. If the file to be processed is a file of the default page theme, proceed to step S6; if the file to be processed is a file of the custom page theme, proceed to step S4.

[0154] Step S4, read the variables-source.scss file of the custom page theme and the Variables.scss file of the default page theme, split them with '\n', and generate a variables file.

[0155] If it is a custom page theme, the read variables-source.scss data is represented as themeVariables, split into an array by line breaks, and compared with the variables data of the default page theme, overwriting the values ​​of the same variable names in the default page theme.

[0156] Step S5, traverse variables, replace the variable values ​​in the default page theme that have the same name as themeVariables with the variable values ​​of the custom page theme, and enter step S7.

[0157] That is, convenience variables replace the values ​​of variables in the default page theme that are the same as those in the custom page theme with the variables in the custom page theme.

[0158] The variables in this step are equivalent to the element identifiers in the aforementioned embodiment, and the variable values ​​are equivalent to the color identifiers in the aforementioned embodiment.

[0159] Step S6, concatenate palette and variables data to generate batchData, and split them with '\n' to generate variables array, and create Set variable keys and empty array exports at the same time.

[0160] Specifically, if it is the default page theme data, concatenate the palette and variables data to generate batchData, split the data with newline characters to get array variables, create an empty array exports and a Set type object keys.

[0161] If it is the default page theme data, there is no need to perform the replacement and overwriting operation in step S5, and palette and variables are directly spliced ​​to generate batch data batchData.

[0162] Step S7, traverse variables, split the value starting with '$' with ':', take the value of the zeroth item as key, remove '\s' and store it in keys, and store key:$key in exports.

[0163] Specifically, traverse variables, split the traversal items starting with the character $ by the character colon, take the first item of the split, and remove the character $ to get the key, add the key to keys to prevent duplicate addition, and build key:$key structure data, and push the structure data to the exports array.

[0164] For example, the _palette.scss file of the default page theme style can include the following:

[0165] $bule-base:#3d73fs!default

[0166] The variables.scss file of the default page theme style can include the following:

[0167] $color-master:$bulu-base! default.

[0168] These data are concatenated to obtain variables, and then processed according to the method in this step to obtain exports that can be expressed as:

[0169] bule-base: $bule-base

[0170] color-master: $color-master

[0171] Step S8, generating a scss variable file index.tmp.Scss with actual style values.

[0172] For example, the variable file index.tmp.Scss can include the following data in exports:

[0173] bule-base: $bule-base;

[0174] color-master: $color-master.

[0175] Step S9, compress and compile the index.tmp.Scss file, extract the cssltems by splitting them with ':', and create a new Map variable cssMap.

[0176] When reading index.tmp.scss, it can be automatically translated according to the variables.scss file to obtain the variables and the variable values ​​corresponding to the variables, and based on the variables and the variable values ​​corresponding to the variables, the cssItems file is obtained.

[0177] Generating cssItems is to prepare for generating CSS variable initialization. For example, the theme element corresponding to bule-base is color-master, and its corresponding color value is 3d73fs. cssItems can include the following content: 'colormaster:#3d73fs'.

[0178] Step S10, traverse the cssltems file, construct key-value pairs by splitting them with ':' and store them in the cssMap file.

[0179] This step is used to build a cssMap file. Specifically, traverse the cssItems array, separate them with colons, build a Map object with the style variable name as the value and the formatted style name as the key, and fill it into the cssMap.

[0180] A key-value pair is constructed according to cssItems, and the cssMSP of this step is obtained according to the key-value pair. For example, cssItems may include the following content: 'colormaster:#3d73fs', and the key-value pair constructed according to the item is: colormaster:#3d73fs.

[0181] Step S11, create an exports empty array, and split batchData with '\n' to generate a variables array.

[0182] This step is to prepare the basic data for generating CSS variable files. Specifically, you can declare an empty array exports and split batchData into array variables with line breaks.

[0183] Step S12, traverse variables, split the value starting with '$' with ':', take the value of the zeroth item and remove $ as jsKey, and replace the '$' of the zeroth item value with '--' and save it as key, and finally save the key: cssMap[jskey] into exports.

[0184] Construct CSS variables by traversing variables, separating the traversal items starting with the character $ with a colon, removing the $ character from the first item, converting it toUpperCamelCase format, and saving it as jsKey.

[0185] Then replace the $ character in the first item with '--' and save it as key, so that you can get the variable value owned by the corresponding jsKey in cssMap, and then record it as value. In this way, you can construct CSS variable values ​​in the form of key:value and save these variables in exports.

[0186] In one embodiment, variables include: color-master:#3d73fs. Then, according to the method of this step, the CSS variable value in the key:value format is obtained: --color-master:#3d73fs.

[0187] Step S13, determine whether the page theme is the default page theme, if yes, go to step S15, otherwise go to step S14.

[0188] If it is the default page theme, then according to step S15, the data in exports is processed. Otherwise, it is processed according to the method of step S14.

[0189] Step S14, outputting the exports merged file css-var.css of the custom page theme identifier.

[0190] Then proceed to step S16

[0191] If you are building a custom page theme, then output an exports file css-var.css with a custom page theme specific name. For example, css-var.css can include: --color-master:#3d73fs.

[0192] Step S15, output the exports merged file css-var.css marked with root.

[0193] This step is used to generate a CSS variable file. If the constructed CSS variable is the default page theme style, the exports file css-var.css with the ':root' identifier will be output.

[0194] Step S16, delete index.tmp.scss, use batchData to generate index.scss, create an exports empty array and a Set type variable keys, and split batchData for traversal.

[0195] The method of this step has been explained in the previous steps and will not be repeated here.

[0196] Step S17, split the traversal items by colon, take the zeroth item as key, then take the zeroth item and replace '$' with '--', and construct key: var(key.replace('$','--'))! The default format data is stored in exports.

[0197] Initialize SCSS variables and map them to CSS var functions, then declare exports empty arrays and Set type variables keys. For example, the exports obtained in this step can include: $blue-base:var(--blue-base).

[0198] Step S18, merge the export arrays, output the variables-map.scss file, and form a mapping from scss variables to css variables.

[0199] For example, the variables-map.scss file could include: $blue-base:var(--blue-base).

[0200] An automatic generation tool that can implement steps S1 to S18 can be used to execute steps S1 to S18 through the automatic generation tool to obtain multi-theme style variables that are compatible with CSS and SCSS. This embodiment provides a paradigm for developing and maintaining styles for enterprise-level projects.

[0201] Combine the following Figure 4 , the method of the embodiment of the present application is further illustrated by reference to Figure 4 , the method may include the following steps:

[0202] Step M1, build the original files, including the _palette.scss file, the variables.scss file, and the variables-source.scss file.

[0203] If there is only one set of theme styles, you need to create a _palette.scss file, record all theme style-related variables and corresponding values ​​in it, and then create a variables.scss file; if you need to generate multiple sets of theme styles, you need to create a specific file directory, and create a _palette.scss file and a variables-source.scss file in the directory.

[0204] Step M2, read the variables.scss file and _palette.scss file of the default theme style. If it is a custom page theme, read the _palette.scss file and variables-source.scss file.

[0205] Step M3, concatenate palette and variables data to generate batchData.

[0206] If it is the default page theme data, concatenate the palette and variables data to generate batchData, split the data with newline characters to get array variables, and create an empty array exports and a Set type object keys.

[0207] If it is a custom page theme, define the read variables-source.scss data as themeVariables, and split the themeVariables data into an array with newline characters, and then compare it with the variables data of the default page theme. Use the variable value with the same variable name as the variable in the default page theme's variables to overwrite the value of the same variable name in the default page theme.

[0208] Step M4, construct the exports array according to the variables data.

[0209] When traversing variables, split the traversal items starting with the character $ by the character colon, take the first item of the split and remove the character $ as the key, add the key to keys to prevent repeated addition, and construct key: $key; push the structure data to the exports array.

[0210] Step M5: Obtain and output a temporary index file according to the exports data.

[0211] For example, organize the exports content into an SCSS file with the name: export{...exports}.

[0212] Step M6, read the temporary index file, compress and compile to get data, and separate it with semicolons to get the cssItems array, and create a new Map type variable cssMap. This step is to prepare for generating CSS variable initialization.

[0213] Step M7, traverse the cssItems array, construct a Map object with the style variable name as the value and the formatted style name as the key separated by colons, and fill it into the cssMap.

[0214] According to the method in this step, a cssMap can be constructed.

[0215] Step M8, declare an empty array exports, and split batchData into array variables using line breaks.

[0216] The method in this step is used to prepare basic data for generating CSS variable files.

[0217] Step M9, construct CSS variables according to array variables.

[0218] Traverse variables, separate the traversal items starting with the character $ with a colon, remove the $ character from the first item, convert it toUpperCamelCase format and save it as jsKey. Then replace the $ character in the first item with double hyphens '--' and save it as key, then you can get the variable value owned by the corresponding jsKey in cssMap and record it as value. In this way, you can construct a CSS variable value in the form of 'key:value;' and save it in exports.

[0219] Step M10, generating a CSS variable file according to the CSS variables.

[0220] If the constructed CSS variable is the style represented by the default page theme, the exports file css-var.css with the ':root' identifier is output.

[0221] If you are building a custom page theme, an exports file css-var.css with a name specific to the custom page theme is output.

[0222] Step M11, generating a SCSS variable document according to batchData and the temporary index file.

[0223] The variable information extracted through batchData and temporary index file data includes: name (variable name), type (variable refers to style type), value (variable value), scssValue (SCSS variable name corresponding to the variable), and scene (variable annotation).

[0224] Step M12, build the exports array according to batchData and variables data, replace the values ​​of the key-value pairs in the exports array with values ​​in string format, and obtain and output the index.scss.d.ts file.

[0225] This step is used to generate variable TS type documents. When using typescript for development, variables need to be typed, otherwise they will not compile. Repeat step S4 according to batchData and replace all key-value pairs with string. Output index.scss.d.ts file.

[0226] Step M13, clean up the temporary index files and data.

[0227] This step is used to clean up the memory optimization execution environment.

[0228] Step M14, injecting the @import reference into the header of the temporary index file, referencing the variables-map.scss file, constructing an index.scss file that reflects the mapping relationship between CSS variables and SCSS variables, and outputting it.

[0229] This step is used to generate a SCSS variable file that references the CSS var function. Specifically, repeat steps S1 to S5. When the file is finally output, inject the @import reference into its header and reference the variables-map.scss file to form a mapping relationship between CSS variables and SCSS variables. Output the index.scss file.

[0230] Step M15, initialize SCSS variables and map them to CSS var functions.

[0231] In this step, you also need to declare exports empty array and Set type variable keys.

[0232] Step M16, complete the construction of the mapping relationship from SCSS variables to CSS var functions, obtain the mapping file variables-map.scss file and output it.

[0233] Specifically, the string replacement operation in step S9 is repeated according to batchData, and the key-value pairs in the form of '$key:var(--key)! default' are traversed and pushed into the exports array. The mapping file variables-map.scss is output.

[0234] All processing steps of this embodiment are automated. Developers only need to provide the proposed default full style and differentiated custom page theme style files to automatically generate SCSS variables and CSS variables during construction. By referencing relevant variables and mapping addresses in the project entry file in advance, you can successfully render and implement theme style switching. Based on the method of this embodiment, in subsequent updates and maintenance, developers only need to pay attention to the changes in the style files to adjust the global style.

[0235] Based on the tool that can implement the steps of this embodiment, developers can generate CSS and SCSS style variables to meet the needs of different scenarios. In addition, the tool also automatically generates a description document for each theme style and the corresponding TS (TypeScript) version. When managing and modifying the theme style of a large project, developers only need to pay attention to and maintain the style variables under a single page theme. Based on the method of this embodiment, there is no need to generate a complete set of variable files for each set of page themes. The method greatly improves development efficiency, reduces maintenance costs and difficulty, and optimizes the code architecture, making the collaborative work content of front-end development and UI design more concise.

[0236] Reference Figure 5 This embodiment also provides a method for modifying a page theme, which may include the following steps:

[0237] Step F1, build the original default page theme style files, including _palette.scss, variables-source.scss, and variables.scss files.

[0238] According to the method of the aforementioned step S1, obtain the _palette.scss, variables-source.scss and variables.scss files.

[0239] Step F2, use node to execute the export script to generate SASS variable files, SASS variable TS files and description files.

[0240] According to the above step M12, the SASS variable TS file is obtained.

[0241] Step F3, build a custom page theme style difference file based on the default theme style file, including _palette.scss and variables-source.scss files.

[0242] According to the above step S1, build _palette.scss and variables-source.scss.

[0243] Step F4, use node to execute the custom page theme automatic generation script to generate variables.scss, index.scss, index.scss.d.ts and variables-doc.js.

[0244] Use node to execute the custom page theme to automatically generate scripts and get variables.scss, index.scss, index.scss.d.ts and variables-doc.js.

[0245] Step F5, register and import the theme style.

[0246] Step F6 supports directly importing / modifying css variables or importing / modifying SCSS variables to control the page theme style.

[0247] The embodiment of the present application implements a method for automatically generating multi-theme style variables that are compatible with CSS and SCSS. Through CSS variables and SCSS variables and the mutual mapping relationship between the two, the theme switching requirements of enterprise-level projects can be realized. Developers can use CSS or SCSS syntax for programming, which greatly improves the compatibility of the code. In addition, in a multi-theme environment, the difference variable automatic coverage function of the embodiment of the present application allows developers to only focus on a small part of the theme style variables that are different. Compared with the full theme style solution in the related art, the embodiment of the present application effectively reduces the overall code volume. In addition, the present embodiment automatically generates a variety of help documents, so that the project is also compatible with development tasks in the typescript environment, which also reduces development and maintenance costs and improves the collaboration efficiency between developers and UI designers.

[0248] Figure 6 is a structural diagram of a page theme generating device provided by an embodiment of the present invention. The device 30 may include:

[0249] The first acquisition module 301 is used to acquire the first file; the first file includes: element identifiers of multiple page theme elements, and default color identifiers corresponding to each element identifier in the first file; the second acquisition module 302 is used to acquire the second file; the second file includes: element identifiers of at least some page theme elements, and custom color identifiers set for each element identifier in the second file; the third acquisition module 303 is used to acquire, from the first file, a target element identifier that is the same as the element identifier of the second file; the replacement module 304 is used to replace the default color identifier corresponding to the target element identifier in the first file with the custom color identifier to obtain the third file; the generation module 305 is used to generate a custom page theme based on the third file.

[0250] Optionally, the device 30 may include: a fourth acquisition module, configured to acquire a fourth file; the fourth file includes: at least one preset color identifier, and preset color values ​​corresponding to each preset color identifier;

[0251] The generating module 305 includes: a first obtaining submodule, which is used to obtain the color value corresponding to each element identifier in the third file according to the fourth file.

[0252] The second acquisition submodule is used to set the color of the page theme element corresponding to the element identifier in the third file according to the color value corresponding to each element identifier in the third file, so as to obtain a custom page theme.

[0253] Optionally, the first acquisition submodule may include: a first acquisition unit, used to acquire a preset color identifier in the fourth file that is the same as the color identifier of the third file; and a first determination unit, used to determine a preset color value corresponding to the preset color identifier that is the same as the color identifier of the third file as the color value corresponding to the element identifier in the third file.

[0254] Optionally, the first file is a file in SCSS format, and the device 30 also includes: a fifth acquisition module, used to acquire a first variable mapping file based on the first file; the first variable mapping file includes a first correspondence between element identifiers in SCSS format in the first file and element identifiers in CSS format, and a second correspondence between a default color identifier in SCSS format in the first file and a default color identifier in CSS format; a sixth acquisition module, used to obtain a default page theme based on the first variable mapping file and the first file.

[0255] Optionally, the fifth acquisition module may include: a first construction sub-module, used to convert the element identifier in SCSS format in the first file into the element identifier in CSS format according to the CSS syntax, and construct a first correspondence between the element identifier in SCSS format and the element identifier in CSS format; a second construction sub-module, used to convert the default color identifier in SCSS format in the first file into the default color identifier in CSS format according to the CSS syntax, and construct a second correspondence between the default color identifier in SCSS format and the default color identifier in CSS format; a second acquisition sub-module, used to obtain the first variable mapping file according to the first correspondence and the second correspondence.

[0256] Optionally, the first file is a file in SCSS format, and the generation module 305 may include: a third acquisition sub-module, used to acquire a second variable mapping file based on the third file; the second variable mapping file includes a third correspondence between element identifiers in SCSS format in the third file and element identifiers in CSS format, and a fourth correspondence between color identifiers in SCSS format in the third file and color identifiers in CSS format; a fourth acquisition sub-module, used to obtain a custom page theme based on the second variable mapping file and the third file.

[0257] Optionally, the third acquisition submodule may include: a first construction unit, used to convert the element identifier in SCSS format in the third file into the element identifier in CSS format according to the CSS syntax, and construct a third correspondence between the element identifier in SCSS format and the element identifier in CSS format; a second construction unit, used to convert the color identifier in SCSS format in the third file into the color identifier in CSS format according to the CSS syntax, and construct a fourth correspondence between the color identifier in SCSS format and the color identifier in CSS format; a second acquisition unit, used to obtain a second variable mapping file according to the third correspondence and the fourth correspondence.

[0258] In an embodiment of the present invention, when it is necessary to obtain a custom page theme, it is only necessary to obtain a second file including variables different from those of the default page theme, and then use the part of the variables to overwrite the corresponding variables in the first file of the default page theme, to obtain a third file for generating a custom page theme, and based on the third file, the custom page theme can be obtained. This embodiment does not require writing theme style files for multiple sets of page themes, and only requires obtaining the difference between the custom page theme and the default page theme to obtain the custom page theme, which improves the efficiency of generating custom page themes and is less prone to errors when modifying the default page theme.

[0259] The present invention also provides an electronic device, see Figure 7 , including: a processor 901, a memory 902, and a computer program 9021 stored in the memory and executable on the processor, and when the processor executes the program, the page theme generating method of the aforementioned embodiment is implemented.

[0260] The present invention also provides a readable storage medium, when the instructions in the storage medium are executed by the processor of the electronic device, the electronic device can execute the page theme generation method of the aforementioned embodiment.

[0261] As for the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0262] It should be noted that the various information and data obtained in the embodiments of the present invention are all obtained with the authorization of the information / data holder. The algorithms and displays provided herein are not inherently related to any specific computer, virtual system or other device. Various general systems can also be used together with the teachings based on this. According to the above description, it is obvious that the structure required for constructing such systems. In addition, the present invention is not directed to any specific programming language. It should be understood that the content of the present invention described herein can be implemented using various programming languages, and the description of specific languages ​​above is to disclose the best mode of implementation of the present invention.

[0263] In the description provided herein, a large number of specific details are described. However, it is understood that embodiments of the present invention can be practiced without these specific details. In some instances, well-known methods, structures and techniques are not shown in detail so as not to obscure the understanding of this description.

[0264] Similarly, it should be understood that in order to streamline the present invention and aid in understanding one or more of the various inventive aspects, in the above description of exemplary embodiments of the present invention, the various features of the present invention are sometimes grouped together into a single embodiment, figure, or description thereof. However, this disclosed method should not be interpreted as reflecting the following intention: that the claimed invention requires more features than the features explicitly recited in each claim. More specifically, as reflected in the claims below, inventive aspects lie in less than all the features of the individual embodiments disclosed above. Therefore, the claims that follow the specific embodiment are hereby expressly incorporated into the specific embodiment, with each claim itself serving as a separate embodiment of the present invention.

[0265] Those skilled in the art will appreciate that the modules in the devices in the embodiments may be adaptively changed and arranged in one or more devices different from the embodiments. The modules or units or components in the embodiments may be combined into one module or unit or component, and in addition they may be divided into a plurality of submodules or subunits or subcomponents. Except that at least some of such features and / or processes or units are mutually exclusive, all features disclosed in this specification (including the accompanying claims, abstracts and drawings) and all processes or units of any method or device disclosed in this manner may be combined in any combination. Unless otherwise expressly stated, each feature disclosed in this specification (including the accompanying claims, abstracts and drawings) may be replaced by an alternative feature providing the same, equivalent or similar purpose.

[0266] The various component embodiments of the present invention may be implemented in hardware, or in software modules running on one or more processors, or in a combination thereof. It should be understood by those skilled in the art that a microprocessor or digital signal processor (DSP) may be used in practice to implement some or all of the functions of some or all of the components in the sorting device according to the present invention. The present invention may also be implemented as a device or apparatus program for executing part or all of the methods described herein. Such a program for implementing the present invention may be stored on a computer-readable medium, or may be in the form of one or more signals. Such a signal may be downloaded from an Internet website, or provided on a carrier signal, or provided in any other form.

[0267] It should be noted that the above embodiments illustrate the present invention rather than limit it, and that those skilled in the art may devise alternative embodiments without departing from the scope of the appended claims. In the claims, any reference symbol between brackets shall not be construed as a limitation on the claims. The word "comprising" does not exclude the presence of elements or steps not listed in the claims. The word "one" or "an" preceding an element does not exclude the presence of a plurality of such elements. The present invention may be implemented by means of hardware comprising a number of different elements and by means of a suitably programmed computer. In a unit claim enumerating a number of devices, several of these devices may be embodied by the same hardware item. The use of the words first, second, and third, etc., does not indicate any order. These words may be interpreted as names.

[0268] The user information (including but not limited to the user's device information, user personal information, etc.) and related data involved in the present invention are all information authorized by the user or by all parties.

[0269] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working processes of the systems, devices and units described above can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

[0270] The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions and improvements made within the spirit and principles of the present invention should be included in the protection scope of the present invention.

[0271] The above is only a specific embodiment of the present invention, but the protection scope of the present invention is not limited thereto. Any person skilled in the art can easily think of changes or substitutions within the technical scope disclosed by the present invention, which should be included in the protection scope of the present invention. Therefore, the protection scope of the present invention should be based on the protection scope of the claims.

Claims

1. A page theme generation method, characterized in that: The method comprises: Obtain a first file; the first file includes: element identifiers of multiple page theme elements, and default color identifiers corresponding to each element identifier in the first file; Obtain a second file; the second file includes: element identifiers of at least some of the page theme elements, and a custom color identifier set for each element identifier in the second file; Obtain, from the first file, a target element identifier that is identical to an element identifier of the second file; Using a custom color identifier to replace a default color identifier corresponding to the target element identifier in the first file, to obtain a third file; Generate a custom page theme based on the third file.

2. The method according to claim 1, characterized in that The method further comprises: Acquire a fourth file; the fourth file includes: at least one preset color identifier, and preset color values ​​corresponding to each preset color identifier; Generating a custom page theme according to the third file includes: According to the fourth file, obtaining the color value corresponding to each element identifier in the third file; According to the color values ​​corresponding to each element identifier in the third file, the color of the page theme element corresponding to the element identifier in the third file is set to obtain a custom page theme.

3. The method according to claim 2, characterized in that According to the fourth file, obtaining the color value corresponding to each element identifier in the third file includes: Obtaining a preset color identifier in the fourth file that is the same as the color identifier of the third file; The preset color value corresponding to the preset color identifier that is the same as the color identifier of the third file is determined as the color value corresponding to the element identifier in the third file.

4. The method according to claim 1, characterized in that: The first file is a file in SCSS format, and the method further includes: According to the first file, a first variable mapping file is obtained; the first variable mapping file includes a first correspondence between an element identifier in the SCSS format in the first file and an element identifier in the CSS format, and a second correspondence between a default color identifier in the SCSS format in the first file and a default color identifier in the CSS format; A default page theme is obtained according to the first variable mapping file and the first file.

5. The method according to claim 4, characterized in that The step of obtaining a first variable mapping file according to the first file includes: According to the CSS grammar, the element identifier in the SCSS format in the first file is converted into the element identifier in the CSS format, and a first corresponding relationship between the element identifier in the SCSS format and the element identifier in the CSS format is established; According to the CSS grammar, convert the default color identifier in the SCSS format in the first file into the default color identifier in the CSS format, and construct a second corresponding relationship between the default color identifier in the SCSS format and the default color identifier in the CSS format; The first variable mapping file is obtained according to the first corresponding relationship and the second corresponding relationship.

6. The method according to claim 1, characterized in that The third file is a file in SCSS format, and generating a custom page theme according to the third file includes: According to the third file, a second variable mapping file is obtained; the second variable mapping file includes a third correspondence between the element identifiers in the SCSS format in the third file and the element identifiers in the CSS format, and a fourth correspondence between the color identifiers in the SCSS format in the third file and the color identifiers in the CSS format; A custom page theme is obtained according to the second variable mapping file and the third file.

7. The method according to claim 6, characterized in that The step of obtaining the second variable mapping file according to the third file includes: According to the CSS grammar, the element identifier in the SCSS format in the third file is converted into the element identifier in the CSS format, and a third corresponding relationship between the element identifier in the SCSS format and the element identifier in the CSS format is constructed; According to the CSS grammar, the color identifier in the SCSS format in the third file is converted into a color identifier in the CSS format, and a fourth corresponding relationship between the color identifier in the SCSS format and the color identifier in the CSS format is constructed; The second variable mapping file is obtained according to the third corresponding relationship and the fourth corresponding relationship.

8. A page theme generation device, characterized in that: The device comprises: A first acquisition module is used to acquire a first file; the first file includes: element identifiers of multiple page theme elements, and a default color identifier corresponding to each element identifier in the first file; A second acquisition module is used to acquire a second file; the second file includes: element identifiers of at least part of the page theme elements, and a custom color identifier set for each element identifier in the second file; A third acquisition module is used to acquire, from the first file, a target element identifier that is the same as the element identifier of the second file; A replacement module, configured to replace the default color identifier corresponding to the target element identifier in the first file with a custom color identifier, to obtain a third file; The generation module is used to generate a custom page theme according to a third file.

9. An electronic device, characterized in that: include: A processor, a memory, and a computer program stored in the memory and executable on the processor, wherein the processor implements the method according to any one of claims 1 to 7 when executing the program.

10. A readable storage medium, characterized in that: When the instructions in the storage medium are executed by a processor of an electronic device, the electronic device is enabled to execute any one of the methods described in claims 1-7.

Images