User interface component library theme color switching method and related apparatus

Abstract

The application provides a user interface component library theme color switching method and related device, and relates to the technical field of computers.The method comprises the following steps: firstly, in response to a selection operation of a user on an interactive interface, determining a color system source color value corresponding to a theme color to be switched; then, based on the color system source color value, generating a user interface component library style file for the theme color to be switched, wherein the user interface component library style file comprises a matching relationship between all components and the color system source color value; and finally, running the user interface component library style file, and updating the colors of all components according to the matching relationship, so as to reduce the amount of manual intervention in the user interface component library theme color switching process and improve the switching speed.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of computer, in particular to a user interface component library theme color switching method and related device. BACKGROUND

[0002] In actual business scenarios, theme color switching of a user interface component library needs manual intervention, because the mapping of color values under different theme colors is ambiguous.

[0003] For example, the color value of the background color of component 1 and component 2 under the orange theme is #d79122, but the color value of the background color of component 1 under the red theme is #14658, and the color value of the background color of component 2 under the red theme is #d84453. When the user interface component library needs to be switched from the red theme to the orange theme, the color values #14658 and #d84453 can be directly replaced by #d79122, that is, the color value #14658 can be mapped to #d79122, and #d84453 can be mapped to #d79122. However, when the user interface component library needs to be switched from the orange theme to the red theme, the color value #d79122 cannot be mapped to #14658 and #d84453 at the same time, and manual intervention is needed at this time.

[0004] Due to the size of the user interface component library and the number of color values, the amount of manual intervention in the theme color switching process is huge, which requires a lot of time and is prone to errors. SUMMARY

[0005] In order to reduce the amount of manual intervention in the theme color switching process of the user interface component library and improve the switching speed, the present application provides a user interface component library theme color switching method and related device.

[0006] The technical solution of the present application embodiment can be implemented as follows:

[0007] In a first aspect, the present application embodiment provides a user interface component library theme color switching method, which comprises:

[0008] In response to a selection operation of a user on an interactive interface, determining a color system source color value corresponding to a theme color to be switched;

[0009] Based on the color system source color value, generating a user interface component library style file for the theme color to be switched, the user interface component library style file containing the matching relationship between all components and the color system source color value;

[0010] Running the user interface component library style file, and updating the color of all components according to the matching relationship.

[0011] Optionally, the step of generating the user interface component library style file for the theme color to be switched based on the color system source color value comprises:

[0012] A plurality of color system associated color values are obtained according to the color system source color value;

[0013] A first mapping relationship between the plurality of color system associated color values and a plurality of pre-constructed style categories is established, the style categories being used to describe the style of components in the user interface component library;

[0014] A second mapping relationship between the plurality of style categories and a plurality of pre-constructed component categories is established, the component categories being used to describe the structure of components in the user interface component library;

[0015] The user interface component library style file for the theme color to be switched is generated based on the first mapping relationship and the second mapping relationship.

[0016] Optionally, the style categories comprise theme items, and the step of establishing the first mapping relationship between the plurality of color system associated color values and the plurality of pre-constructed style categories comprises:

[0017] Each valid style category is determined from all the style categories according to the theme item of each of the style categories, the theme item of the valid style category being the theme color to be switched;

[0018] The color system associated color value corresponding to each of the valid style categories is determined in response to a configuration instruction input by a user, so as to establish the first mapping relationship.

[0019] Optionally, the style categories further comprise color system items, state items and color attribute items, the component categories comprise component description items, color system items, state items and color attribute items, and the step of establishing the second mapping relationship between the plurality of style categories and the plurality of pre-constructed component categories comprises:

[0020] For any one target component category, a mapping style category corresponding to the target component category is determined from all the valid style categories according to the color system item, the state item and the color attribute item of the target component category, the mapping style category having the same color system item, state item and color attribute item as the target component category;

[0021] Each of the mapping style categories corresponding to each of the component categories is obtained by traversing each of the component categories, so as to establish the second mapping relationship.

[0022] Optionally, the step of generating the user interface component library style file for the target theme based on the first mapping relationship and the second mapping relationship comprises:

[0023] generate a component-style mapping table according to the first mapping relationship and the second mapping relationship;

[0024] obtain a component style table of the user interface component library by using a preset seed function and the component-style mapping table;

[0025] compile the component style table to obtain a user interface component library style file.

[0026] Optionally, the step of obtaining a plurality of color system associated color values according to the color system source color value comprises:

