Method for drawing application icon, electronic device and related apparatus

Abstract

The application provides a drawing method of an application icon, an electronic device and related apparatuses, and relates to the technical field of terminals.In the method, in a light color mode, a first icon including a first foreground image and a first background image is displayed; in a dark color mode, a second icon including a second foreground image and a second background image is displayed; the content of the second foreground image is the same as that of the first foreground image, and the color of the second background image is different from that of the first background image; the color of the second foreground image is the color of the first foreground image or the color of the first background image; the second background image is matched from a plurality of preset background images; the preset background images include a dark color image and a pure color mask with transparency, and the pure color mask is located on the upper layer of the dark color image.In this way, the dark color mode application icon can continue the color matching of the light color mode application icon, improve the purity and stereoscopic effect of the dark color mode application icon, and improve the immersive experience of the user.

Description

Technical Field

[0001] This application relates to the field of terminal technology, and in particular to a method for drawing application icons, electronic devices, and related apparatus. Background Technology

[0002] Electronic devices can provide multiple display modes based on the brightness of the ambient light; for example, display modes may include a light mode and a dark mode. A light mode is suitable for brighter environments, such as during the day or in well-lit environments, where users can adjust the display mode of the electronic device to light mode. A dark mode is suitable for dimly lit environments, such as at night or in low-light environments, where users can adjust the display mode of the electronic device to dark mode.

[0003] When an electronic device switches to dark mode, multiple application icons can be displayed on the desktop. However, in practice, the way these application icons are drawn in dark mode is rather simplistic. For example, dark mode application icons might be created by darkening or inverting the colors of light mode application icons, resulting in a poor user experience. Summary of the Invention

[0004] This application provides a method for drawing application icons, an electronic device, and related apparatus. The electronic device can set a dark mode foreground image for application icons in light mode and a background image with the same or preset color as the foreground image in dark mode, so as to improve the user's perception and immersion in dark mode application icons.

[0005] In a first aspect, embodiments of this application provide a method for drawing application icons, applied to electronic devices, the method comprising:

[0006] The desktop is displayed in light mode; the light mode desktop includes a first icon of a first application; the first icon corresponds to the light mode, and the first icon includes a first foreground image and a first background image, with the first foreground image located on top of the first background image; a trigger operation for switching display modes is received; the display modes include light mode and dark mode; the desktop is displayed in dark mode; the dark mode desktop includes a second icon of the first application, and the second icon corresponds to the dark mode, with the second icon including a second foreground image and a second background image, with the second foreground image located on top of the second background image; the content of the second foreground image is the same as the content of the first foreground image; the color of the second background image is different from the color of the first background image; wherein, the color of the second foreground image is either the color of the first foreground image or the color of the first background image; the second background image is obtained by matching from multiple preset background images; the preset background image includes a dark image and a solid color mask with transparency, with the solid color mask located on top of the dark image.

[0007] In this embodiment of the application, the light-colored desktop mode can be, for example... Figure 2 The interface shown in 'a'; the first icon can be the application icon for light mode. After switching to dark mode, the electronic device can display the second icon for dark mode, such as... Figure 2 The application icon in the interface shown by d. In dark mode, the color of the second foreground image can be either the color of the first foreground image or the color of the first background image, to continue the color scheme of the application icon in light mode.

[0008] When using Dark Mode, electronic devices can present a transition effect from a bright foreground image (such as a color scheme that continues the light-colored icons) to a dark background image (such as a solid color mask and a dark image overlaid), and then to a dark wallpaper or dark desktop, reducing the contrast between the bright foreground image and the dark background image. At the same time, a second foreground image and a second background image of the same color family (such as a solid color mask whose color matches the color of the dark mode foreground image) can create the effect that light shines on a colored object (such as the content of the dark mode foreground image), and the light is reflected or transmitted to a dark plane (such as the dark mode background image), enhancing the three-dimensionality of the dark mode foreground image and thus improving the user's immersive experience when using Dark Mode.

[0009] In one possible implementation, before displaying the dark mode desktop, the method further includes: identifying one or more colors of the second foreground image; matching the colors of the second foreground image with those of multiple preset background images to obtain a second background image; the color of the solid color mask in the second background image being the same as the target color among one or more colors; the target color being the color with the highest aspect ratio among one or more colors, and the target color excluding white; and combining the second foreground image and the second background image to form a second icon.

[0010] In this way, electronic devices use the main color scheme of the foreground image in dark mode to match the background image, making the background image and the foreground image similar in color. This creates the effect that when light shines on a colored object, the light is reflected or transmitted to a dark plane, enhancing the three-dimensionality of the foreground image in dark mode and thus improving the immersive experience for users using dark mode.

[0011] In one possible implementation, the second background image is obtained by matching the color of the second foreground image among multiple preset background images, including: when the number of colors in the second foreground image is one and the color of the second foreground image is the target color, the second background image is obtained by matching the target color among multiple preset background images; the color of the solid color mask in the second background image is the same as the target color.

[0012] In this way, when a color is included in the foreground image of dark mode, the electronic device can use that color as the target color to match the background image of dark mode, so that the foreground image and the background image have the same or similar colors, thereby enhancing the immersive experience of using dark mode.

[0013] In one possible implementation, the second background image is obtained by matching the color of the second foreground image among multiple preset background images, and further includes: when the second foreground image includes multiple colors, obtaining the aspect ratio of any one of the multiple colors in the second foreground image; wherein the second foreground image includes a target color, the target color is the color with the highest aspect ratio in the second foreground image among the multiple colors, and the difference between the aspect ratio of the target color and the aspect ratio of other colors is greater than a first preset value; the second background image is obtained by matching the target color among multiple preset background images; the color of the solid color mask in the second background image is the same as the target color.

[0014] In this way, when the foreground image in dark mode includes multiple colors, the electronic device can use the color with the largest aspect ratio as the target color to match the background image in dark mode, so that the foreground image and the background image in dark mode have the same or similar colors, thereby enhancing the immersive experience of using dark mode.

[0015] In one possible implementation, the second background image is obtained by matching the color of the second foreground image among multiple preset background images, and further includes: when the second foreground image includes multiple colors, obtaining the aspect ratio of any one of the multiple colors in the second foreground image; the second foreground image includes a target color and a first color, wherein the first color is white; the difference between the aspect ratio of the target color and the aspect ratio of the first color is less than a second preset value, and both the aspect ratio of the target color and the aspect ratio of the first color are greater than the aspect ratios of other colors; the second background image is obtained by matching the target color among multiple preset background images; and the color of the solid color mask in the second background image is the same as the target color.

[0016] In this way, when the foreground image in dark mode includes multiple colors and white, and the aspect ratios of white and color are similar, the electronic device can use the color with the largest aspect ratio other than white as the target color to match the background image in dark mode, so that the foreground image and the background image in dark mode have the same or similar colors, thereby enhancing the immersive experience of using dark mode.

[0017] In one possible implementation, before displaying the dark mode desktop, the method further includes: identifying multiple colors of the second foreground image; if the target color cannot be identified, matching the second background image with a preset color from multiple preset background images; the preset color is used to characterize the color after the multiple colors are mixed, and the color of the solid color mask in the second background image is the same as the preset color; and combining the second foreground image and the second background image to form a second icon.

[0018] In this way, when the second foreground image has rich colors, the electronic device cannot determine the main color scheme of the second foreground image; the electronic device can use a preset background image with neutral tones (such as gray) to create the effect of multiple colors of light mixed and projected onto a dark plane, enhancing the three-dimensionality of the second foreground image, thereby enhancing the immersive experience of the user when using dark mode; in addition, the preset background image with neutral tones can make different colors in the foreground image stand out, providing the user with a unified, pure, simple and elegant visual experience.

[0019] In one possible implementation, a second background image is obtained by matching a preset color among multiple preset background images, including: obtaining the aspect ratio of any color among the multiple colors in the second foreground image; and when the aspect ratios of the multiple colors are the same or close, obtaining a second background image by matching a preset color among the multiple preset background images.

[0020] In this way, when the proportions of multiple colors are the same or similar, the electronic device cannot determine the main color scheme of the foreground image in dark mode. The electronic device can use a preset color with a neutral tone to match the background image in dark mode, so that multiple colors in the foreground image in dark mode are highlighted, enhancing the purity of dark mode application icons.

[0021] In one possible implementation, the second background image is obtained by matching a preset color among multiple preset background images, and further includes: when the second foreground image includes multiple semi-transparent layers and the multiple semi-transparent layers have a perspective relationship, the second background image is obtained by matching a preset color among multiple preset background images.

[0022] In this way, when the foreground image in dark mode includes multiple semi-transparent layers with perspective relationships, electronic devices can use a gray preset background image as the background image for dark mode. This allows the edges of the semi-transparent layers to be more clearly shown through the contrast between gray and color, as well as the perspective effect between multiple color layers, thereby enhancing the purity of application icons in dark mode.

[0023] In one possible implementation, if the first foreground image includes one color and the color of the first foreground image is white, the color of the second foreground image is the color of the first background image; or, if the first foreground image includes one color and the color of the first foreground image is not white, the color of the second foreground image is the color of the first foreground image; or, if the first foreground image includes multiple colors, the color of the second foreground image is the color of the first foreground image.

[0024] In this way, electronic devices can retain the color scheme of application icons in light mode to preserve the color effect of foreground or background images, maintain the consistency of application icon color schemes in dark and light modes, and provide users with a consistent visual experience.

[0025] In one possible implementation, the first application includes a system application and / or a third-party application; the first foreground image and the second foreground image of the system application are both preset images; the first foreground image of the third-party application is a preset image, the second foreground image of the third-party application is a preset image, or the second foreground image of the third-party application is a foreground image obtained from a scalable vector graphics file based on the first foreground image.

[0026] In this way, electronic devices can provide a simple and lightweight way to draw application icons for system applications and third-party applications, thereby improving the recognizability and aesthetics of application icons in dark mode.

[0027] In a second aspect, embodiments of this application provide an electronic device, including a processor and a memory, wherein the memory is used to store code instructions and the processor is used to execute the code instructions to perform the methods described in the first aspect or any possible implementation thereof.

[0028] Thirdly, embodiments of this application provide a computer-readable storage medium storing a computer program or instructions that, when executed on a computer, cause the computer to perform the methods described in the first aspect or any possible implementation thereof.

[0029] Fourthly, embodiments of this application provide a computer program product including a computer program, which, when run on a computer, causes the computer to perform the methods described in the first aspect or any possible implementation of the first aspect.

[0030] Fifthly, this application provides a chip or chip system including at least one processor and a communication interface. The communication interface and the at least one processor are interconnected via a circuit. The at least one processor is used to run computer programs or instructions to perform the methods described in the first aspect or any possible implementation thereof. The communication interface in the chip can be an input / output interface, pins, or circuits, etc.

