A method, device, computer device and storage medium for page style switching

Abstract

The present disclosure provides a page style switching method, apparatus, computer device, and storage medium. Among them, the page style switching method includes: responding to an operation of switching from a first background mode to a second background mode, obtaining first page style information corresponding to page elements in a target page in the first background mode, and then, based on the first page style information corresponding to the page elements in the first background mode, determining second page style information corresponding to the page elements in the second background mode, and reloading the page elements of the target page according to the second page style information corresponding to the page elements. By generating the page style information of the page elements after mode switching, it is possible to improve the adaptation efficiency while satisfying the adaptation effect of the page style of the page elements and the dark mode.

Description

Technical Field

[0001] The present disclosure relates to the technical field of terminal display, and in particular, to a method, apparatus, computer device, and storage medium for switching page styles. Background Technique

[0002] The dark mode can improve the visibility of people in bright light and improve the effect of using the device better in low-light environments. Therefore, mobile terminals of different operating systems have successively tried to launch the dark mode.

[0003] However, after using the dark mode on mobile terminals, each application (App) needs to be adapted to the dark mode. Many pages and modules in existing Apps are developed by HyperText Markup Language 5.0 (HTML5.0). Large Apps generally have hundreds or thousands of H5 pages or modules. Adapting each H5 page or module one by one requires a huge amount of manpower and material resources, and the difficulty of completion is extremely high. Therefore, how to improve the adaptation efficiency while meeting the adaptation effect is a technical problem that needs to be solved urgently at present. Summary of the Invention

[0004] Embodiments of the present disclosure at least provide a method, apparatus, computer device, and storage medium for switching page styles, which can improve the adaptation efficiency while meeting the adaptation effect of the page styles of page elements and the dark mode.

[0005] In a first aspect, an embodiment of the present disclosure provides a method for switching page styles, the method including:

[0006] Responding to an operation of switching from a first background mode to a second background mode, and obtaining first page style information corresponding to page elements in a target page in the first background mode;

[0007] Based on the first page style information corresponding to the page elements in the first background mode, determining second page style information corresponding to the page elements in the second background mode;

[0008] Reloading the page elements of the target page according to the second page style information corresponding to the page elements.

[0009] In an optional implementation manner, if the page element is a text element and the first page style information is color style information; the determining, based on the first page style information corresponding to the page element in the first background mode, of the second page style information corresponding to the page element in the second background mode includes:

[0010] Querying whether a first color of the text element in the first background mode exists in a preset color style mapping table;

[0011] If it exists, query, from the color style mapping table, the second color in the second background mode corresponding to the first color in the first background mode;

[0012] Determine the second color as the second page style information corresponding to the page element in the second background mode.

[0013] In an alternative embodiment, the page style switching method further includes:

[0014] If it does not exist, determine a third color in the color style mapping table that is similar to the first color in the first background mode;

[0015] Query, from the color style mapping table, the second color in the second background mode corresponding to the third color in the first background mode;

[0016] Determine the second color as the second page style information corresponding to the page element in the second background mode.

[0017] In an alternative embodiment, after obtaining the first page style information corresponding to the page element in the target page in the first background mode, the page style switching method further includes:

[0018] Monitor whether the first page style information corresponding to the page element changes;

[0019] If so, obtain the third page style information corresponding to the changed page element, and based on the third page style information corresponding to the page element in the first background mode, determine the fourth page style information corresponding to the page element in the second background mode;

[0020] Reload the page element of the target page according to the fourth page style information corresponding to the page element.

[0021] In an alternative embodiment, if the page element is a picture element and the first page style information is the first picture link information; the determining the second page style information corresponding to the page element in the second background mode based on the first page style information corresponding to the page element in the first background mode includes:

[0022] According to the first background mode and the first picture link information, determine the second picture link information corresponding to the picture element in the second background mode;

[0023] Determine the second picture link information as the second page style information corresponding to the page element in the second background mode.

[0024] In an alternative embodiment, if the page element is a text element, the first page style information corresponding to the page element in the target page in the first background mode is obtained by the following methods:

[0025] Embedded style tag method, external style tag method, inline style tag method.

[0026] In an alternative embodiment, the page style information includes at least one of the following information:

[0027] Text color display information, background color display information, border color display information, color display information in the floating state, color display information in the click state, picture link information.

[0028] In a second aspect, an embodiment of the present disclosure further provides a page style switching device, and the device includes:

[0029] An obtaining module, configured to respond to an operation of switching from the first background mode to the second background mode, and obtain the first page style information corresponding to the page element in the target page in the first background mode;