[0027] performing format conversion processing on the color system source color value;

[0028] obtaining a plurality of color system associated color values by adjusting the hue interval, saturation interval and lightness interval of the color system source color value after the format conversion processing.

[0029] In a second aspect, an embodiment of the present application provides a user interface component library theme color switching device, and the device comprises:

[0030] A determination module is configured to determine a color system source color value corresponding to a theme color to be switched in response to a selection operation of a user on an interactive interface.

[0031] A generation module is configured to generate a user interface component library style file for the theme color to be switched based on the color system source color value, wherein the user interface component library style file comprises a matching relationship between all components and the color system source color value.

[0032] A switching module is configured to run the user interface component library style file and perform color updating on all components according to the matching relationship.

[0033] Optionally, the generation module is specifically configured to:

[0034] obtain a plurality of color system associated color values according to the color system source color value;

[0035] establish a first mapping relationship between the plurality of color system associated color values and a plurality of pre-constructed style categories, wherein the style categories are used to describe the styles of components in the user interface component library.

[0036] establish a second mapping relationship between the plurality of style categories and a plurality of pre-constructed component categories, wherein the component categories are used to describe the structures of components in the user interface component library.

[0037] generate a user interface component library style file for the theme color to be switched based on the first mapping relationship and the second mapping relationship.

[0038] Thirdly, embodiments of the present invention provide an electronic device including a memory and a processor, wherein the memory stores a computer program, and when the computer program is executed by the processor, it implements the user interface component library theme color switching method as described in the first aspect above.

[0039] Fourthly, embodiments of the present invention provide a computer-readable storage medium storing a computer program that, when executed by a processor, implements the user interface component library theme color switching method as described in the first aspect above.

[0040] Compared to existing technologies, the present invention provides a method and related apparatus for switching the theme color of a user interface component library. First, in response to a user's selection operation on the interactive interface, the source color value corresponding to the theme color to be switched is determined. Then, based on the source color value, a user interface component library style file for the theme color to be switched is generated, wherein the user interface component library style file contains the matching relationships between all components and the source color value. Finally, the user interface component library style file is run, and the colors of all components are updated according to the matching relationships. Because the present invention updates the colors of all components by generating a user interface component library style file containing the matching relationships between all components and the source color value, the amount of manual intervention in the user interface component library theme color switching process is reduced, and the switching speed is improved. Attached Figure Description

[0041] To more clearly illustrate the technical solutions of the embodiments of the present invention, the accompanying drawings used in the embodiments will be briefly introduced below. It should be understood that the following drawings only show some embodiments of the present invention and should not be regarded as a limitation on the scope. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.

[0042] Figure 1 A schematic diagram illustrating a static setting of the theme color for a user interface component library, provided as an embodiment of the present invention;

[0043] Figure 2 An example diagram illustrating color value ambiguity provided in an embodiment of the present invention;

[0044] Figure 3 A flowchart illustrating a method for switching the theme color of a user interface component library, provided in an embodiment of the present invention;

[0045] Figure 4 An example image of a theme color configuration page provided in an embodiment of the present invention;

[0046] Figure 5 A schematic diagram illustrating a style category provided in an embodiment of the present invention;

[0047] Figure 6 A schematic diagram illustrating a component category provided in an embodiment of the present invention;

[0048] Figure 7 This is a schematic diagram illustrating a theme color switching effect provided in an embodiment of the present invention;

[0049] Figure 8 An example diagram illustrating category uniqueness provided in an embodiment of the present invention;

[0050] Figure 9 A functional unit block diagram of a user interface component library theme color switching device provided in an embodiment of the present invention;

[0051] Figure 10 This is a schematic block diagram of an electronic device provided in an embodiment of the present invention.

[0052] Icons: 100 - User interface component library theme color switching device; 101 - Confirmation module; 102 - Generation module; 103 - Switching module; 200 - Electronic device; 210 - Memory; 220 - Processor. Detailed Implementation

[0053] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. The components of the embodiments of the present invention described and shown in the accompanying drawings can generally be arranged and designed in various different configurations.

[0054] Therefore, the following detailed description of the embodiments of the invention provided in the accompanying drawings is not intended to limit the scope of the claimed invention, but merely to illustrate selected embodiments of the invention. All other embodiments obtained by those skilled in the art based on the embodiments of the invention without inventive effort are within the scope of protection of the invention.