[0031] In one possible implementation, the chip or chip system described above in this application further includes at least one memory storing instructions. The memory can be an internal storage unit of the chip, such as a register or cache, or it can be a storage unit of the chip itself (e.g., read-only memory, random access memory, etc.).

[0032] It should be understood that the second to fifth aspects of this application correspond to the technical solutions of the first aspect of this application, and the beneficial effects achieved by each aspect and the corresponding feasible implementation are similar, and will not be repeated here. Attached Figure Description

[0033] Figure 1 This is an illustration of the foreground and background images in the application icon;

[0034] Figure 2 A schematic diagram illustrating a scenario for switching display modes provided in an embodiment of this application;

[0035] Figure 3 A flowchart illustrating the method for drawing application icons provided in this application embodiment;

[0036] Figure 4A A schematic diagram of a preset background image provided in an embodiment of this application;

[0037] Figure 4B A color schematic diagram of a preset background image provided in an embodiment of this application;

[0038] Figure 5 A schematic diagram illustrating two types of second foreground images for drawing the second icon provided in embodiments of this application;

[0039] Figure 6A This application provides a schematic diagram of a process for matching a preset background using a target color, as illustrated in an embodiment of the present application.

[0040] Figure 6B A color diagram illustrating matching a preset background with a target color, provided as an embodiment of this application;

[0041] Figure 7 This application provides another flowchart illustrating the matching of a target color to a preset background in an embodiment of the present application.

[0042] Figure 8 This application provides another schematic diagram of a process for matching a preset background using a target color, as provided in the embodiments of this application.

[0043] Figure 9 Two color diagrams illustrating the use of target colors to match preset backgrounds, provided in embodiments of this application;

[0044] Figure 10 This application provides a schematic diagram of a process for matching a preset background with a preset color, as shown in the embodiments of this application.

[0045] Figure 11 This application provides another schematic diagram of a process for matching a preset background with a preset color.

[0046] Figure 12 Two color diagrams illustrating the use of preset colors to match preset backgrounds, provided in the embodiments of this application;

[0047] Figure 13 A flowchart illustrating the method for drawing application icons for third-party applications provided in this application embodiment;

[0048] Figure 14A A schematic diagram illustrating various methods for drawing application icons provided in embodiments of this application;

[0049] Figure 14B Color illustrations of various application icon drawing methods provided in the embodiments of this application;

[0050] Figure 15 This is a schematic diagram of the structure of the electronic device 100 in the embodiments of this application;

[0051] Figure 16 This is a schematic diagram of the structure of an application icon drawing device provided in an embodiment of this application. Detailed Implementation

[0052] To facilitate understanding, the relevant terms and concepts involved in the embodiments of this application will be introduced below:

[0053] 1. Electronic equipment

[0054] The electronic devices in this application embodiment can be referred to as user equipment (UE), terminal, etc. For example, electronic devices can be mobile phones, tablets, personal digital assistants (PDAs), handheld devices with wireless communication capabilities, computing devices, in-vehicle devices or wearable devices, virtual reality (VR) terminal devices, augmented reality (AR) terminal devices, wireless terminals in industrial control, wireless terminals in smart homes, etc. The form of the electronic devices is not specifically limited in this application embodiment.

[0055] 2. Other terms

[0056] In the embodiments of this application, terms such as "first" and "second" are used to distinguish identical or similar items with substantially the same function and purpose. For example, "first chip" and "second chip" are used only to distinguish different chips and do not limit their order of execution. Those skilled in the art will understand that terms such as "first" and "second" do not limit the quantity or execution order, and that "first" and "second" do not necessarily imply that they are different.

[0057] It should be noted that, in the embodiments of this application, the terms "exemplary" or "for example" are used to indicate examples, illustrations, or descriptions. Any embodiment or design scheme described as "exemplary" or "for example" in this application should not be construed as being more preferred or advantageous than other embodiments or design schemes. Specifically, the use of terms such as "exemplary" or "for example" is intended to present the relevant concepts in a specific manner.

[0058] In this application embodiment, "at least one" refers to one or more, and "more than one" refers to two or more. "And / or" describes the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A alone, A and B simultaneously, or B alone, where A and B can be singular or plural. The character " / " generally indicates that the preceding and following related objects are in an "or" relationship. "At least one of the following" or similar expressions refer to any combination of these items, including any combination of single or plural items. For example, at least one of a, b, or c can represent: a, b, c, ab, a--c, bc, or abc, where a, b, and c can be single or multiple.

[0059] The desktop of an electronic device may include various application icons. Application icons may include a foreground image and a background image. The foreground image can be the main body of the application icon, and may include the application's logo, name, branding elements, or other elements; users can identify the application corresponding to the icon based on the foreground image. The background image is the underlying part of the application icon, used to complement the foreground image and enhance the overall visual effect of the icon; it is usually a single color.

[0060] Take the phone app icon as an example. Figure 1 This illustrates a diagram of the foreground and background images of an application icon, such as... Figure 1 As shown: A phone app icon may include a foreground image and a background image. The foreground image identifies the functionality of the phone app; for example, it may include an image of a phone handset. The background image serves to highlight the foreground image; for example, it may be a rectangular or rounded rectangle, typically in a single color, and sits below the foreground image, which is contained within the background image's content.

[0061] In one possible implementation, after switching to dark mode, the electronic device could darken the color of application icons on the desktop; or, after switching to dark mode, the application icons on the dark mode desktop would remain the same as those on the light mode desktop. In this case, the color of the application icons on the desktop remains unchanged or changes only slightly when switching from light mode to dark mode, reducing the user's ability to distinguish between light and dark modes and thus degrading the user's experience when using dark mode.

[0062] Alternatively, in a possible implementation, after switching to dark mode, the electronic device could invert the background image (e.g., adjust white to black). If the app icon is richly colored, inverting the color scheme of the app icon in light mode might prevent the dark mode app icon from maintaining the same color experience as the light mode app icon, resulting in a lack of visual consistency.

[0063] Alternatively, in a possible implementation, after switching to dark mode, the electronic device can set the background image of the application icon to a dark background image. However, in some scenarios, in light mode, the electronic device can highlight certain applications with a colored background image (which can be a single color other than black or white, or a combination of multiple colors other than black or white); for example, the background image of the phone application icon is green. After uniformly replacing the colored background image with a fixed dark background image, the contrast between the foreground image and the background image in dark mode is reduced, failing to reflect the design sense and series feel of the colored background image in light mode.

[0064] In view of this, embodiments of this application provide a method for drawing application icons, which allows an electronic device to adjust the foreground image in a dark mode from the foreground image in a light mode. For example, when the foreground image in a light mode is a single color, the color of the foreground image in a dark mode is the same as the color of the background image in a light mode. When the foreground image in a light mode is not a single color, the color of the foreground image in a dark mode follows the color of the foreground image in a light mode. The electronic device can match the background image in a dark mode from a preset background image using the foreground image in a dark mode. The preset background image can be a dark background image with various colors, such as gray, blue-gray, green-gray, yellow-gray, orange-gray, and red-gray. In this way, in dark mode, the color of the background image is adapted to the color of the foreground image. The dark background image corresponds to the dark mode, which can improve the user's perception of the dark mode and the immersion in using the dark mode. The foreground image can transition to the dark desktop through the background image, reducing the contrast between the foreground image and the dark desktop and improving visual comfort. In addition, when the foreground image has a single color, the effect of highlighting application icons in light mode can be restored by using a background image with color. When the foreground image has multiple colors, the foreground image in light mode can be used to maintain the fullness and vividness of the foreground image.

[0065] The following is combined with Figure 2 The display modes provided in the embodiments of this application will be described.

[0066] Electronic devices can offer light and dark modes. For example, when displaying the desktop, the electronic device can display a light-mode desktop (201), such as... Figure 2 The interface shown in Figure 'a' is as follows. The light-colored desktop 201 may include multiple application icons (as shown in the dashed box 202) and time information; the multiple application icons may include, for example, social application icons, payment application icons, music application icons, reading application icons, video application icons, weather application icons, settings application icons 203, phone application icons, SMS application icons, camera application icons, and browser application icons, etc.

[0067] In light mode, most app icons can display a relatively rich range of colors. Taking the app icons within the dashed box 202 as examples, the dotted filled areas within the app icons can be represented as colored areas; for instance, in the social app icon, the foreground image is white, and the background image is colored; similarly, in the music app icon, the foreground image is colored, and the background image is white. Thus, in light mode, various color combinations can enhance the user's color experience.

[0068] In some embodiments, a light mode is suitable for bright environments, and a dark mode is suitable for dim environments. When the ambient light changes, the electronic device can automatically switch or switch the corresponding display mode based on user operation.

[0069] For example, let's take switching from light mode to dark mode as an example:

[0070] In one method of switching display modes, electronic devices can switch display modes based on shortcut function controls in the control center interface.

[0071] For example, in Figure 2 In the interface shown in Figure 'a', when a trigger action is received by swiping down from the top of the screen, the electronic device can enter the control center interface, as shown below. Figure 2 The interface shown in b is shown in the image. Figure 2 In the interface shown in b, the electronic device can display multiple shortcut function controls, such as the dark mode control 204, which can be used to switch display modes. Specifically, when the dark mode control 204 is unselected, the electronic device is in light mode; when the dark mode control 204 is selected, the electronic device is in dark mode.

[0072] exist Figure 2 In the interface shown in b, the dark mode control 204 is unselected. When a trigger operation is received for the dark mode control 204, the electronic device switches to dark mode and displays the selected dark mode control 204 (not shown in the figure). After the electronic device exits the control center interface, it can display the dark mode desktop 209, as shown in the figure. Figure 2 The interface shown in d is shown in the image.

[0073] In dark mode, the background image of the application icon can be set to a dark background image; in this embodiment, the dark background image can be, for example, an image background resulting from the mixing or overlay of color and gray. Figure 2 The gray background image shown in d does not show a color overlay effect; this will be explained later. Figure 4B The color effects of dark background images will be explained in detail here (but will not be elaborated on here). Compared to white or colored background images in light mode, dark background images are more suitable for dark mode desktops. Users can understand that their electronic devices are currently in dark mode based on the dark background image. Dark background images with corresponding colors can also serve as a transition effect from colored icons to a dark desktop, improving visual comfort.

[0074] Furthermore, dark mode app icons can retain the colors of light mode app icons. For example, the dotted fill area in an app icon can represent a colored area. In social media app icons, the foreground image in light mode is white, and the background image is colored. When the background image is set to dark, the white foreground image and the dark background image cause the social media app icon to lose its original colors. In this embodiment, after setting the background image to a dark background image, the foreground image can be set to a colored background image, thereby allowing the dark mode social media app icon to retain the color experience of the light mode social media app icon.