[0030] A determining module, configured to determine the second page style information corresponding to the page element in the second background mode based on the first page style information corresponding to the page element in the first background mode;

[0031] A loading module, configured to reload the page element of the target page according to the second page style information corresponding to the page element.

[0032] In an alternative embodiment, if the page element is a text element, the first page style information is color style information; the determining module is configured to determine the second page style information corresponding to the page element in the second background mode according to the following steps:

[0033] Query whether there is a first color of the text element in the first background mode in a preset color style mapping table;

[0034] If it exists, query, from the color style mapping table, a second color in the second background mode corresponding to the first color in the first background mode;

[0035] Determine the second color as the second page style information corresponding to the page element in the second background mode.

[0036] In an alternative embodiment, the determining module is further configured to:

[0037] If not, determine a third color in the color style mapping table that is similar to the first color in the first background mode;

[0038] From the color style mapping table, query the second color in the second background mode corresponding to the third color in the first background mode;

[0039] Determine the second color as the second page style information corresponding to the page element in the second background mode.

[0040] In an optional implementation manner, the page style switching device further includes a monitoring module; the monitoring module is used for:

[0041] Monitor whether the first page style information corresponding to the page element changes;

[0042] If so, obtain the third page style information corresponding to the changed page element, and determine the fourth page style information corresponding to the page element in the second background mode based on the third page style information corresponding to the page element in the first background mode;

[0043] Reload the page element of the target page according to the fourth page style information corresponding to the page element.

[0044] In an optional implementation manner, if the page element is a picture element and the first page style information is the first picture link information; the determination module includes:

[0045] The first determination unit is used to determine the second picture link information corresponding to the picture element in the second background mode according to the first background mode and the first picture link information;

[0046] The second determination unit is used to determine the second picture link information as the second page style information corresponding to the page element in the second background mode.

[0047] In an optional implementation manner, the obtaining module is used to, if the page element is a text element, obtain the first page style information corresponding to the page element in the target page in the first background mode by the following methods:

[0048] Embedded style tag method, external style tag method, inline style tag method.

[0049] In an optional implementation manner, the page style information includes at least one of the following information:

[0050] Text color display information, background color display information, border color display information, color display information in the floating state, color display information in the click state, and picture link information.

[0051] In a third aspect, an embodiment of the present disclosure further provides a computer device, including: a processor, a memory, and a bus. The memory stores machine-readable instructions executable by the processor. When the computer device runs, the processor communicates with the memory through the bus. When the machine-readable instructions are executed by the processor, the steps in the above first aspect or any possible implementation manner in the first aspect are executed.

[0052] In a fourth aspect, an embodiment of the present disclosure further provides a computer-readable storage medium. A computer program is stored on the computer-readable storage medium. When the computer program is run by a processor, the steps in the above first aspect or any possible implementation manner in the first aspect are executed.

[0053] The page style switching method, device, computer device, and storage medium provided by the embodiments of the present disclosure generate page style information of page elements after mode switching. Compared with the need to spend a huge amount of manpower and material resources and the extremely high difficulty in adapting each H5 page or module in the prior art one by one, the present disclosure can improve the adaptation efficiency while meeting the adaptation effect of the page style of page elements and the dark mode.

[0054] Furthermore, for the page style switching method provided by the embodiments of the present disclosure, if the page element is a text element and the first page style information is color style information, the first color of the text element in the first background mode is determined by querying a preset color style mapping table, and then the second color corresponding to the first color in the second background mode is determined. Furthermore, the second color is determined as the second page style information corresponding to the page element in the second background mode. In this way, the page style information of the page element after the switching mode can be quickly generated, and the adaptation effect of the page style of the page element and the dark mode can be achieved.

[0055] To make the above objects, features, and advantages of the present disclosure more obvious and understandable, the following specific preferred embodiments are given in conjunction with the accompanying drawings and described in detail as follows. Description of the Drawings

[0056] To more clearly illustrate the technical solutions of the embodiments of the present disclosure, the following will briefly introduce the accompanying drawings required for use in the embodiments. The accompanying drawings here are incorporated into the specification and constitute a part of this specification. These accompanying drawings show the embodiments that conform to the present disclosure and are used together with the specification to illustrate the technical solutions of the present disclosure. It should be understood that the following accompanying drawings only show some embodiments of the present disclosure, and thus should not be regarded as a limitation of the scope. For those of ordinary skill in the art, without creative efforts, other related accompanying drawings can also be obtained based on these accompanying drawings.

[0057] Figure 1 It shows a flowchart of a page style switching method provided by an embodiment of the present disclosure;

[0058] Figure 2 It shows one of the schematic diagrams of a page style switching device provided by an embodiment of the present disclosure;