[0055] It should be noted that similar labels and letters in the following figures indicate similar items. Therefore, once an item is defined in one figure, it does not need to be further defined and explained in subsequent figures.

[0056] Furthermore, the terms "first" and "second" are used only to distinguish descriptions and should not be interpreted as indicating or implying relative importance.

[0057] It should be noted that, where there is no conflict, the features in the embodiments of the present invention can be combined with each other.

[0058] like Figure 1As shown, in actual business scenarios, the process of setting the theme color of the user interface component library requires manual intervention, that is, manually modifying the color value of each component in the user interface component library. This is because the color value and the usage scenario in the component do not have a unique mapping relationship, that is, the color value is "ambiguous".

[0059] like Figure 2 As shown, the background color of component 1 under the blue theme is #4686f2, and the background color of component 2 under the blue theme is #3165cc. When switching from the blue theme to the orange theme, since the background color of both component 1 and component 2 under the orange theme is #d79122, mapping the color values ​​#4686f2 and #d79122, and mapping the color value #3165cc and #d79122, can replace the background color of component 1 and component 2.

[0060] When switching from an orange theme to a red theme, since the background color value of component 1 under the red theme is #f14658 and the background color value of component 2 under the red theme is #d84453, the color value #d79122 cannot be mapped to both #f14658 and #d84453 at the same time. In this case, manual intervention is required. That is, the background color value of component 1 is manually changed from #d79122 to #f14658, and the background color value of component 2 is changed from #d79122 to #d84453.

[0061] In other words, any color value with "ambiguity" under any theme can only be replaced manually. The size of the user interface component library and the number of color values ​​make the manual intervention during theme color switching huge, which takes a lot of time and is prone to errors.

[0062] To reduce manual intervention and improve switching speed during the theme color switching process of the user interface component library, this invention provides a method for switching the theme color of the user interface component library, which will be described in detail below.

[0063] Please refer to Figure 3 The theme color switching method for this user interface component library includes steps S101 to S103.

[0064] S101, responding to the user's selection operation on the interactive interface, determines the source color value of the color system corresponding to the theme color to be switched.

[0065] The theme to be switched has multiple color schemes, and the source color value of each color scheme can be in hex format.

[0066] For example, such as Figure 4As shown, the color schemes for the theme to be switched include theme color / primary color, success color, warning color, and prompt color. The source color value of the theme color / primary color is #6a1bb8, the source color value of the success color is #3ac992, the source color value of the warning color is #f2b146, and the source color value of the error color is #f14658.

[0067] S102, based on the source color values ​​of the color system, generates a user interface component library style file for the theme color to be switched.

[0068] The user interface component library style file contains the matching relationship between all components and the color source color values.

[0069] Step S102 may include sub-steps S102-1 to S102-4.

[0070] S102-1, based on the source color values ​​of the color system, obtain multiple color system associated color values.

[0071] The implementation process of step S102-1 can be as follows:

[0072] First, the source color values ​​of the color system are converted to the correct format.

[0073] Then, by adjusting the hue range, saturation range, and lightness range of the source color values ​​after format conversion, multiple color system related color values ​​are obtained.

[0074] In this embodiment of the invention, the source color value in hex format can be used as a parameter to call the color generation algorithm in the color generator, thereby deriving multiple different color-related color values ​​from a single source color value in hex format.

[0075] First, convert the color source values ​​in hex format to RGB format. Then, convert the RGB color source values ​​to HSV format. Finally, by adjusting the hue, saturation, and lightness of the HSV color source values, a series of related color values ​​in hex format are generated.

[0076] S102-2, establish the first mapping relationship between multiple color system associated color values ​​and multiple pre-built style categories.

[0077] The style category describes the style of components in the user interface component library.

[0078] like Figure 5As shown, based on the styles of the components in the user interface component library, a tree structure with four levels, namely "theme", "color scheme", "state" and "color attribute", can be abstracted. Each path is a unique "style category". That is to say, each style category includes four items, namely theme item, color scheme item, state item and color attribute item.

[0079] Optionally, step S102-2 can be implemented as follows:

[0080] First, based on the theme item of each style category, determine each valid style category from all style categories;

[0081] Then, by responding to the configuration instructions input by the user, the color system associated color value corresponding to each valid style category is determined to establish the first mapping relationship.

[0082] Among them, the theme item of the valid style category is the theme color to be switched, and the first mapping relationship includes the color system associated color value corresponding to each valid style category.