[0075] In another way to switch display modes, electronic devices can switch display modes based on settings controls in the settings app.

[0076] For example, in Figure 2 In the interface shown as 'a', when a trigger operation is received for the settings application 203, the electronic device can enter the settings application interface (not shown in the figure); the settings application interface may include multiple settings items, such as display and brightness settings. When a trigger operation is received for the display and brightness settings, the electronic device can enter the display and brightness settings interface, such as... Figure 2 The interface shown in c is shown in the image. Figure 2 The interface shown in Figure 'c' may include multiple brightness-related controls, such as a light mode control 205 and a dark mode control 206. The light mode control 205 is used to set the light mode, and the dark mode control 206 is used to set the dark mode. When the light mode control 205 is selected, the electronic device can be in light mode; when the dark mode control 206 is selected, the electronic device can be in dark mode.

[0077] exist Figure 2 In the interface shown in Figure c, the light mode control 205 is selected, and the dark mode control 206 is unselected. When a trigger operation is received for the dark mode control 206, the electronic device can switch to dark mode and display the selected dark mode control 206 and the unselected light mode control 205 (not shown in the figure). After the electronic device exits the settings application interface, the electronic device can display the dark mode desktop 209, as shown in the figure. Figure 2 The interface shown in d is shown in the image.

[0078] In another way of switching display modes, electronic devices can automatically switch display modes.

[0079] For example, in Figure 2In the interface shown in Figure c, the electronic device can also display an automatic switching control 207 and a switching time control 208. The automatic switching control 207 can be used to control the automatic switching of display modes at a preset time. The switching time control 208 can be used to control the time of automatic display mode switching. The electronic device can customize a fixed switching time, for example, switching to dark mode between 18:00 and 6:00, and switching to light mode between 6:00 and 18:00. The electronic device can also be set to switch to light mode at sunrise and to dark mode after sunset. When the automatic switching control 207 is on, the electronic device can automatically switch display modes after the switching time is reached. When the automatic switching control 207 is off, the electronic device does not automatically switch display modes.

[0080] exist Figure 2 In the interface shown as c, the automatic switching control 207 is in the off state. When a trigger operation is received on the automatic switching control 207, the electronic device enables the automatic display mode switching function and displays the automatic switching control 207 (not shown in the figure) in the on state. Subsequently, when the dark mode switching time is reached, the electronic device can display as shown in the figure. Figure 2 The interface shown in d is shown in the image.

[0081] Other methods can also be used to switch display modes in this application embodiment, such as controlling the electronic device to switch display modes via voice commands, etc., which will not be listed in detail in this application embodiment. Furthermore, this application embodiment uses switching from light mode to dark mode as an example to illustrate the scenario of switching display modes in this application embodiment; the process of switching from dark mode to light mode is similar to... Figure 2 The scenarios shown are similar, and will not be described again in the embodiments of this application.

[0082] The following example demonstrates how an electronic device can switch from light mode to dark mode. Figure 3 The method for drawing application icons provided in the embodiments of this application will be described, such as... Figure 3 As shown:

[0083] S301. The electronic device displays a desktop in light color mode; wherein the desktop in light color mode includes a first icon of a first application; the first icon corresponds to the light color mode, and the first icon includes a first foreground image and a first background image, with the first foreground image located on top of the first background image.

[0084] A light-colored desktop can be, for example Figure 2 The interface shown in Figure 'a'. The light-mode desktop includes the first icon of the first application, which can be any application on the light-mode desktop. For example, the first application could be... Figure 2The interface shown in Figure 'a' includes social applications, payment applications, music applications, reading applications, video applications, weather applications, settings applications, phone applications, SMS applications, camera applications, and browser applications. The first application can also be other applications not shown on the desktop, which will not be listed one by one in this embodiment.

[0085] The first icon is the application icon for the first application, and the first icon corresponds to the light mode. For example, if the first application is a phone application, the first icon is the application icon for the phone application in light mode. The first icon may include a first foreground image and a first background image, where the first foreground image is the foreground image of the first application in light mode, and the first background image is the background image of the first application in light mode; the first foreground image is located on top of the first background image.

[0086] It should be noted that, in this embodiment, the first application can be a system application or a third-party application. A system application can be an application pre-installed on an electronic device by the operating system developer, such as a settings application, camera application, phone application, SMS application, etc. A third-party application can be an application downloaded and installed by the electronic device from an app store or other channels, such as a social application, payment application, and music application, etc. This embodiment does not limit the type of the first application.

[0087] S302, The electronic device receives a trigger operation for switching display modes; the display modes include light mode and dark mode.

[0088] The trigger operation for switching display modes can be, for example: Figure 2 In the interface shown in b, the trigger operation is for the dark mode control 204 in its unselected state; Figure 2 In the interface shown in c, the trigger operation is for the dark mode control 206 in its unselected state; Figure 2 In the interface shown in Figure c, the automatic switching control 207 is in the enabled state. When the switching time is reached, the electronic device automatically switches the display mode; or, the electronic device switches the display mode based on the user's voice command. This application embodiment does not limit this.

[0089] S303. The electronic device displays a dark mode desktop; the dark mode desktop includes a second icon of a first application, the second icon corresponds to the dark mode, the second icon includes a second foreground image and a second background image, the second foreground image is located on top of the second background image; the content of the second foreground image is the same as the content of the first foreground image; the color of the second background image is different from the color of the first background image; wherein, the color of the second foreground image is either the color of the first foreground image or the color of the first background image; the second background image is obtained by matching from multiple preset background images; the preset background image includes a dark image and a solid color mask with transparency, the solid color mask is located on top of the dark image.

[0090] Dark mode desktop can be, for example Figure 2 The interface shown in 'd' is an example. The dark mode desktop includes a second icon for the first application, which can be any application on the dark mode desktop. For example, the first application could be... Figure 2 The interface shown in d includes social applications, payment applications, music applications, reading applications, video applications, weather applications, settings applications, phone applications, SMS applications, camera applications, and browser applications. The first application can also be other applications not shown on the desktop. This application embodiment will not provide examples of each of these.

[0091] Understandably, the applications displayed on the desktop of an electronic device remain unchanged before and after switching display modes. That is, in light mode, the electronic device displays the icon of the first application; after switching to dark mode, the dark mode desktop still includes the icon of the first application. The difference lies in that in light mode, the first application's icon is the first icon; in dark mode, the first application's icon is the second icon. The dark mode desktop includes the second icon of the first application, which corresponds to the dark mode. The second icon includes a second foreground image and a second background image, with the second foreground image positioned above the second background image.

[0092] It is understandable that after switching display modes, the foreground image of the application icon still needs to identify the function of the application, so the content of the second foreground image (the shape and style of the foreground image in dark mode, etc.) is the same as the content of the first foreground image (the shape and style of the foreground image in light mode, etc.).

[0093] To facilitate the distinction between dark mode and light mode, in this embodiment, the color of the second background image is different from the color of the first background image; the background image of dark mode (corresponding to the second background image) can be a dark color, such as black, gray, or black or gray superimposed with color; the background image of light mode (corresponding to the first background image) can be white or colored; in general scenarios, the two colors are different.

[0094] The color of the second foreground image can be either the color of the first foreground image or the color of the first background image. In some embodiments, the color of the foreground image in dark mode (corresponding to the second foreground image) can be the same as the color of the foreground image in light mode (corresponding to the first foreground image). For example, if the application icon has a rich color scheme, this embodiment can continue the color scheme of the application icon in light mode by using the color of the foreground image in light mode.

[0095] In other embodiments, the color of the foreground image in dark mode (corresponding to the second foreground image) can be the same as the background image in light mode (corresponding to the first background image). In light mode, the color scheme of the application icon may be simpler; for example, the foreground image in light mode is white, and the background image is colored. After setting the second background image to a dark background image, the white foreground image and the dark background image cannot present the color scheme effect of the application icon in light mode; in the embodiments of this application, the electronic device can use the color of the first background image as the color of the second foreground image, for example, setting the color of the second foreground image to colored, to continue the color scheme of the application icon in light mode.

[0096] It should be noted that, in this embodiment, the second background image can be a dark background image with color, and the color of the second background image can be matched with the color of the second foreground image. The second background image can be obtained by matching from multiple preset background images based on the number of colors in the second foreground image and / or the color of the second foreground. The preset background images can be dark background images with different colors.

[0097] Figure 4A This illustration shows a schematic diagram of a preset background image provided in an embodiment of this application. Figure 4B This is a color illustration of a preset background image.

[0098] In this embodiment, the preset background image may include a dark image and a solid color mask with transparency, with the solid color mask located on top of the dark image.

[0099] See first Figure 4A A solid color mask can be a layer with a single color and transparency. In this embodiment, the color of the solid color mask can be set according to the frequency of use of the color; for example, in graphic design and daily life, commonly used colors may include gray, blue, green, yellow, orange, and red, etc.; the color of the solid color mask can be gray, blue, green, yellow, orange, and red, etc. The transparency of each solid color mask can be the same, for example, alpha = 10%; the transparency of each solid color mask can also be different, and this embodiment does not limit this.

[0100] This application uses the position of each color on the color wheel as an example to illustrate each color.

[0101] For example, the gray (dot) is positioned close to the center of the circle on the color wheel; for instance, the RGB value of gray could be (R=187, G=191, B=200).