[0059] Figure 3 It shows another schematic diagram of a page style switching device provided by an embodiment of the present disclosure;

[0060] Figure 4 It shows a specific schematic diagram of the determination module in the page style switching device provided by an embodiment of the present disclosure;

[0061] Figure 5 It shows a schematic diagram of a computer device provided by an embodiment of the present disclosure.

[0062] Illustration: 200 - page style switching device; 210 - acquisition module; 220 - determination module; 221 - first determination unit; 222 - second determination unit; 230 - loading module; 240 - monitoring module; 500 - computer device; 501 - processor; 502 - memory; 5021 - internal memory; 5022 - external memory; 503 - bus. Detailed implementation manners

[0063] To make the objectives, technical solutions, and advantages of the embodiments of the present disclosure clearer, the following will clearly and completely describe the technical solutions in the embodiments of the present disclosure with reference to the accompanying drawings in the embodiments of the present disclosure. Obviously, the described embodiments are only some of the embodiments of the present disclosure, rather than all of them. The components of the embodiments of the present disclosure described and illustrated in the accompanying drawings here can be arranged and designed in various different configurations. Therefore, the following detailed description of the embodiments of the present disclosure provided in the accompanying drawings is not intended to limit the scope of the present disclosure to be protected, but only represents the selected embodiments of the present disclosure. Based on the embodiments of the present disclosure, all other embodiments obtained by those of ordinary skill in the art without creative efforts belong to the scope of protection of the present disclosure.

[0064] Research has found that dark mode can improve vision and visibility in strong light, as well as better use of devices in low-light environments. As a result, mobile terminals with different operating systems are currently trying to launch dark modes.

[0065] However, after using the dark mode on mobile terminals, each app needs to be adapted to the dark mode. Many pages and modules in existing apps are developed using Hypertext 5.0. Large apps generally have hundreds or thousands of H5 pages or modules. The adaptation of each H5 page or module one by one requires huge manpower and material resources, and is extremely difficult to complete. Therefore, how to improve the adaptation efficiency while satisfying the adaptation effect is a technical problem that needs to be solved urgently.

[0066] Based on the above research, the present disclosure provides a page style switching method, device, computer equipment and storage medium. In response to the operation of switching from the first background mode to the second background mode, the first page style information corresponding to the page element in the target page in the first background mode is obtained, and then, based on the first page style information corresponding to the page element in the first background mode, the second page style information corresponding to the page element in the second background mode is determined, and the page element of the target page is reloaded according to the second page style information corresponding to the page element. By generating the page style information of the page element after the mode is switched, the adaptation efficiency can be improved while satisfying the adaptation effect of the page style of the page element and the dark mode.

[0067] The solutions described in this disclosure are the results obtained by the inventors after practice and careful research. Therefore, the discovery process of the above problems and the solutions proposed by this disclosure for the above problems below should all be the contributions made by the inventors to this disclosure.

[0068] It should be noted that similar reference numerals and letters denote similar items in the following drawings, and therefore, once an item is defined in one drawing, further definition and explanation thereof is not required in subsequent drawings.

[0069] For the convenience of understanding this embodiment, the page style switching method disclosed in this disclosure embodiment will be introduced in detail first. The execution subject of the page style switching method provided by this disclosure embodiment is generally a computer device with certain computing capabilities. Such a computer device includes, for example: a terminal device, a server, or other processing devices. The terminal device can be a user equipment (UE), a mobile device, a user terminal, a terminal, a cellular phone, a wireless phone, a personal digital assistant (PDA), a handheld device, a computing device, a vehicle-mounted device, a wearable device, etc. In some possible implementation manners, the page style switching method can be implemented by a processor calling computer-readable instructions stored in a memory.

[0070] Next, the page style switching method provided by this disclosure embodiment will be described by taking the execution subject as a terminal device as an example.

[0071] Embodiment 1

[0072] See Figure 1 As shown, it is a flowchart of a page style switching method provided by this disclosure embodiment. The method includes steps S101 to S103, where:

[0073] S101: Respond to the operation of switching from the first background mode to the second background mode, and obtain the first page style information corresponding to the page elements in the target page in the first background mode.

[0074] In this step, after receiving the operation instruction to switch from the first background mode to the second background mode, first obtain the first page style information corresponding to each page element in the target page in the first background mode. Here, the target page is the current page that the terminal device is displaying when receiving the mode switching instruction. There are multiple page elements displayed on the target page, and the page elements can be text elements or picture elements.

[0075] Among them, each page element is displayed in the same or different page styles. The page style information includes at least one of the following information: text color display information, background color display information, border color display information, color display information in the floating state, color display information in the click state, and picture link information.