[0083] In this embodiment of the invention, the multiple color system associated color values ​​obtained in step S102-1 are mapped one by one with different valid style categories, and the structure can be as follows: $--[Theme]-[Color System]-[Status]: Color System Associated Color Value.

[0084] For example, the style category "Blue-primary-hover" is mapped to the color value "#5196ff", resulting in $--Blue-primary-hover:#5196ff.

[0085] S102-3, establish a second mapping relationship between multiple style categories and multiple pre-built component categories.

[0086] The component category is used to describe the structure of components in the user interface component library.

[0087] like Figure 6 As shown, based on the structure of the components in the user interface component library, a tree structure with four levels can be abstracted: "component | component part", "color scheme", "state" and "color attribute". Each path is a unique "component category". That is to say, each style category includes four items: component description, color scheme, state and color attribute.

[0088] Optionally, step S102-3 can be implemented as follows:

[0089] For any given target component category, determine the corresponding mapping style category from all valid style categories based on the target component category's color scheme, status, and color attribute items.

[0090] Iterate through each component category to obtain the corresponding mapping style category for each component category, in order to establish a second mapping relationship.

[0091] Among them, the mapping style category and the target component category have the same color scheme, status, and color attribute items.

[0092] S102-4, Based on the first mapping relationship and the second mapping relationship, generate a user interface component library style file for the theme color to be switched.

[0093] Optionally, step S102-3 can be implemented as follows:

[0094] First, generate a component-style mapping table based on the first and second mapping relationships;

[0095] Then, using the preset seed function and component-style mapping table, the component style sheet of the user interface component library is obtained;

[0096] Next, the component stylesheet is compiled to obtain the user interface component library style file.

[0097] In this embodiment of the invention, through two mappings, a component-style mapping table, i.e., a component-style Map, can be obtained for the user interface component library under the theme color to be switched. The structure is as follows:

[0098] Map:{

[0099] $__[Component|Component Partial]_[Color Scheme]_[State]_[Color Attribute]: Style Category

[0100] }

[0101] For example, such as:

[0102] Map:{$__button_primary_hover_background-color:$--Blue-primary-hover}.

[0103] Depend on Figure 5 and Figure 6 As can be seen, color attributes can include "font color, background color, and border color". By proxying color attributes such as "font color, background color, and border color" into compilable functions, i.e. seed functions, the function looks up the corresponding style category in the component-style mapping table, and then compiles the style category into a specific color value, thereby writing the specific color value into the component style sheet of the user interface component library.

[0104] The seed function is defined as follows:

[0105] Proxy(component category) = map-get(component category){

[0106] Return [color attribute]: Content(style category) | associated color value}

[0107] For example: @include color($__button_success_normal_font-color);

[0108] @include background-color($__button_success_normal_background-color);

[0109] @include border-color($__button_success_normal_border-color).

[0110] Next, the component stylesheets of the user interface component library are compiled to obtain the CSS format user interface component library style file.

[0111] S103, run the user interface component library style file and update the colors of all components according to the matching relationship.

[0112] For example, given that the input theme color / primary color source value is #6a1bb8, the success color source value is #3ac992, the warning color source value is #f2b146, and the error color source value is #f14658, the user interface component library for completing theme color switching obtained using the above method steps is as follows: Figure 7 As shown.

[0113] In this embodiment of the invention, by establishing a first mapping relationship between multiple color system associated color values ​​and multiple pre-built style categories and establishing a second mapping relationship between multiple style categories and multiple pre-built component categories, the "ambiguity" of color values ​​is eliminated, thereby achieving rapid batch color updates.

[0114] like Figure 8 As shown, when the user interface component library needs to switch from an orange theme to a red theme, the background color value #f14658 of component 1 is obtained through the mapping between component category 1 and style category 1, and the background color value #d84453 of component 2 is obtained through the mapping between component category 2 and style category 2.

[0115] In order to perform the corresponding steps in the above method embodiments and various possible implementations, an implementation of a user interface component library theme color switching device 100 is given below.

[0116] Please refer to Figure 9 The user interface component library theme color switching device 100 includes a determining module 101, a generating module 102, and a switching module 103.

[0117] The determination module 101 is used to respond to the user's selection operation on the interactive interface and determine the source color value of the color system corresponding to the theme color to be switched.