[0102] Taking the highest point of the color wheel (i.e., the 12 o'clock direction on a clock) as 0° as an example, the position of blue (dot) on the color wheel is roughly in a sector area of ​​165° to 285°; for example, the RGB value of blue can be (R=0, G=93, B=255).

[0103] The green (dot) color is located in a sector of approximately 285° to 15° on the color wheel; for example, the RGB value of green can be (R=32, G=205, B=58).

[0104] The yellow (dot) color is located in a sector of approximately 15° to 45° on the color wheel; for example, the RGB value of yellow can be (R=255, G=201, B=0).

[0105] Orange (dots) is positioned roughly in a sector area between 45° and 75° on the color wheel; for example, the RGB values ​​for orange can be (R=255, G=89, B=0).

[0106] The red (dot) color is located in a sector of approximately 75° to 165° on the color wheel; for example, the RGB value of red can be (R=250, G=90, B=65).

[0107] This application embodiment uses only the RGB and alpha values ​​of the solid color mask as examples to illustrate the color and transparency of the solid color mask. In practical applications, the color of the solid color mask may differ from the above-mentioned colors, or the number of colors in the solid color mask may be more or less than the above-mentioned number of colors. This application embodiment does not impose any limitations on this.

[0108] The dark image can be a single dark layer without transparency. For example, the color of the dark image can be gray, and the RGB values ​​can be, for example, (R=24, G=24, B=25). Optionally, in this embodiment, the dark image can also be a layer of other colors, for example, the color of the dark image can be black; or, the electronic device can match the dark image according to the color of the theme or wallpaper. This embodiment does not limit the color of the dark image.

[0109] The size of the dark image is the same as the size of the solid color mask. After the dark image and the solid color mask are superimposed, the solid color mask can cover the entire dark image, thus obtaining the preset background image.

[0110] To better demonstrate the color effects of the preset background image, the following section combines... Figure 4B A color illustration is provided to illustrate the preset background image. See also... Figure 4B :

[0111] In this embodiment, a semi-transparent solid color overlay and a dark image are superimposed to synthesize a preset background image with color. The preset background image corresponding to the second background image is obtained by matching it with a second foreground image in dark mode; for example, a preset background image with the same color is matched using a color with a higher aspect ratio in the second foreground image; or when the color scheme of the second foreground image is complex, a preset background image with less influence on the color of the second foreground image can be selected. That is, the color of the second background image is related to the color of the second foreground image. The color of the second foreground image can be a light color, and the color of the second background image can be a dark color. The two can be colors of the same color system but different levels or different hues; or, the color of the second background image can be a color that does not affect the color scheme of the second foreground image.

[0112] In this way, after combining the second foreground image and the second background image, when the user uses dark mode, the electronic device can present a transition effect from a light foreground image to a dark background image, and then to a dark wallpaper or dark desktop, reducing the contrast between the light foreground image and the dark background image. At the same time, the second foreground image and the second background image of the same color family can create the effect that light shining on a colored object (such as the content of the second foreground image) is reflected or transmitted to a dark plane, enhancing the three-dimensionality of the second foreground image, thereby enhancing the immersive experience of the user when using dark mode.

[0113] The above embodiments briefly describe the second foreground image and the second background image in dark mode in the embodiments of this application. The following, in conjunction with... Figures 5-12 The drawing method of the second icon (e.g., the second foreground image and the second background image) provided in the embodiments of this application will be described in detail.

[0114] In this embodiment of the application, the electronic device can draw a second foreground image in dark mode using different rules. For example, Figure 5 This application illustrates two methods for drawing the second foreground image of the second icon, as provided in the embodiments of this application. Figure 5 As shown:

[0115] In the first case, the color of the second foreground image can be the same as the color of the first foreground image in light mode. In the second case, the color of the second foreground image can be inverted so that the color of the second foreground image is the same as the color of the first background image in light mode.

[0116] The first scenario can be referenced. Figure 5Figure a in the middle or Figure 5 Figure b in the diagram.

[0117] See first Figure 5 Figure a: When the first foreground image includes multiple colors, the color of the second foreground image can be the color of the first foreground image.

[0118] Taking a gallery app as an example, the first icon can be the app icon in light mode, and the second icon can be the app icon in dark mode. In light mode, the first foreground image can include multiple colors; for example, the first foreground image of a gallery app includes six colors, and different colors are represented by different fill methods in the image. For a first foreground image with rich colors, this embodiment can set the color of the second foreground image to be the same as the color of the first foreground image, so as to continue the color scheme of the original icon in dark mode. For example, in dark mode, the second foreground image includes the same colors as the first foreground image; for example, the second foreground image of a gallery app also includes six colors; different colors are represented by different fill methods in the image, and the fill methods of corresponding positions in the first and second foreground images are the same to represent the same color.

[0119] See Figure 5 In Figure b: If the first foreground image includes a color and the color of the first foreground image is not white, the color of the second foreground image is the color of the first foreground image.

[0120] Taking the Settings app as an example, the first icon can be the app icon in light mode, and the second icon can be the app icon in dark mode. In light mode, the first foreground image can include a single color; for example, the first foreground image of the Settings app includes a single color, which is represented by a fill method in the image. The first foreground image not being white can be understood as: the color of the first foreground image is not white, or is not a color close to white.

[0121] For a first foreground image that is a single color and is in color, embodiments of this application can set the color of the second foreground image to be the same as the color of the first foreground image. This reduces the color difference between application icons in dark and light modes, maintains icon consistency, and provides users with a consistent visual experience. For example, in dark mode, the second foreground image may include the same color as the first foreground image; for instance, the second foreground image of the application can be set to include a single color. A single color is represented by a fill method in the figure, and the fill method at corresponding positions in the first and second foreground images is the same to represent the same color.

[0122] In the first case, the first foreground icon is specifically one or more colors. The electronic device can retain the color scheme of the foreground image in light mode to preserve the color effect of the foreground image, maintain the consistency of the foreground image in dark mode and light mode, and provide users with a consistent visual experience.

[0123] The second scenario can be referenced. Figure 5 In Figure c: If the first foreground image includes a color and the color of the first foreground image is white, the color of the second foreground image can be the color of the first background image.

[0124] Taking the phone application as an example, the first icon can be the application icon in light mode, and the second icon can be the application icon in dark mode. In light mode, the first foreground image can include a single color, and the color of the first foreground image is white; for example, the first foreground image of the phone application includes a single color, and the first foreground image is white; the first foreground image is not filled in the figure to represent that the first foreground image is white.

[0125] It is understandable that for a first foreground image that is white, the first background image is often designed to be colored to highlight the white foreground image. In this embodiment, the color of the second foreground image can be set to be the same as the color of the first background image to avoid the application icon in dark mode losing its original color effect when paired with a dark background image. For example, in dark mode, the second foreground image may include the same color as the first background image; for instance, the second foreground image of a phone application may include a single color; different fill methods are used to represent different colors in the figure, and the second foreground image and the first background image have the same fill method to indicate that the color of the second foreground image is the same as the color of the first background image.

[0126] It should be noted that the embodiments of this application only exemplify two methods for drawing the second foreground image. In these embodiments, the electronic device may also obtain the second foreground image without using the above methods. For example, if the first application is a third-party application, the second foreground image can be a preset foreground image in dark mode provided by the third-party application, and this foreground image may not satisfy the above-described methods for drawing the second foreground image. This application implementation

[0127] The above embodiments combined Figure 5 The drawing method of the second foreground image in the second icon in the embodiments of this application will be described below. Referring to Figure 6- Figure 12 The drawing method of the second background image in the second icon in the embodiments of this application will be described.

[0128] This application provides two methods for drawing the second background image. In the first method, the electronic device can select a color from one or more colors in the second foreground image to obtain a target color; the target color is then used as the color of the solid color mask in the second background image. In the second method, the electronic device can use a preset color as the color of the solid color mask in the second background image. The first method can correspond to... Figures 6A to 9 The second drawing method can correspond to Figures 10 to 12 .

[0129] For example, the first drawing method may include the following process:

[0130] The electronic device can identify one or more colors of the second foreground image; the electronic device matches the colors of the second foreground image with those of multiple preset background images to obtain a second background image; the color of the solid color mask in the second background image is the same as the target color among one or more colors; the electronic device combines the second foreground image and the second background image to form a second icon.

[0131] Preset background images can be used as a reference. Figure 4A The relevant descriptions in the text; the target color can be the color with the highest aspect ratio among one or more colors, and the target color does not include white; the aspect ratio can be the aspect ratio of any one of the one or more colors in the second foreground image.

[0132] Understandably, the target color is a valid color that is not white. Color is generally more visually appealing than white. When there is less color and more white, electronic devices can still use color as the primary color of the second foreground image to match the preset background image. For example, when the second foreground image includes both white and color, and the proportion of white is slightly higher than that of color, color can be used as the target color instead of white.

[0133] In this way, the electronic device uses the target color to match multiple preset background images, so that the second background image and the second foreground image are images of the same color family. This can create the effect that when light shines on a colored object (such as the content of the second foreground image), the light is reflected or transmitted to a dark plane, enhancing the three-dimensionality of the second foreground image and thus improving the immersive experience of the user when using dark mode.

[0134] The following is combined with Figures 6A to 9 The rules for the first drawing method will be explained in detail.

[0135] Figure 6A This illustration shows a flowchart of a process for matching a preset background using a target color, according to an embodiment of this application. Figure 6B for Figure 6A The corresponding color diagram.

[0136] The electronic device obtains a second background image by matching the color of the second foreground image among multiple preset background images. This may include: when the number of colors in the second foreground image is one and the color of the second foreground image is the target color, the electronic device obtains a second background image by matching the target color among multiple preset background images; the color of the solid color mask in the second background image is the same as the target color.

[0137] Electronic devices can acquire a second foreground image in dark mode. The process of acquiring a second foreground image in dark mode can be found in [reference needed]. Figure 5 The relevant description in the illustrated embodiment; the second foreground image may include one or more colors. It is understood that when the second foreground image includes one color, that color has the largest aspect ratio, for example, 100%; in this case, that color can be used as the target color.

[0138] Taking the first set of applications as an example, including the settings app, SMS app, phone app, file management app, video app, and reading app, see [link / reference]. Figure 6A Figure a shows the secondary foreground images of multiple applications in dark mode when the electronic device is switched to dark mode. Examples include: a gray background for the Settings app (represented by a left diagonal fill); a blue background for the Messages app (represented by a grid fill); a green background for the Phone app (represented by a diagonal grid fill); a yellow background for the Files app (represented by a right diagonal fill); an orange background for the Video app (represented by a horizontal fill); and a red background for the Reading app (represented by a vertical fill).

[0139] After obtaining the target color, the electronic device can match a preset background image with the same color family as the target color among multiple second background images based on a color wheel. Specifically, Figure 6A Figure b in the diagram illustrates a classification method for color systems on a color wheel:

[0140] For ease of description, embodiments of this application may divide the color wheel into multiple regions based on the colors of a preset background image. For example, the preset background image may include six colors: gray, blue, green, yellow, orange, and red; the color wheel may include six regions: gray, blue, green, yellow, orange, and red.

[0141] With the top of the circle (at the 12 o'clock position) as 0°, the gray area can be the concentric circles inside the color wheel; the yellow area is, for example, the portion of the 15°-45° sector excluding the gray area; the orange area is, for example, the portion of the 45°-75° sector excluding the gray area; the red area is, for example, the portion of the 75°-165° sector excluding the gray area; the blue area is, for example, the portion of the 165°-285° sector excluding the gray area; and the green area is, for example, the portion of the 285°-15° sector excluding the gray area. This application embodiment only illustrates each area by example using angles and colors; the specific color of the preset background icon and the specific division method of the color wheel area are not limited in this application embodiment.

[0142] Specifically, when the RGB value of the target color falls within the gray area, the electronic device can match a preset gray background image and use it as a second background image; the preset gray background image may include a dark image and a gray solid color mask. When the RGB value of the target color falls within the blue area, the electronic device can match a preset blue background image and use it as a second background image; the preset blue background image may include a dark image and a blue solid color mask. When the RGB value of the target color falls within the green area, the electronic device can match a preset green background image and use it as a second background image; the preset green background image may include a dark image and a green solid color mask. When the RGB value of the target color falls within the yellow area, the electronic device can match a preset yellow background image and use it as a second background image; the preset yellow background image may include a dark image and a yellow solid color mask. When the RGB value of the target color falls within the orange region, the electronic device can match a preset orange background image and use it as a second background image; the preset orange background image may include a dark image and a solid orange mask. When the RGB value of the target color falls within the red region, the electronic device can match a preset red background image and use it as a second background image; the preset red background image may include a dark image and a solid red mask.

[0143] Electronic devices can composite a second foreground image with a second background image to obtain a second icon in dark mode, such as... Figure 6A As shown in Figure a, the second foreground image and the second background image are of the same color family, which enhances the visual effect of dark mode and provides users with an immersive experience.

[0144] It should be noted that, in the embodiments of this application, the second foreground image comprising a single color can mean that all parts of the second foreground image have the same color; or that the colors of all parts of the second foreground image are similar and belong to the same color family. For example, if the colors of all parts of the second foreground image are yellow, dark yellow, and light yellow, the RGB values ​​of the colors of each part are similar, and the electronic device can recognize that the color of the second foreground image is a single color. The embodiments of this application do not limit this.

[0145] Figure 7 This illustration shows another flowchart of matching a preset background with a target color, provided by an embodiment of this application.

[0146] The electronic device obtains a second background image by matching the color of a second foreground image among multiple preset background images. This may include: when the second foreground image includes multiple colors, obtaining the aspect ratio of any one of the multiple colors in the second foreground image; wherein the second foreground image includes a target color, which is the color with the highest aspect ratio in the second foreground image among the multiple colors, and the difference between the aspect ratio of the target color and the aspect ratio of other colors is greater than a first preset value; obtaining the second background image by matching the target color among multiple preset background images; and the color of the solid color mask in the second background image is the same as the target color.

[0147] Electronic devices can acquire a second foreground image in dark mode. The process of acquiring a second foreground image in dark mode can be found in [reference needed]. Figure 5 The relevant description in the illustrated embodiment; the second foreground image may include one or more colors. It is understood that when the second foreground image includes multiple colors, the electronic device may set the color with the highest aspect ratio as the target color, so that the color with the highest aspect ratio is used as the primary color scheme of the second foreground image.

[0148] The difference between the aspect ratio of the target color and the aspect ratio of other colors is greater than a first preset value. This can be understood as follows: when the aspect ratios of two or more colors in the second foreground image are similar, the electronic device can obtain a color with the highest aspect ratio and a color with the second highest aspect ratio. These two colors cannot determine the dominant color system in the second foreground image based on their approximate aspect ratios. Therefore, when identifying the target color through aspect ratio, the target color needs to significantly occupy a large portion of the image to demonstrate its presence in the second foreground image. The difference between the aspect ratio of the target color and the aspect ratio of other colors can be greater than the first preset value, which can be a specific aspect ratio or a percentage of the aspect ratio. Furthermore, embodiments of this application can also determine whether the target color occupies a large portion of the image through other methods, and this application does not limit this approach.

[0149] Taking camera apps, game apps, and browser apps as examples, see [link / reference]. Figure 7 The colored icons for camera apps, game apps, and browser apps in dark mode can be referenced. Figure 9 Figure a in the text:

[0150] After switching to dark mode, the electronic device can obtain secondary foreground images from multiple applications in dark mode. For example, secondary foreground images from a camera application, a game application, and a browser application. The electronic device samples the colors from these secondary foreground images. Specifically, the secondary foreground image from the camera application includes gray and red, the secondary foreground image from the game application includes gray, red, orange, green, and blue, and the secondary foreground image from the browser application includes gray and white, etc.

[0151] Electronic devices recognize the aspect ratio of multiple colors. In the second foreground image of a camera application, gray has the highest aspect ratio, so the target color for the camera application is set to gray; in the second foreground image of a game application, gray has the highest aspect ratio, so the target color for the game application is set to gray; in the second foreground image of a browser application, blue has the highest aspect ratio, so the target color for the browser application is set to blue.

[0152] Electronic devices match a target color among multiple preset background images. For example, in a camera application's second foreground image, if the target color corresponds to a gray preset background image, the gray preset background image is set as the second background image. In a game application's second foreground image, if the target color corresponds to a gray preset background image, the gray preset background image is set as the second background image. In a browser application's second foreground image, if the target color corresponds to a blue preset background image, the blue preset background image is set as the second background image. The process of matching preset background images using a target color can be found in [reference needed]. Figure 6A The relevant descriptions in the document will not be repeated here.

[0153] Electronic devices can composite a second foreground image with a second background image to obtain a second icon in dark mode, such as... Figure 7 As shown, the second foreground image and the second background image are of the same color family, thereby enhancing the visual effect of dark mode and providing users with an immersive experience.

[0154] Figure 8 This illustration shows another flowchart of matching a preset background with a target color, provided in an embodiment of this application.

[0155] The electronic device obtains a second background image by matching the color of a second foreground image among multiple preset background images, and further includes: when the second foreground image includes multiple colors, obtaining the aspect ratio of any one of the multiple colors in the second foreground image; the second foreground image includes a target color and a first color, the first color being white; the difference between the aspect ratio of the target color and the aspect ratio of the first color is less than a second preset value, and both the aspect ratio of the target color and the aspect ratio of the first color are greater than the aspect ratios of other colors; the second background image is obtained by matching the target color among multiple preset background images; the color of the solid color mask in the second background image is the same as the target color.

[0156] Electronic devices can acquire a second foreground image in dark mode. The process of acquiring a second foreground image in dark mode can be found in [reference needed]. Figure 5 The relevant description in the illustrated embodiment indicates that the second foreground image may include one or more colors. It is understood that when the second foreground image includes multiple colors, the electronic device can set the color with the highest aspect ratio as the target color, using this color as the primary color scheme of the second foreground image. However, in some scenarios, the color with the highest aspect ratio may be white. Although the aspect ratio of the color is slightly smaller than that of the white, color is more visually appealing to the user. Therefore, when there is less color and more white, the electronic device can still use color as the primary color scheme of the second foreground image to match the preset background image.

[0157] In this embodiment of the application, the first color is white or a color close to white, and the target color is a color; the user's visual attention to the target color may be higher than that to the first color.

[0158] The difference between the aspect ratio of the target color and the aspect ratio of the first color is less than a second preset value. This can be understood as: the aspect ratio of the color is greater than the aspect ratio of the white, and the difference between the two is small; or the aspect ratio of the white is greater than the aspect ratio of the color, and the difference between the two is small. The second preset value can be a specific aspect ratio, or it can be a percentage of the aspect ratio; this embodiment does not limit this. Furthermore, this embodiment does not limit the relationship between the second preset value and the first preset value.

[0159] The aspect ratios of the target color and the first color are both greater than those of the other colors. This can be understood as: the target color is the color with the highest aspect ratio, and the first color is the color with the second highest aspect ratio; or, the first color is the color with the highest aspect ratio, and the second color is the color with the second highest aspect ratio.

[0160] In this scenario, the electronic device can use the non-white color with the highest aspect ratio as the target color and match the preset background image with the target color.

[0161] Specifically, taking equipment management applications, weather applications, and measurement applications as examples, see [link to relevant documentation]. Figure 8 The color icons for device management, weather, and measurement apps in dark mode can be found in the reference section. Figure 9 Figure b in the text:

[0162] After switching to dark mode, the electronic device can obtain secondary foreground images from multiple applications in dark mode. For example, secondary foreground images from a device management application, a weather application, and a measurement application. The electronic device samples the colors from these secondary foreground images; the secondary foreground image from the device management application includes white and red, the secondary foreground image from the weather application includes white and yellow, and the secondary foreground image from the measurement application includes white and blue, etc.

[0163] Electronic devices recognize the aspect ratios of multiple colors. In the second foreground image of a device management application, if the aspect ratios of white and red are close, the target color for the device management application is set to a non-white color, such as red. In the second foreground image of a weather application, if the aspect ratios of white and yellow are close, the target color for the weather application is set to a non-white color, such as yellow. In the second foreground image of a measurement application, if the aspect ratios of white and blue are close, the target color for the measurement application is set to a non-white color, such as blue.

[0164] Electronic devices match a target color among multiple preset background images. For example, in the second foreground image of a device management application, the target color might correspond to a red preset background image, which is then set as the second background image. In the second foreground image of a weather application, the target color might correspond to a yellow preset background image, which is then set as the second background image. In the second foreground image of a measurement application, the target color might correspond to a blue preset background image, which is then set as the second background image. The process of matching preset background images using a target color can be found in [reference needed]. Figure 6A The relevant descriptions in the document will not be repeated here.

[0165] Electronic devices can composite a second foreground image with a second background image to obtain a second icon in dark mode, such as... Figure 8 As shown, the second foreground image and the second background image are of the same color family, thereby enhancing the visual effect of dark mode and providing users with an immersive experience.

[0166] The above embodiments illustrate various cases where the color in the second foreground image is matched to a preset background image in the first drawing method. The following will combine... Figures 10-12This paper describes several cases of using preset colors to match preset background images in the second drawing method of the embodiments of this application.

[0167] For example, the second drawing method may include the following process:

[0168] The electronic device can recognize multiple colors in the second foreground image; if the target color cannot be recognized, the electronic device matches the second background image from multiple preset background images according to the preset color; the color of the solid color mask in the second background image is the same as the preset color; the electronic device combines the second foreground image and the second background image to form a second icon.

[0169] Preset background images can be used as a reference. Figure 4A The relevant description states that preset colors can be used to represent the color resulting from mixing multiple colors. Preset colors can be dark, such as gray, which can represent the color resulting from mixing blue, green, yellow, orange, and red. Situations where the target color cannot be recognized include situations where the electronic device cannot determine the dominant color scheme of the second foreground image, or where a colored preset background affects the visual purity of the second foreground image.

[0170] In this way, when the second foreground image has rich colors, the electronic device cannot determine the main color scheme of the second foreground image; the electronic device can use, for example, a gray preset background image to create the effect of multiple colors of light mixed and projected onto a dark plane, thereby enhancing the three-dimensionality of the second foreground image and thus enhancing the immersive experience of the user when using dark mode; in addition, when using a colored preset background image, the difference between the colored preset background image and multiple different color areas in the second foreground image can be reduced, thereby enhancing the user's visual experience.

[0171] The following is combined with Figures 10 to 12 The rules for the second drawing method are explained in detail.

[0172] Figure 10 This illustration shows a flowchart of a process for matching a preset background with a preset color, as provided in an embodiment of this application. Figure 10 As shown:

[0173] The electronic device obtains a second background image by matching a preset color among multiple preset background images. This may include: the electronic device obtaining the aspect ratio of any color among the multiple colors in the second foreground image; and when the aspect ratios of the multiple colors are the same or close, the electronic device obtains a second background image by matching a preset color among the multiple preset background images.

[0174] When the second foreground image includes multiple colors, the electronic device can calculate the aspect ratio of each color in the second foreground image and compare the aspect ratios of the multiple colors. For example, the aspect ratios of the multiple colors may be the same or close: the second foreground image includes two or more colors, and the aspect ratios of the multiple colors are the same; or, the second foreground image includes two or more colors, and among the multiple colors, the difference between the highest aspect ratio and the second highest aspect ratio is less than a third preset value. The third preset value can be a specific aspect ratio or a percentage of the aspect ratio; this application embodiment does not limit this. Furthermore, the third preset value may be different from the first preset value and the second preset value, or it may be the same as the first preset value and the second preset value; this application embodiment does not limit the magnitude relationship between the first preset value, the second preset value, and the third preset value.

[0175] It should be noted that, in the embodiments of this application, multiple colors may not include white; for example, when the color of the highest or second highest aspect ratio is white, the electronic device may use... Figure 8 The embodiment shown uses a non-white target color to match a preset background image, instead of using a preset color to match a preset background image.

[0176] Taking the first application as an example, which includes the gallery application, the theme application, and the phone cloning application, see [link / reference]. Figure 10 The colored icons for the Gallery app, Themes app, and Phone Clone app in Dark Mode can be referenced. Figure 12 Figure a in the text:

[0177] After switching to dark mode, the electronic device can obtain secondary foreground images from multiple applications in dark mode. For example, secondary foreground images from the gallery app, the theme app, and the phone cloning app. The electronic device samples colors from these secondary foreground images; the secondary foreground images from the gallery app include red, orange, yellow, blue, green, and purple; the secondary foreground images from the theme app include red, orange, yellow, blue, and purple; and the secondary foreground images from the phone cloning app include yellow and blue, etc.

[0178] Electronic devices recognize the aspect ratios of multiple colors. In the second foreground image of a gallery app, the aspect ratios of colors such as red, orange, yellow, blue, green, and purple are roughly equal, and a preset color, such as gray, can be selected to match a preset background image. In the second foreground image of a theme app, the aspect ratios of colors such as red, orange, yellow, blue, and purple are roughly equal, and a preset color, such as gray, can be selected to match a preset background image. In the second foreground image of a phone cloning app, the aspect ratios of yellow and blue are roughly equal, and a preset color, such as gray, can be selected to match a preset background image.

[0179] The electronic device matches a preset background image among multiple preset background images based on a preset color. For example, in the second foreground image of the above application, a gray preset background image is set as the second background image.

[0180] Electronic devices can composite a second foreground image with a second background image to obtain a second icon in dark mode, such as... Figure 10 As shown. The second foreground image has a richer color palette. Electronic devices can use preset colors as the color scheme for mixing colors in the second foreground image, thereby creating a visual effect of mixing multiple colors and providing users with an immersive experience.

[0181] It should be noted that the gray color is set as the preset color in this embodiment because: the second foreground image may include multiple colors. For example, the second foreground image of a gallery application and a theme application may include complex color mixing; another example is that the second foreground image of a phone cloning application may include yellow and blue with roughly the same aspect ratio, and the two colors are far apart on the color wheel (significant color difference). If any one of the multiple colors is used as the preset color and matched with the preset background image, the contrast between the other colors and the preset background image will be large, while the contrast between the preset color and the preset background image will be small, which may interfere with the user's perception of the overall purity of the image. Therefore, in this embodiment, the electronic device can use gray as a neutral preset color, so that multiple colors in the second foreground image can be highlighted, providing the user with a unified, pure, simple, and elegant visual experience.

[0182] Figure 11 This illustration shows another flowchart of matching a preset background with a preset color, as provided in an embodiment of this application. Figure 11 As shown:

[0183] The electronic device obtains a second background image by matching a preset color among multiple preset background images, and further includes: when the second foreground image includes multiple semi-transparent layers, and the multiple semi-transparent layers have a perspective relationship, matching a second background image based on a preset color among the multiple preset background images.

[0184] The second foreground image may include one or more layers; each layer may correspond to a color. For example, the second foreground image of a phone app icon includes one layer containing a green phone-shaped pattern. Another example is the second foreground image of a phone clone app icon, which includes three layers, such as a layer containing a yellow rectangle pattern, a layer containing a blue rectangle pattern, and a layer containing a white arrow pattern; multiple layers may overlap, such as the blue rectangle layer being above the yellow rectangle layer, and the white arrow layer being above both rectangle layers.

[0185] Multiple semi-transparent layers can be multiple colored layers with transparency. Multiple semi-transparent layers with perspective relationships can be understood as multiple semi-transparent layers overlapping, and different colors overlapping each other.

[0186] It is understandable that when multiple semi-transparent layers are superimposed, different colors may mix. When using the color with the highest aspect ratio to match the preset background image, there will be a discrepancy between the color of the preset background image and the mixed color, which may affect the purity of the image. Therefore, when multiple semi-transparent layers are superimposed, a preset color (such as gray) can be used to match the preset background image to reduce the influence of the colored preset background image on the second foreground image.

[0187] For example, see music applications. Figure 11 For example, the colored icons for music apps in dark mode can be referenced. Figure 12 Figure b in the text:

[0188] After switching to dark mode, the electronic device can obtain a second foreground image for multiple applications in dark mode. For example, a second foreground image for a music application. The electronic device samples the colors of multiple second foreground images; the second foreground image for the music application includes blue and pink; wherein, the blue layer may have transparency, and the overlapping area of ​​the blue and pink layers may present a perspective effect; for example, the overlapping area of ​​the blue and pink layers appears purple.

[0189] In this situation, the electronic device can identify blue as the color with the highest aspect ratio. If a blue preset background image is used as the target color to match a blue preset background image, the blue preset background image can match the blue layer in the second foreground image relatively well; however, when the second background image is a blue preset background image, the second icon can present a blue hue overall, which will weaken the contrast between pink and purple and blue in the second foreground image, reducing the perspective effect of the pink and blue layers; that is, under the blue preset background image, the second icon cannot present the purple perspective effect well. In addition, the blue layer has transparency, and after being composited with the blue preset background image, it may blur the outer edge of the blue layer, thereby affecting the purity of the second foreground image. Based on this, in the embodiments of this application, when the semi-transparent layers in the multiple layers of the second foreground image have a perspective relationship, the electronic device can use, for example, a gray preset background image to reduce the impact of the colored preset background image on the purity and perspective effect of the second foreground image.

[0190] Electronic devices can composite a second foreground image with a second background image to obtain a second icon in dark mode, such as... Figure 11As shown. In this way, when the second foreground image includes multiple semi-transparent layers with perspective relationships, the electronic device can use a gray preset background image as the second background image. This allows the edges of the semi-transparent layers to be more clearly shown through the contrast between gray and color, as well as the perspective effect between multiple color layers, thereby enhancing the purity of the application icon in dark mode.

[0191] The above embodiments, in conjunction with system application icons, illustrate a simple, lightweight application icon drawing method provided by the electronic device in this application embodiment, which simultaneously considers icon recognizability and aesthetics; the application icons for the dark mode of the system application in this application embodiment can be referred to... Figures 5 to 12 The relevant descriptions in the illustrated embodiments are provided. In the embodiments of this application, the first application can be a system application or a third-party application. For third-party applications, the electronic device can also obtain application icons in dark mode in a similar manner.

[0192] Figure 13 This application illustrates a method for drawing application icons in dark mode for third-party applications, as provided in an embodiment of this application. Figure 13 As shown:

[0193] Electronic devices can be referenced Figure 5 The illustrated embodiment yields a second foreground image. In some embodiments, the electronic device may invert the colors of the second foreground image, using the color of the first background image as the color of the second foreground image; in other embodiments, the electronic device may use the first foreground image as the second foreground image.

[0194] Taking the first application as an example, which includes social applications, payment applications, music applications, and ticketing applications, see [link / reference]. Figure 13 :

[0195] If the first foreground image includes a color, and the color of the first foreground image is not white, then the color of the second foreground image is the same as the color of the first background image. For example, in light mode, the first foreground image of a social application is white, and the color of the first background image is green; in dark mode, the second foreground image of the social application is green, the same color as the first background image. As another example, in light mode, the first foreground image of a payment application is white, and the color of the first background image is blue; in dark mode, the second foreground image of the payment application is blue, the same color as the first background image.

[0196] When the first foreground image includes multiple colors, the color of the second foreground image can be the same as the color of the first foreground image. For example, in light mode, the first foreground image of a music application is yellow and green, and the first background image is white; in dark mode, the second foreground image of the music application is yellow and green, the same as the first foreground image. As another example, in light mode, the first foreground image of a ticketing application has multiple colors, and the first background image is white; in dark mode, the second foreground image of the ticketing application has multiple colors, the same as the first foreground image.

[0197] Electronic devices can be referenced Figures 6A-12 The illustrated embodiment yields a second background image. In some embodiments, the electronic device may use a target color from the second foreground image to match the second background image; in other embodiments, the electronic device may use a preset color to match the second background image.

[0198] For example, taking the first application as a social application, payment application, music application, and ticketing application as examples, see below. Figure 13 :

[0199] In the first rendering method, the second foreground image of a social application is green, the target color can be green, and the second background image matched based on the target color is a preset background image of green. The second foreground image of a payment application is blue, the target color can be blue, and the second background image matched based on the target color is a preset background image of blue. The second foreground image of a music application includes green and yellow, with yellow having a higher aspect ratio than green, and the difference between the two being greater than a first preset value; the target color can be yellow, and the second background image matched based on the target color is a preset background image of yellow.

[0200] In the second rendering method, the second foreground image of the ticketing application includes nine colors, and the aspect ratio of each color is roughly the same; the preset color can be gray, and the second background image matched based on the preset color is a gray preset background image.

[0201] Thus, the method for drawing application icons provided in this application embodiment is universal and can meet the needs of most third-party applications, thereby improving the recognizability and aesthetics of third-party application icons in dark mode.

[0202] It should be noted that, in the embodiments of this application, the first foreground image and the second foreground image used by the system can both be preset images. The first foreground image of the third-party application can be a preset image, the second foreground image of the third-party application can be a preset image, or the second foreground image of the third-party application can be a foreground image obtained from a scalable vector graphics file based on the first foreground image.

[0203] It is understandable that the system application is an application pre-installed on the electronic device. The electronic device may store the application icon in light mode and the application icon in dark mode. The first foreground image and the second foreground image are both preset images.

[0204] In some embodiments, the second foreground image used by the system may correspond to a second background image, and the correspondence between the second foreground image and the second background image may satisfy... Figures 6A to 12 The relevant description in the illustrated embodiment. After switching to dark mode, the electronic device can obtain the corresponding second background image based on the correspondence between the two; the electronic device combines the second foreground image and the second background image to obtain the second icon.

[0205] In other embodiments, after switching to dark mode, the electronic device can obtain a second foreground image; the electronic device can be based on Figures 6A to 12 The relevant description in the illustrated embodiment states that a preset background image is used as the second background image; the electronic device synthesizes the second foreground image and the second background image to obtain the second icon.

[0206] Third-party applications are applications downloaded and installed by users. When installing a third-party application, the electronic device may receive an application icon in light mode; the electronic device may also receive an application icon in dark mode or an editable file of the application icon. That is, the second foreground image of a third-party application can be a preset image, or a foreground image obtained based on a Scalable Vector Graphics (SVG) file of the first foreground image.

[0207] When the second foreground icon in a third-party application is a preset image, the electronic device can match a preset background image based on that preset image. When SVG files are included, the electronic device can... Figure 5 The illustrated embodiment edits the foreground image to obtain a second foreground image; the electronic device can use the second foreground image to match a preset background image.

[0208] The above embodiments illustrate the second foreground image and the second background image in dark mode according to the embodiments of this application. To further improve the aesthetics of application icons in dark mode, the embodiments of this application may further process the application icons. Figure 14A This application illustrates various methods for drawing application icons in dark mode, as provided in its embodiments. Figure 14B for Figure 14A Color illustrations of application icons in Chinese:

[0209] In some embodiments, the second foreground images of multiple application icons are of the same color family, but there are color differences between the multiple second foreground images. In embodiments of this application, in dark mode, the electronic device can use the same gradient color scheme to draw multiple second foreground images. For example, Figure 14A Figure a in the middle or Figure 14B In Figure a, the primary color of the second foreground images in the camera, game, and remote control applications is gray, but the shades of gray differ among the multiple second foreground images. After adjustment, the primary color of the second foreground images in the camera, game, and remote control applications is gray, and multiple second foreground images use the same gradient scheme, allowing them to display the same shade of gray.

[0210] In this way, on a dark mode desktop, multiple application icons of different functions in the same color scheme can display the same gradient effect, making multiple application icons visually unified and enhancing the sense of series for icons of the same type; for example, multiple application icons displaying the same gray gradient effect can present a unified metallic texture.

[0211] In other embodiments, in light mode, the colored first foreground image contrasts sharply with the white background image; however, when the colored first foreground image is used as the second foreground image and combined with the dark background image, the color purity of the colored second foreground image is low against the dark background image, giving users a subjective visual impression of a dirty icon. In this embodiment, the electronic device can perform purification processing on the second foreground image to improve the purity of each color in the second foreground image.

[0212] In one possible implementation, the electronic device can refine the second foreground image by increasing the brightness and saturation of the second foreground image based on the second foreground image having a brightness of 100% and a saturation of 100%; wherein the increased brightness is less than the increased saturation.

[0213] For example, Figure 14A Figure b in the middle or Figure 14B In Figure b, the colors of several second foreground images in the Notes, Calculator, and Weather apps are low in color saturation, making the second icons appear blurry and cluttered. After adjustments, the saturation of the second foreground images in the Notes, Calculator, and Weather apps is improved, resulting in clearer and more vibrant second icons for the user, thus enhancing the visual experience.

[0214] In some embodiments, in light mode, the color first foreground image contrasts sharply with the white background image; however, when the color first foreground image is used as the second foreground image and combined with the dark background image, the color second foreground image appears darker against the dark background image. In embodiments of this application, the electronic device can brighten the second foreground image to increase its brightness.

[0215] In one possible implementation, the electronic device can brighten the second foreground image in the following way: based on the second foreground image having a brightness of 100% and a saturation of 100%, the electronic device increases the brightness and saturation of the second foreground image; wherein the increased brightness is greater than the increased saturation.

[0216] For example, Figure 14A Figure C in the middle or Figure 14B In image c, several secondary foreground images in the Gallery, Themes, and Messages apps are darker. After adjustments, the brightness of the secondary foreground images in these apps is improved, resulting in brighter secondary icons that are more visually appealing, enhancing icon recognizability and overall user experience.

[0217] In some embodiments, in light mode, the first foreground image contrasts sharply with the white background image, and the first icon may include many detailed elements, such as small white patterns, shadow effects, and blur effects. In dark mode, some detailed elements (such as shadow effects and blur effects) cannot be well represented in a dark background image; in this embodiment, the electronic device can remove these detailed elements in dark mode to improve the simplicity of the icon. Alternatively, in dark mode, some detailed elements (such as small white patterns) may be filled with dark colors, making the overall effect of the second icon darker; in this embodiment, the electronic device can retain these detailed elements in the second icon to maintain consistency with the light icon as much as possible.

[0218] For example, in Figure 14A d-graph or Figure 14B In the diagram d, within a browser application, the first foreground image in light mode (not shown) may include a white circular pattern; in the second icon, the white circular pattern is filled with gray, giving the user a visually darker impression. The adjusted second icon retains the white circular pattern from the light icon to maintain the brightness of the foreground image.

[0219] For example, in Figure 14A d-graph or Figure 14BIn the image d in the file management application, the first foreground image in light mode can include shadow and blur effects; in the second icon, the dark background image cannot reflect these elements. The adjusted second icon removes the shadow and blur effects to improve the simplicity of the application icon and ensure a clean composition.

[0220] It should be noted that this application embodiment only uses desktop applications as an example to illustrate the method of drawing application icons. In other interfaces of this application embodiment, the electronic device can also use the above process to process application icons in dark mode. For example, a multitasking interface may include a second icon of recently used applications; for another example, a message notification bar and message notification card may include a second icon to indicate the application source of the message; for yet another example, a folder on the desktop includes thumbnails of multiple second icons, and the electronic device can display multiple second icons after opening the folder; for yet another example, the electronic device can display the second icons of multiple applications after bringing up the side toolbar. This application embodiment does not list all the scenarios for displaying second icons, and this application embodiment does not limit the scenarios for displaying second icons.

[0221] To better understand the embodiments of this application, the structure of the electronic device of this application is described below:

[0222] Figure 15 A schematic diagram of the structure of electronic device 100 is shown. Electronic device 100 may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, antenna 1, antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, a headphone jack 170D, a sensor module 180, buttons 190, a motor 191, an indicator 192, a camera 193, a display screen 194, a subscriber identification module (SIM) card interface 195, and an embedded secure element (eSE) 196, etc. The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, a barometric pressure sensor 180C, a magnetic sensor 180D, an accelerometer sensor 180E, a distance sensor 180F, a proximity sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, etc.

[0223] It is understood that the structures illustrated in the embodiments of this application do not constitute a specific limitation on the electronic device 100. In other embodiments of this application, the electronic device 100 may include more or fewer components than illustrated, or combine some components, or split some components, or have different component arrangements. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

[0224] Processor 110 may include one or more processing units, such as application processors (APs), modem processors, graphics processing units (GPUs), image signal processors (ISPs), controllers, video codecs, digital signal processors (DSPs), baseband processors, and / or neural network processing units (NPUs). These different processing units may be independent devices or integrated into one or more processors.

[0225] In this embodiment of the application, the processor 110 can be used to execute information processing-related processes in the method of drawing application icons; for example, sampling the color of the foreground image; identifying the aspect ratio of each color; matching a preset background image with a target color or a preset color; and compositing the second background image and the second foreground image.

[0226] The processor 110 may also include a memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. This memory can store instructions or data that the processor 110 has just used or that are used repeatedly. If the processor 110 needs to use the instruction or data again, it can retrieve it from the memory. This avoids repeated accesses, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.

[0227] Electronic device 100 implements display functions through GPU, display screen 194, and application processor.

[0228] A GPU is a microprocessor for image processing, connected to the display screen 194 and the application processor. The GPU performs mathematical and geometric calculations for graphics rendering. The processor 110 may include one or more GPUs, which execute program instructions to generate or modify display information.

[0229] The display screen 194 is used to display images, videos, etc. The display screen 194 includes a display panel. In this embodiment, the display screen 194 can be used to display a user interface, such as... Figure 2 The interface shown; in dark mode, the user interface can display, for example... Figures 4A-14B The second icon in the list.

[0230] Internal memory 121 can be used to store executable program code, including instructions. Internal memory 121 may include a program storage area and a data storage area. The program storage area may store the operating system, at least one application program required for a function (such as sound playback, image playback, etc.), etc. The data storage area may store data created during the use of electronic device 100 (such as audio data, phonebook, etc.). Furthermore, internal memory 121 may include high-speed random access memory, and may also include non-volatile memory, such as at least one disk storage device, flash memory device, universal flash storage (UFS), etc. Processor 110 executes various functional applications and data processing of electronic device 100 by running instructions stored in internal memory 121 and / or instructions stored in memory located within the processor.

[0231] In this embodiment of the application, the internal memory 121 can be used to store, for example, a first foreground image, a first background image, a second foreground image and / or a second background image of a system application; the internal memory 121 can also be used to store, for example, SVG files of a first foreground image, a first background image, a second foreground image and / or a second foreground image of a third-party application.

[0232] Touch sensor 180K, also known as a "touch device," can be located on display screen 194. The touch sensor 180K and display screen 194 together form a touchscreen, also known as a "touchscreen." Touch sensor 180K detects touch operations applied to or near it. The touch sensor can transmit the detected touch operation to the application processor to determine the type of touch event. Visual output related to the touch operation can be provided through display screen 194. In other embodiments, touch sensor 180K may also be located on the surface of electronic device 100, in a different position than display screen 194.

[0233] In this embodiment, the touch sensor 180K can receive user trigger operations and report the trigger data corresponding to the trigger operation. For example, the touch sensor 180K can receive trigger operations for switching display modes, causing the electronic device to switch display modes, such as... Figure 2 As shown.

[0234] It should be noted that an electronic device may include all or some of the devices mentioned above; an electronic device may include fewer or more devices, and this application embodiment does not limit this.

[0235] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, data stored, data displayed, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties. Furthermore, the collection, use and processing of the relevant data must comply with the relevant laws, regulations and standards of the relevant countries and regions, and corresponding operation portals are provided for users to choose to authorize or refuse.

[0236] The method for drawing application icons according to embodiments of this application has been described above. The apparatus for executing the above method provided in embodiments of this application will now be described. Those skilled in the art will understand that the methods and apparatus can be combined with and referenced in each other, and the related apparatus provided in embodiments of this application can execute the steps in the above-described method for drawing application icons.

[0237] like Figure 16 As shown, the application icon drawing device 1600 can be used in communication devices, circuits, hardware components, or chips. The application icon drawing device includes a display unit 1601 and a processing unit 1602. The display unit 1601 supports the display steps performed by the application icon drawing device 1600; the processing unit 1602 supports the information processing steps performed by the application icon drawing device 1600.

[0238] In a possible implementation, the application icon drawing device 1600 may also include a communication unit 1603. Specifically, the communication unit supports the application icon drawing device 1600 in performing data transmission and data reception steps. The communication unit 1603 may be an input or output interface, pins, or circuitry, etc.

[0239] In a possible embodiment, the application icon drawing device may further include a storage unit 1604. The processing unit 1602 and the storage unit 1604 are connected via a line. The storage unit 1604 may include one or more memories, which may be devices in one or more devices or circuits used for storing programs or data. The storage unit 1604 may exist independently and be connected to the processing unit 1602 of the application icon drawing device via a communication line. Alternatively, the storage unit 1604 may be integrated with the processing unit 1602.

[0240] Storage unit 1604 may store computer-executable instructions for the methods in the terminal device, so that processing unit 1602 executes the methods in the above embodiments. Storage unit 1604 may be a register, cache, or RAM, etc., and storage unit 1604 may be integrated with processing unit 1602. Storage unit 1604 may be a read-only memory (ROM) or other types of static storage devices capable of storing static information and instructions, and storage unit 1604 may be independent of processing unit 1602.

[0241] This application provides an electronic device, which includes a processor and a memory; the memory stores computer execution instructions; the processor executes the computer execution instructions stored in the memory, causing the electronic device to perform the above-described method.

[0242] This application provides a chip. The chip includes a processor, which is used to call a computer program in memory to execute the technical solutions in the above embodiments. Its implementation principle and technical effects are similar to those in the related embodiments described above, and will not be repeated here.

[0243] This application also provides a computer-readable storage medium. The computer-readable storage medium stores a computer program. When the computer program is executed by a processor, it implements the methods described above. The methods described in the above embodiments can be implemented wholly or partially by software, hardware, firmware, or any combination thereof. If implemented in software, the functionality can be stored as one or more instructions or code on or transmitted over the computer-readable medium. The computer-readable medium can include computer storage media and communication media, and can also include any medium that can transfer a computer program from one place to another. The storage medium can be any target medium accessible by a computer.

[0244] In one possible implementation, a computer-readable medium may include random access memory (RAM), read-only memory (ROM), compact discread-only memory (CD-ROM) or other optical disc storage, magnetic disk storage or other magnetic storage devices, or any other medium targeted to carry or to store required program code in the form of instructions or data structures, and accessible by a computer. Furthermore, any connection is appropriately referred to as a computer-readable medium. For example, if software is transmitted from a website, server, or other remote source using coaxial cable, fiber optic cable, twisted pair, digital subscriber line (DSL), or wireless technologies such as infrared, radio, and microwave, then coaxial cable, fiber optic cable, twisted pair, DSL, or wireless technologies such as infrared, radio, and microwave are included in the definition of medium. As used herein, disks and optical discs include optical discs, laser discs, optical discs, digital versatile discs (DVDs), floppy disks, and Blu-ray discs, where disks typically reproduce data magnetically, while optical discs optically reproduce data using lasers. Combinations of the above should also be included within the scope of computer-readable media.

[0245] This application provides a computer program product, which includes a computer program that, when run, causes the computer to perform the above-described method.

[0246] It should be noted that the modules or components in the above embodiments can be one or more integrated circuits configured to implement the above methods, such as one or more application-specific integrated circuits (ASICs), one or more digital signal processors (DSPs), or one or more field-programmable gate arrays (FPGAs), etc. Furthermore, when a module is implemented through processing element scheduler code, the processing element can be a general-purpose processor, such as a central processing unit (CPU) or other processors capable of calling program code, such as a controller. Additionally, these modules can be integrated together to implement a system-on-a-chip (SOC).

[0247] In the above embodiments, implementation can be achieved, in whole or in part, through software, hardware, firmware, or any combination thereof. When implemented in software, it can be implemented, in whole or in part, as a computer program product. A computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, all or part of the flow or function according to the embodiments of this application is generated. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, computer instructions can be transmitted from one website, computer, server, or data center to another website, computer, server, or data center via wired (e.g., coaxial cable, fiber optic, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server or data center that integrates one or more available media. The available medium can be a magnetic medium (e.g., floppy disk, hard disk, magnetic tape), an optical medium (e.g., DVD), or a semiconductor medium (e.g., a solid-state disk (SSD)).

[0248] The term "multiple" in this document refers to two or more. The term "and / or" is merely a description of the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A alone, A and B simultaneously, or B alone. Furthermore, the character " / " in this document generally indicates an "or" relationship between the preceding and following related objects; in formulas, " / " indicates a "division" relationship. Additionally, it should be understood that in the description of this application, words such as "first" and "second" are used only for descriptive purposes and should not be construed as indicating or implying relative importance or order.

[0249] It is understood that the various numerical designations used in the embodiments of this application are merely for descriptive convenience and are not intended to limit the scope of the embodiments of this application.

[0250] It is understood that, in the embodiments of this application, the order of the above-mentioned process numbers does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of this application.

Claims

1. A method for drawing an application icon, characterized in that, Applied to electronic devices, the method includes: The desktop is displayed in a light-colored mode; the light-colored desktop includes a first icon of a first application; the first icon corresponds to the light-colored mode, and the first icon includes a first foreground image and a first background image, with the first foreground image located on top of the first background image; A trigger operation for switching display modes is received; the display modes include the light mode and the dark mode; The desktop in dark mode is displayed; the desktop in dark mode includes a second icon of the first application, the second icon corresponds to the dark mode, the second icon includes a second foreground image and a second background image, the second foreground image is located on top of the second background image; the content of the second foreground image is the same as the content of the first foreground image; the color of the second background image is different from the color of the first background image; wherein, the color of the second foreground image is either the color of the first foreground image or the color of the first background image; the second background image is obtained by matching from a plurality of preset background images; the preset background image includes a dark image and a solid color mask with transparency, the solid color mask is located on top of the dark image.

2. The method according to claim 1, characterized in that, Before displaying the dark mode desktop, the following is also included: Identify one or more colors in the second foreground image; The second background image is obtained by matching the color of the second foreground image with the color of the preset background images; the color of the solid color mask in the second background image is the same as the target color among the one or more colors; the target color is the color with the highest aspect ratio among the one or more colors, and the target color does not include white; The second foreground image and the second background image are combined to form the second icon.

3. The method according to claim 2, characterized in that, The step of matching the second background image from multiple preset background images based on the color of the second foreground image includes: When the number of colors in the second foreground image is one, and the color of the second foreground image is the target color, the second background image is obtained by matching the target color among multiple preset background images; the color of the solid color mask in the second background image is the same as the target color.

4. The method according to claim 2, characterized in that, The step of matching the second background image from multiple preset background images based on the color of the second foreground image further includes: When the second foreground image includes multiple colors, the aspect ratio of any one of the multiple colors in the second foreground image is obtained; wherein, the second foreground image includes the target color, the target color is the color with the highest aspect ratio in the second foreground image among the multiple colors, and the difference between the aspect ratio of the target color and the aspect ratio of other colors is greater than a first preset value. The second background image is obtained by matching the target color among multiple preset background images; the color of the solid color mask in the second background image is the same as the target color.

5. The method according to claim 2, characterized in that, The step of matching the second background image from multiple preset background images based on the color of the second foreground image further includes: When the second foreground image includes multiple colors, the aspect ratio of any one of the multiple colors in the second foreground image is obtained; the second foreground image includes the target color and a first color, the first color being white; the difference between the aspect ratio of the target color and the aspect ratio of the first color is less than a second preset value, and the aspect ratio of the target color and the aspect ratio of the first color are both greater than the aspect ratios of other colors. The second background image is obtained by matching the target color among multiple preset background images; the color of the solid color mask in the second background image is the same as the target color.

6. The method according to any one of claims 2-5, characterized in that, Before displaying the dark mode desktop, the following is also included: Identify multiple colors in the second foreground image; If the target color cannot be identified, the second background image is obtained by matching a preset color among multiple preset background images; the preset color is used to represent the color after mixing multiple colors, and the color of the solid color mask in the second background image is the same as the preset color; The second foreground image and the second background image are combined to form the second icon.

7. The method according to claim 6, characterized in that, The step of matching the second background image from multiple preset background images according to a preset color includes: Obtain the aspect ratio of any one of the multiple colors in the second foreground image; When the aspect ratios of the multiple colors are the same or similar, the second background image is obtained by matching the preset colors among the multiple preset background images.

8. The method according to claim 6, characterized in that, The step of matching the second background image among multiple preset background images according to a preset color further includes: When the second foreground image includes multiple semi-transparent layers and the multiple semi-transparent layers have a perspective relationship, the second background image is obtained by matching the preset colors among the multiple preset background images.

9. The method according to claim 1, characterized in that, When the first foreground image includes a color and the color of the first foreground image is white, the color of the second foreground image is the color of the first background image; Alternatively, if the first foreground image includes a color and the color of the first foreground image is not white, the color of the second foreground image is the color of the first foreground image; Alternatively, if the first foreground image includes multiple colors, the color of the second foreground image is the same as the color of the first foreground image.

10. The method according to claim 1, characterized in that, The first application includes a system application and / or a third-party application; the first foreground image and the second foreground image of the system application are both preset images; the first foreground image of the third-party application is a preset image, the second foreground image of the third-party application is a preset image, or the second foreground image of the third-party application is a foreground image obtained from a scalable vector graphics file based on the first foreground image.

11. An electronic device, characterized in that, The electronic device includes: one or more processors and memory; The memory is coupled to the one or more processors, the memory being used to store computer program code, the computer program code including computer instructions, the one or more processors invoking the computer instructions to cause the electronic device to perform the method as described in any one of claims 1-10.

12. A chip system, characterized in that, The chip system is applied to an electronic device, the chip system including one or more processors, the one or more processors being used to invoke computer instructions to cause the electronic device to perform the method as described in any one of claims 1-10.

13. A computer-readable storage medium, characterized in that, The computer-readable storage medium includes computer instructions that, when executed on an electronic device, cause the electronic device to perform the method as described in any one of claims 1-10.

14. A computer program product, characterized in that, The computer program product includes computer program code that, when run on an electronic device, causes the electronic device to perform the method as described in any one of claims 1-10.

Images