[0076] Here, it is required that the first background mode and the second background mode are different background modes. The background modes include a dark mode and a normal mode. That is, when the first background mode is the dark mode, the second background mode is the normal mode, or when the first background mode is the normal mode, the second background mode is the dark mode. Among them, the normal mode can be one of a light mode and a daytime mode.

[0077] S102: Determine the second page style information corresponding to the page element in the second background mode based on the first page style information corresponding to the page element in the first background mode.

[0078] In this step, after obtaining the first page style information corresponding to any page element in the target page in the first background mode, the second page style information corresponding to the page element in the second background mode can be determined according to the first page style information of the page element in the first background mode.

[0079] Furthermore, the page element can be a text element or an image element. The methods for obtaining the first page style information of the page element are different for text elements and image elements. First, the case where the page element is a text element will be described below:

[0080] Obtain the first page style information corresponding to the page element in the target page in the first background mode through the following methods: embedded style tag method, external style tag method, inline style tag method.

[0081] In specific implementation, there are various declaration methods for page styles. Page style declarations include but are not limited to the embedded style tag method (style tag), external style tag method (link tag), and inline style tag method (HTML style). Therefore, for text elements, the style declaration corresponding to the text element can be used to obtain the first page style information corresponding to the page element in the target page in the first background mode.

[0082] In addition, the case where the page element is an image element will be described. The image link of the image element can be obtained, and the image link information corresponding to the image element can be determined as the first page style information of the image element in the first background mode.

[0083] Furthermore, the process of determining the second page style information corresponding to the page element in the second background mode according to the first page style information corresponding to the page element in the first background mode will be described below. Here, for different types of page elements, the methods for determining the second page style information corresponding to the page element in the second background mode are different. First, the case where the page element is a text element will be described below:

[0084] If the page element is a text element and the first page style information is color style information; in step S102, determining the second page style information corresponding to the page element in the second background mode based on the first page style information corresponding to the page element in the first background mode includes the following steps:

[0085] Step a1: Query whether there is a first color of the text element in the first background mode in a preset color style mapping table.

[0086] In a specific implementation, if the page element for which the page style is to be changed is a text element, and the first page style information of the page element is color style information, it is possible to first query whether there is a first color of the page element in the first background mode in a preset color style mapping table, that is, to determine whether there is a first color associated with the first background mode in the color style mapping table.

[0087] Here, the color style mapping table stores the colors corresponding to the first background mode and the colors corresponding to the second background mode, and one color corresponding to the first background mode is stored in association with one color corresponding to the second background mode.

[0088] Step a2: If it exists, query, from the color style mapping table, a second color in the second background mode corresponding to the first color in the first background mode.

[0089] In a specific implementation, if there is a first color in the first background mode in the color style mapping table, further search in the color style mapping table for a second color in the second background mode corresponding to the first color in the first background mode, that is, find the second color of the page element after switching the background mode, that is, determine the second color corresponding to the page element in the second background mode.

[0090] Step a3: Determine the second color as the second page style information corresponding to the page element in the second background mode.

[0091] In a specific implementation, after determining the second colors of the page elements in the target page in the second background mode, display the page elements according to the second colors corresponding to each page element. In this way, it is possible to achieve the adaptation of the page styles of the page elements in the target page to the dark mode when the background mode is switched.

[0092] Furthermore, if the first color in the first background mode is not found in the color style mapping table, a third color in the color style mapping table that is similar to the first color can be selected, and the third color can be used as the color of the page element in the first background mode. Specifically, after step a1 of querying whether there is a first color of the text element in the first background mode in a preset color style mapping table, the following steps are further included:

[0093] If not, determine a third color in the color style mapping table that is similar to the first color in the first background mode; query, from the color style mapping table, the second color in the second background mode corresponding to the third color in the first background mode; and determine the second color as the second page style information corresponding to the page element in the second background mode.

[0094] In a specific implementation, if the first color in the first background mode is not found in the color style mapping table, a third color similar to the first color can be selected from the color mapping table and used as the color of the page element in the first background mode. Further, the second color in the second background mode associated with the third color in the first background mode is queried from the color mapping table, and when the background mode is switched to the second background mode, the page element with the second color is displayed, so as to achieve the adaptation of the page style of the page elements on the target page to the dark mode when the background mode is switched.

[0095] It should be noted that after obtaining the first page style information of each page element on the target page, if the first color in the first background mode is not found in the color mapping table, an approximate color scheme can be used to find a third color similar to the first color according to the adaptation specification. Further, based on the third color in the first background mode, the second color in the second background mode associated with the third color is found in the color mapping table, and then the second page style information of the page element in the second background mode is generated. Here, the third color similar to the first color can be a color whose color value is close to the color value of the first color.