[0118] The generation module 102 is used to generate a user interface component library style file for the theme color to be switched based on the color source color value. The user interface component library style file contains the matching relationship between all components and the color source color value.

[0119] Switching module 103 is used to run the user interface component library style file and update the colors of all components according to the matching relationship.

[0120] Optionally, the generation module 102 is specifically used to obtain multiple color system associated color values ​​based on the color system source color values; establish a first mapping relationship between the multiple color system associated color values ​​and multiple pre-built style categories, wherein the style categories are used to describe the styles of components in the user interface component library; establish a second mapping relationship between the multiple style categories and multiple pre-built component categories, wherein the component categories are used to describe the structure of components in the user interface component library; and generate a user interface component library style file for the theme color to be switched based on the first mapping relationship and the second mapping relationship.

[0121] Optionally, the style category includes a theme item. When the generation module 102 is used to establish a first mapping relationship between multiple color system associated color values ​​and multiple pre-built style categories, it is specifically used to determine each valid style category from all style categories based on the theme item of each style category. The theme item of the valid style category is the theme color to be switched. By responding to the configuration command input by the user, the color system associated color value corresponding to each valid style category is determined to establish the first mapping relationship.

[0122] Optionally, the style category also includes color scheme items, status items, and color attribute items, and the component category includes component description items, color scheme items, status items, and color attribute items. When the generation module 102 is used to establish a second mapping relationship between multiple style categories and multiple pre-built component categories, it specifically determines the mapping style category corresponding to the target component category from all valid style categories for any target component category, based on the color scheme items, status items, and color attribute items of the target component category. The mapping style category has the same color scheme items, status items, and color attribute items as the target component category. It then iterates through each component category to obtain the mapping style category corresponding to each component category in order to establish a second mapping relationship.

[0123] Optionally, when generating a user interface component library style file for a target theme based on the first mapping relationship and the second mapping relationship, the generation module 102 is specifically used to generate a component-style mapping table according to the first mapping relationship and the second mapping relationship; obtain a component style table of the user interface component library using a preset seed function and the component-style mapping table; and compile the component style table to obtain a user interface component library style file.

[0124] Optionally, when generating module 102 obtains multiple color system related color values ​​based on the color system source color value, it is specifically used to perform format conversion processing on the color system source color value; by adjusting the hue range, saturation range and brightness range of the color system source color value after format conversion processing, multiple color system related color values ​​are obtained.

[0125] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working process of the user interface component library theme color switching device 100 described above can be referred to the corresponding process in the foregoing method embodiments, and will not be repeated here.

[0126] Furthermore, this embodiment of the invention also provides an electronic device 200, please refer to... Figure 10 The electronic device 200 may include a memory 210 and a processor 220.

[0127] The processor 220 can be a general-purpose central processing unit (CPU), a microprocessor, an application-specific integrated circuit (ASIC), or one or more integrated circuits used to control the execution of a program for controlling the theme color switching method of the user interface component library provided in the above method embodiments.

[0128] The memory 210 may be a ROM or other type of static storage device capable of storing static information and instructions, RAM or other type of dynamic storage device capable of storing information and instructions, or an electrically erasable programmable-only memory (EEPROM), a compact disc read-only memory (CD-ROM) or other optical disc storage, optical disc storage (including compressed optical discs, laser discs, optical discs, digital universal optical discs, Blu-ray discs, etc.), magnetic disk storage media or other magnetic storage devices, or any other medium capable of carrying or storing desired program code in the form of instructions or data structures and accessible by a computer, but not limited thereto. The memory 210 may exist independently and be connected to the processor 220 via a communication bus. The memory 210 may also be integrated with the processor 220. The memory 210 is used to store machine-executable instructions for executing the scheme of this application. The processor 220 is used to execute the machine-executable instructions stored in the memory 210 to implement the above-described method embodiments.

[0129] This invention also provides a computer-readable storage medium containing a computer program, which, when executed, can be used to perform related operations in the user interface component library theme color switching method provided in the above-described method embodiments.

[0130] In summary, the user interface component library theme color switching method and related apparatus provided by this invention first respond to the user's selection operation on the interactive interface and determine the source color value of the color scheme corresponding to the theme color to be switched; then, based on the source color value, a user interface component library style file for the theme color to be switched is generated, wherein the user interface component library style file contains the matching relationship between all components and the source color value; finally, the user interface component library style file is run, and the colors of all components are updated according to the matching relationship. Because this invention updates the colors of all components by generating a user interface component library style file containing the matching relationship between all components and the source color value, the amount of manual intervention in the user interface component library theme color switching process is reduced, and the switching speed is improved.

[0131] The above are merely specific embodiments of the present invention, but the scope of protection of the present invention is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the technical scope disclosed in the present invention should be included within the scope of protection of the present invention. Therefore, the scope of protection of the present invention should be determined by the scope of the claims.

Claims

1. A method for switching theme colors in a user interface component library, characterized in that, The method includes: In response to the user's selection operation on the interactive interface, determine the source color value of the color system corresponding to the theme color to be switched; Based on the source color values ​​of the color system, multiple color system associated color values ​​are obtained, and a user interface component library style file for the theme color to be switched is generated according to the multiple color system associated color values. The user interface component library style file contains the matching relationship between all components and the multiple color system associated color values. Run the user interface component library style file and update the colors of all components according to the matching relationship.

2. The method as described in claim 1, characterized in that, The step of generating a user interface component library style file for the theme color to be switched based on the multiple color system associated color values ​​includes: Establish a first mapping relationship between multiple color system associated color values ​​and multiple pre-built style categories, wherein the style categories are used to describe the styles of components in the user interface component library; A second mapping relationship is established between multiple style categories and multiple pre-built component categories, wherein the component categories are used to describe the structure of components in the user interface component library; Based on the first mapping relationship and the second mapping relationship, a user interface component library style file is generated for the theme color to be switched.

3. The method as described in claim 2, characterized in that, The style category includes theme items, and the step of establishing a first mapping relationship between multiple color system associated color values ​​and multiple pre-built style categories includes: Based on the theme item of each style category, determine each valid style category from all style categories, wherein the theme item of the valid style category is the theme color to be switched; By responding to the configuration instructions input by the user, the color system associated color value corresponding to each of the valid style categories is determined to establish the first mapping relationship.

4. The method as described in claim 3, characterized in that, The style category further includes color scheme items, status items, and color attribute items; the component category includes component description items, color scheme items, status items, and color attribute items; the step of establishing a second mapping relationship between multiple style categories and multiple pre-built component categories includes: For any target component category, based on the color scheme, status, and color attribute items of the target component category, a mapping style category corresponding to the target component category is determined from all the valid style categories. The mapping style category has the same color scheme, status, and color attribute items as the target component category. Iterate through each component category to obtain the corresponding mapping style category for each component category, in order to establish the second mapping relationship.

5. The method as described in claim 2, characterized in that, The step of generating a user interface component library style file for the target theme based on the first mapping relationship and the second mapping relationship includes: Based on the first mapping relationship and the second mapping relationship, generate a component-style mapping table; Using a preset seed function and the component-style mapping table, the component style table of the user interface component library is obtained; Compile the component stylesheet to obtain the user interface component library style file.

6. The method as described in claim 2, characterized in that, The step of obtaining multiple color system associated color values ​​based on the source color values ​​of the color system includes: The source color values ​​of the color system are converted to a new format. By adjusting the hue, saturation, and lightness ranges of the source color values ​​after format conversion, multiple color system related color values ​​are obtained.

7. A user interface component library theme color switching device, characterized in that, The device includes: The determination module is used to respond to the user's selection operation on the interactive interface and determine the source color value of the color system corresponding to the theme color to be switched; The generation module is used to obtain multiple color system associated color values ​​based on the color system source color values, and generate a user interface component library style file for the theme color to be switched according to the multiple color system associated color values. The user interface component library style file contains the matching relationship between all components and the multiple color system associated color values. The switching module is used to run the style file of the user interface component library and update the colors of all components according to the matching relationship.

8. The apparatus as claimed in claim 7, characterized in that, The generation module is specifically used for: Establish a first mapping relationship between multiple color system associated color values ​​and multiple pre-built style categories, wherein the style categories are used to describe the styles of components in the user interface component library; A second mapping relationship is established between multiple style categories and multiple pre-built component categories, wherein the component categories are used to describe the structure of components in the user interface component library; Based on the first mapping relationship and the second mapping relationship, a user interface component library style file is generated for the theme color to be switched.

9. An electronic device, characterized in that, It includes a memory and a processor, the memory storing a computer program that, when executed by the processor, implements the user interface component library theme color switching method as described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, It stores a computer program that, when executed by a processor, implements the user interface component library theme color switching method as described in any one of claims 1 to 7.

Images