[0096] Here, since the color specifications given by the User Interface (UI) design cannot cover all color values, an approximate color scheme is needed to convert the uncovered colors into the colors required by the UI.

[0097] In an example, assume that the background color of a page element on the target page is pink #ffc0cb, and this color is not in the dark mode color specification. However, a red color #ffabab closest to this pink is found in the specification, and this red is the approximate color of the pink. Then, the color value of the pink in the dark mode is equal to the color value #802a2a of this red in the dark mode.

[0098] Further, each page element has at least one state, and the state of the page element can change. For example, a page element is a button, and after being clicked, it changes to another page style. If the state of the page element also changes during the process of switching from the first background mode to the second background mode, it is necessary to obtain the third page style information of the page element after the state change. Furthermore, after switching to the second background mode, display the fourth page style information of the page element in the second background mode corresponding to the third page element corresponding to the first background mode. Specifically, after obtaining the first page style information corresponding to the page element in the target page in the first background mode in step S101, the following steps are further included:

[0099] Step b1: Listen for whether the first page style information corresponding to the page element changes.

[0100] In a specific implementation, after obtaining the first page style information corresponding to the page element in the target page in the first background mode, first listen for whether the first page style information corresponding to the page element changes.

[0101] Here, the Application Programming Interface (API) of MutationObserver can be used to listen to the HTML Document Object Model (HTML DOM). When the page style of the page element being listened to changes, obtain the latest page style. Among them, HTML DOM is a document object model specifically applicable to HTML / XHTML. HTML DOM can be understood as the API of a web page. It regards each element in the web page as an object, so that the elements in the web page can also be obtained or edited by computer languages.

[0102] Step b2: If so, obtain the third page style information corresponding to the changed page element, and determine the fourth page style information corresponding to the page element in the second background mode based on the third page style information corresponding to the page element in the first background mode.

[0103] In a specific implementation, if it is monitored that the first page style information corresponding to any page element changes, obtain the third page style information corresponding to the changed page element, and determine the fourth page style information corresponding to the page element in the second background mode based on the third page style information corresponding to the page element in the first background mode.

[0104] Step b3: Reload the page element of the target page according to the fourth page style information corresponding to the page element.

[0105] In a specific implementation, after obtaining the third page style information of the page element in the off-site background mode after the change, the fourth page style information in the second background mode corresponding to the third page style information in the first background mode can be determined. Furthermore, according to the fourth page style information corresponding to the page element, the page element of the target page is reloaded, and the page element is displayed in the fourth page style.

[0106] Here, for the case where the page element is a picture element, the determination process of the second page style information corresponding to the page element in the second background mode is described. Specifically, in step S102, based on the first page style information corresponding to the page element in the first background mode, determining the second page style information corresponding to the page element in the second background mode includes the following steps:

[0107] Step c1: According to the first background mode and the first picture link information, determine the second picture link information corresponding to the picture element in the second background mode.

[0108] In a specific implementation, for the case where the page element is a picture element and the first page style information is the first picture link information, according to the first background mode and the first picture link information of the page element, the second picture link information of the picture element in the second background mode can be determined. Here, there is a one-to-one correspondence between the first picture link in the first background mode and the second picture link in the second background mode, and each picture link is associated with a picture. That is, the picture associated with the picture link can be found through the picture link. The pictures corresponding to the first background mode can be stored in one area, and the pictures corresponding to the second background mode can be stored in another area.

[0109] In one example, the first picture link of a picture element in the first background mode is http: / / xxxx / a.png, and the second picture link of the picture element in the second background mode is http: / / xxxx / darkmode / a.png. In this way, the UI only needs to upload the picture in the background mode as the converted address, which can avoid modifying the business code.

[0110] Step c2: Determine the second picture link information as the second page style information corresponding to the page element in the second background mode.

[0111] In a specific implementation, after determining the second picture link of the page element in the second background mode, when switching to the second background mode, the picture corresponding to the second picture link can be displayed.

[0112] S103: Reload the page element of the target page according to the second page style information corresponding to the page element.

[0113] In this step, after determining the second page style information of the page element in the second background mode, reload the page element of the target page and display the page element in the second page style.

[0114] It should be noted that since there are a large number of old H5 pages, in order to reduce the adaptation cost, a JavaScript code is directly injected into the webview through the computer function native for automatic conversion. The injected code will convert all color values, and there is no need for the business side to modify the code. Among them, the conversion of colors needs to follow the specific specifications given by the UI. The specifications will specify what color value a certain color should be displayed in the background mode. The present disclosure can achieve automatic adaptation of colors and pictures to the changed background mode, such as the dark mode, without rewriting the code, and can have a conversion effect that conforms to the UI specifications for both new and old pages, which is efficient and simple.

[0115] In the embodiment of the present disclosure, in response to the operation of switching from the first background mode to the second background mode, obtain the first page style information corresponding to the page element in the target page in the first background mode. Furthermore, based on the first page style information corresponding to the page element in the first background mode, determine the second page style information corresponding to the page element in the second background mode, and reload the page element of the target page according to the second page style information corresponding to the page element. By generating the page style information of the page element after the mode switch, the adaptation efficiency can be improved while meeting the adaptation effect of the page style of the page element and the dark mode.

[0116] Those skilled in the art can understand that in the above method of the specific implementation manner, the writing order of each step does not mean a strict execution order and does not constitute any limitation on the implementation process. The specific execution order of each step should be determined according to its function and possible internal logic.

[0117] Based on the same inventive concept, the embodiment of the present disclosure also provides a page style switching device corresponding to the page style switching method. Since the principle of solving problems by the device in the embodiment of the present disclosure is similar to the above page style switching method in the embodiment of the present disclosure, the implementation of the device can refer to the implementation of the method, and the repeated parts will not be described again.

[0118] Embodiment 2

[0119] Figure 2 FIG. 1 shows one of the schematic diagrams of a page style switching device 200 provided by an embodiment of the present disclosure; Figure 3 FIG. 2 shows another schematic diagram of a page style switching device 200 provided by an embodiment of the present disclosure; Figure 4 FIG. 3 shows a specific schematic diagram of the determination module 220 in the page style switching device 200 provided by an embodiment of the present disclosure.

[0120] As Figure 2 shown, the page style switching device 200 includes:

[0121] An acquisition module 210, configured to respond to an operation of switching from a first background mode to a second background mode, and acquire first page style information corresponding to page elements in a target page in the first background mode;

[0122] A determination module 220, configured to determine second page style information corresponding to the page elements in the second background mode based on the first page style information corresponding to the page elements in the first background mode;

[0123] A loading module 230, configured to reload the page elements of the target page according to the second page style information corresponding to the page elements.

[0124] In a possible implementation manner, as Figure 2 shown, if the page element is a text element, the first page style information is color style information; the determination module 220 is configured to determine the second page style information corresponding to the page element in the second background mode according to the following steps:

[0125] Query whether there is a first color of the text element in the first background mode in a preset color style mapping table;

[0126] If it exists, query, from the color style mapping table, a second color corresponding to the first color in the second background mode;

[0127] Determine the second color as the second page style information corresponding to the page element in the second background mode.

[0128] In a possible implementation manner, as Figure 2 shown, the determination module 220 is further configured to:

[0129] If it does not exist, determine a third color in the color style mapping table that is similar to the first color in the first background mode;

[0130] Query, from the color style mapping table, the second color in the second background mode corresponding to the third color in the first background mode;

[0131] Determine the second color as the second page style information corresponding to the page element in the second background mode.

[0132] In a possible implementation, as Figure 3 shown, the page style switching device 200 further includes a monitoring module 240; the monitoring module 240 is configured to:

[0133] Monitor whether the first page style information corresponding to the page element changes;

[0134] If yes, obtain the third page style information corresponding to the page element after the change, and determine the fourth page style information corresponding to the page element in the second background mode based on the third page style information corresponding to the page element in the first background mode;

[0135] Reload the page element of the target page according to the fourth page style information corresponding to the page element.

[0136] In a possible implementation, as Figure 3 shown, the page style switching device 200 further includes a monitoring module 240; the monitoring module 240 is configured to:

[0137] Monitor whether the first page style information corresponding to the page element changes;

[0138] If yes, obtain the third page style information corresponding to the page element after the change, and determine the fourth page style information corresponding to the page element in the second background mode based on the third page style information corresponding to the page element in the first background mode;

[0139] Reload the page element of the target page according to the fourth page style information corresponding to the page element.

[0140] In a possible implementation, as Figure 4 shown, if the page element is a picture element and the first page style information is the first picture link information; the determination module 220 includes:

[0141] A first determination unit 221, configured to determine the second picture link information corresponding to the picture element in the second background mode according to the first background mode and the first picture link information;

[0142] A second determination unit 222, configured to determine the second picture link information as second page style information corresponding to the page element in the second background mode.

[0143] In a possible implementation manner, as Figure 2 shown, the obtaining module 210 is configured to, if the page element is a text element, obtain first page style information corresponding to the page element in the target page in the first background mode in the following manner:

[0144] Embedded style tag method, external style tag method, inline style tag method.

[0145] In a possible implementation manner, the page style information includes at least one of the following information:

[0146] Text color display information, background color display information, border color display information, color display information in the floating state, color display information in the click state, picture link information.

[0147] In the embodiments of the present disclosure, in response to an operation of switching from the first background mode to the second background mode, first page style information corresponding to the page element in the target page in the first background mode is obtained. Furthermore, based on the first page style information corresponding to the page element in the first background mode, second page style information corresponding to the page element in the second background mode is determined, and the page element of the target page is reloaded according to the second page style information corresponding to the page element. By generating the page style information of the page element after the mode switch, the adaptation efficiency can be improved while meeting the adaptation effect of the page style of the page element and the dark mode.

[0148] For the description of the processing flow of each module in the device and the interaction flow between each module, reference may be made to the relevant description in the above method embodiments, which will not be elaborated here.

[0149] Embodiment III

[0150] Based on the same inventive concept, the embodiments of the present disclosure further provide a computer device. Refer to Figure 5As shown in the figure, it is a schematic structural diagram of a computer device 500 provided by an embodiment of the present disclosure, including a processor 501, a memory 502, and a bus 503. Among them, the memory 502 is used to store execution instructions, including an internal memory 5021 and an external memory 5022; the internal memory 5021 here is also called the main memory, which is used to temporarily store the operation data in the processor 501 and the data exchanged with the external memory 5022 such as a hard disk. The processor 501 exchanges data with the external memory 5022 through the internal memory 5021. When the computer device 500 runs, the processor 501 communicates with the memory 502 through the bus 503, so that the processor 501 executes the following instructions:

[0151] In response to an operation of switching from a first background mode to a second background mode, obtain first page style information corresponding to page elements in a target page in the first background mode;

[0152] Based on the first page style information corresponding to the page elements in the first background mode, determine second page style information corresponding to the page elements in the second background mode;

[0153] Reload the page elements of the target page according to the second page style information corresponding to the page elements.

[0154] Embodiment 4

[0155] An embodiment of the present disclosure further provides a computer-readable storage medium, on which a computer program is stored. When the computer program is run by a processor, it executes the steps of the page style switching method described in the foregoing method embodiment. Among them, the storage medium can be a volatile or non-volatile computer-readable storage medium.

[0156] A computer program product of the page style switching method provided by an embodiment of the present disclosure includes a computer-readable storage medium storing program code. The instructions included in the program code can be used to execute the steps of the page style switching method described in the foregoing method embodiment. For details, refer to the foregoing method embodiment, which will not be elaborated here.

[0157] An embodiment of the present disclosure further provides a computer program, which implements any one of the foregoing methods when executed by a processor. The computer program product can be specifically implemented in a manner of hardware, software, or a combination thereof. In an optional embodiment, the computer program product is specifically embodied as a computer storage medium. In another optional embodiment, the computer program product is specifically embodied as a software product, such as a Software Development Kit (SDK), etc.

[0158] Those skilled in the art can clearly understand that for the convenience and brevity of description, the specific working processes of the systems and devices described above can refer to the corresponding processes in the foregoing method embodiments, and will not be elaborated herein. In several embodiments provided in the present disclosure, it should be understood that the disclosed systems, devices, and methods can be implemented in other ways. The device embodiments described above are merely illustrative. For example, the division of the units is only a logical function division, and there may be other division methods in actual implementation. For another example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the couplings or direct couplings or communication connections shown or discussed with each other can be through some communication interfaces, and the indirect couplings or communication connections of the devices or units can be in electrical, mechanical, or other forms.

[0159] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place, or may be distributed to multiple network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0160] In addition, in each embodiment of the present disclosure, the functional units can be integrated into one processing unit, or each unit can exist physically alone, or two or more units can be integrated into one unit.

[0161] If the functions are implemented in the form of software functional units and sold or used as independent products, they can be stored in a non-volatile computer-readable storage medium executable by a processor. Based on such an understanding, the technical solution of the present disclosure, in essence, or the part that contributes to the prior art, or a part of this technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods described in each embodiment of the present disclosure. The foregoing storage medium includes: various media that can store program codes such as USB flash drives, mobile hard disks, read-only memories (ROMs), random access memories (RAMs), magnetic disks, or optical discs.

[0162] Finally, it should be noted that: The above-described embodiments are only specific implementation manners of the present disclosure, used to illustrate the technical solutions of the present disclosure, rather than limiting it. The protection scope of the present disclosure is not limited thereto. Although the present disclosure has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art should understand that: Any person skilled in the art within the technical scope disclosed by the present disclosure can still modify the technical solutions recorded in the foregoing embodiments, or can easily think of changes, or perform equivalent replacements on some of the technical features; and these modifications, changes or replacements do not make the essence of the corresponding technical solutions deviate from the spirit and scope of the technical solutions of the embodiments of the present disclosure, and should all be covered within the protection scope of the present disclosure. Therefore, the protection scope of the present disclosure should be subject to the protection scope of the claims.

Claims

1. A method for switching page styles, characterized in that, The method includes: In response to an operation of switching from a first background mode to a second background mode, obtaining first page style information corresponding to page elements in a target page in the first background mode; Based on the first page style information corresponding to the page elements in the first background mode, determining second page style information corresponding to the page elements in the second background mode; Reloading the page elements of the target page according to the second page style information corresponding to the page elements; Wherein, if the page element is a picture element and the first page style information is first picture link information, the determining the second page style information corresponding to the page element in the second background mode based on the first page style information corresponding to the page element in the first background mode includes: Determining second picture link information corresponding to the picture element in the second background mode according to the first background mode and the first picture link information; Determining the second picture link information as the second page style information corresponding to the page element in the second background mode; Wherein, if the page element is a text element and the first page style information is color style information, the determining the second page style information corresponding to the page element in the second background mode based on the first page style information corresponding to the page element in the first background mode includes: Querying whether a first color of the text element in the first background mode exists in a preset color style mapping table; If not, determining a third color similar to the first color in the first background mode in the color style mapping table; Querying, from the color style mapping table, a second color in the second background mode corresponding to the third color in the first background mode; Determining the second color as the second page style information corresponding to the page element in the second background mode.

2. The page style switching method according to claim 1, wherein If the page element is a text element and the first page style information is color style information; the determining the second page style information corresponding to the page element in the second background mode based on the first page style information corresponding to the page element in the first background mode further includes: If the first color of the text element in the first background mode exists in the preset color style mapping table, querying, from the color style mapping table, a second color in the second background mode corresponding to the first color in the first background mode; Determining the second color as the second page style information corresponding to the page element in the second background mode.

3. The page style switching method according to claim 1, wherein After obtaining the first page style information corresponding to the page elements in the target page in the first background mode, the page style switching method further includes: Listening for whether the first page style information corresponding to the page elements changes; If so, obtain the third page style information corresponding to the changed page element, and determine the fourth page style information corresponding to the page element in the second background mode based on the third page style information corresponding to the page element in the first background mode; Reload the page element of the target page according to the fourth page style information corresponding to the page element.

4. The page style switching method according to claim 1, wherein If the page element is a text element, obtain the first page style information corresponding to the page element in the target page in the first background mode by the following methods: Embedded style tag method, external style tag method, inline style tag method.

5. The page style switching method according to claim 1, wherein The page style information includes at least one of the following information: Text color display information, background color display information, border color display information, color display information in the floating state, color display information in the click state, picture link information.

6. A page style switching device, characterized in that, The device includes: An acquisition module configured to respond to an operation of switching from a first background mode to a second background mode, and acquire the first page style information corresponding to the page element in the target page in the first background mode; A determination module configured to determine the second page style information corresponding to the page element in the second background mode based on the first page style information corresponding to the page element in the first background mode; A loading module configured to reload the page element of the target page according to the second page style information corresponding to the page element, wherein, if the page element is a picture element, the first page style information is the first picture link information, and the determination module is further configured to: Determine the second picture link information corresponding to the picture element in the second background mode according to the first background mode and the first picture link information; Determine the second picture link information as the second page style information corresponding to the page element in the second background mode; wherein, if the page element is a text element, the first page style information is the color style information, and the determination module is further configured to: Query whether there is a first color of the text element in the first background mode in a preset color style mapping table; If not, determine a third color in the color style mapping table that is similar to the first color in the first background mode; Query, from the color style mapping table, the second color in the second background mode corresponding to the third color in the first background mode; Determine the second color as the second page style information corresponding to the page element in the second background mode.

7. A computer device, characterized in that, Includes: A processor, a memory and a bus, the memory stores machine-readable instructions executable by the processor, when the computer device runs, the processor communicates with the memory through the bus, and when the machine-readable instructions are executed by the processor, the steps of the page style switching method according to any one of claims 1 to 5 are executed.

8. A computer-readable storage medium, characterized in that, A computer program is stored on the computer-readable storage medium, and when the computer program is run by a processor, it executes the steps of the page style switching method according to any one of claims 1 to 5.

Images