页面模式切换方法、装置、设备以及存储介质与流程

本发明涉及计算机技术领域，尤其涉及一种页面模式切换方法、装置、设备以及存储介质。

背景技术：

暗色模式(也称深色模式或暗黑模式)，是对界面文字前景与深色背景对比度以及文字和系统图标的颜色进行优化处理，将界面换为黑色或深色，确保人眼观看感受一致、舒适和易读的一种模式。暗黑模式更多的目的是希望使用者更加专注自己的操作任务，所以对于信息内容的表达会更注重视觉性。

然而，相关技术中主流的web浏览器在实现暗色模式切换时，会存在肉眼可见的过渡效果，切换流畅度不高。

技术实现要素：

本发明提供一种页面模式切换方法、装置、设备以及存储介质，以解决暗色模式切换时切换流畅度不高的问题。

第一方面，本发明提供一种页面模式切换方法，包括：

接收服务器发送的目标主题页面的页面数据，所述页面数据包括基础模式的全量样式文件、增量样式文件和暗色切换文件，所述增量样式文件为暗色模式的全量样式文件与基础模式的全量样式文件之间取值不同的属性对应的样式文件，所述暗色切换文件包括用于指示所述增量样式文件是否有效的第一标识；

确定需要将目标主题的基础模式页面切换为暗色模式页面；

根据所述增量样式文件和所述暗色切换文件将所述目标主题的基础模式页面切换为暗色模式页面。

可选的，所述确定需要将目标主题的基础模式页面切换为暗色模式页面，包括：

接收到暗色模式切换请求，确定需要将所述目标主题的基础模式页面切换为暗色模式页面；或者，

监听系统当前的外观模式；

若系统当前的外观模式为暗色模式，确定需要将所述目标主题的基础模式页面切换为暗色模式页面。

可选的，所述根据所述增量样式文件和所述暗色切换文件将所述目标主题的基础模式页面切换为暗色模式页面，包括：

将所述第一标识设置为第二值，所述第二值用于指示所述增量样式文件有效；

根据所述增量样式文件对所述目标主题的基础模式页面的页面元素进行重绘，得到所述目标主题页面的暗色模式页面；

显示所述目标主题页面的暗色模式页面。

可选的，所述方法还包括：

确定需要将所述目标主题的暗色模式页面切换为基础模式页面；

将所述第一标识设置为第一值，所述第一值用于指示所述增量样式文件无效；

根据所述增量样式文件和所述基础模式的全量样式文件，对所述目标主题页面的暗色模式页面的页面元素进行重绘，得到所述目标主题页面的基础模式页面；

显示所述目标主题页面的基础模式页面。

可选的，所述增量样式文件包括全局增量样式文件和局部增量样式文件，所述全局增量样式文件为暗色模式的全量样式文件与基础模式的全量样式文件之间取值不同的所有属性对应的样式文件，所述局部增量样式文件为所述全局增量样式文件中组成所述目标主题页面的每个组件对应的样式文件。

可选的，所述确定需要将所述目标主题的基础模式页面切换为暗色模式页面，包括：

接收到暗色模式切换请求，确定需要将所述目标主题的基础模式页面切换为暗色模式页面，所述暗色模式切换请求携带全局暗色模式指示或局部暗色模式指示和需要切换为暗色模式的目标组件的标识。

可选的，所述根据所述增量样式文件和所述暗色切换文件将所述目标主题的基础模式页面切换为暗色模式页面，包括：

若所述暗色模式切换请求携带全局暗色模式指示，根据所述全局增量样式文件和所述暗色切换文件将所述目标主题的基础模式页面切换为暗色模式页面；

若所述暗色模式切换请求携带局部暗色模式指示和需要切换为暗色模式的目标组件的标识，根据所述目标组件对应的局部增量样式文件和所述暗色切换文件，将所述目标组件对应的基础模式页面切换为暗色模式页面。

可选的，所述增量样式文件通过以下方式确定：

根据目标主题页面对应的基础模式变量表生成基础模式的全量样式文件，根据目标主题页面对应的暗色模式变量表生成暗色模式的全量样式文件，所述基础模式变量表和所述暗色模式变量表均包括目标主题页面的每个页面元素的属性和属性值；

将所述基础模式的全量样式文件和暗色模式的全量样式文件进行对比，从暗色模式的全量样式文件中取出与所述基础模式的全量样式文件中属性值不同的属性；

对取出的每个属性值不同的属性的前缀增加数据标识，根据增加数据标识的全部属性和属性值得到所述增量样式文件。

可选的，所述确定需要将目标主题的基础模式页面切换为暗色模式页面之前，所述方法还包括：

将所述第一标识设置为第一值，加载所述基础模式的全量样式文件，并显示所述基础模式的全量样式文件对应的所述目标主题的基础模式页面，所述第一值用于指示所述增量样式文件无效。

第二方面，本发明提供一种页面模式切换方法，包括：

接收客户端发送的目标主题页面请求，所述目标主题页面请求包括目标主题页面的标识；

根据所述目标主题页面的标识获取所述目标主题页面的页面数据，所述页面数据包括基础模式的全量样式文件、增量样式文件和暗色切换文件，所述增量样式文件为暗色模式的全量样式文件与基础模式的全量样式文件之间取值不同的属性对应的样式文件，所述暗色切换文件包括用于指示所述增量样式文件是否有效的第一标识；

向所述客户端发送所述页面数据。

可选的，所述根据所述目标主题页面的标识获取所述目标主题页面的页面数据，包括：

根据所述目标主题页面的标识，从预存的主题页面标识与页面数据的对应关系表中查找所述目标主题页面的页面数据。

可选的，所述增量样式文件包括全局增量样式文件和局部增量样式文件，所述全局增量样式文件为暗色模式的全量样式文件与基础模式的全量样式文件之间取值不同的所有属性对应的样式文件，所述局部增量样式文件为所述全局增量样式文件中组成所述目标主题页面的每个组件对应的样式文件。

可选的，所述增量样式文件通过以下方式确定：

根据目标主题页面对应的基础模式变量表生成基础模式的全量样式文件，根据目标主题页面对应的暗色模式变量表生成暗色模式的全量样式文件，所述基础模式变量表和所述暗色模式变量表均包括目标主题页面的每个页面元素的属性和属性值；

将所述基础模式的全量样式文件和暗色模式的全量样式文件进行对比，从暗色模式的全量样式文件中取出与所述基础模式的全量样式文件中属性值不同的属性；

对取出的每个属性值不同的属性的前缀增加数据标识，根据增加数据标识的全部属性和属性值得到所述增量样式文件。

第三方面，本发明提供一种页面模式切换装置，包括：

接收模块，用于接收服务器发送的目标主题页面的页面数据，所述页面数据包括基础模式的全量样式文件、增量样式文件和暗色切换文件，所述增量样式文件为暗色模式的全量样式文件与基础模式的全量样式文件之间取值不同的属性对应的样式文件，所述暗色切换文件包括用于指示所述增量样式文件是否有效的第一标识；

确定模块，用于确定需要将目标主题的基础模式页面切换为暗色模式页面；

处理模块，用于根据所述增量样式文件和所述暗色切换文件将所述目标主题的基础模式页面切换为暗色模式页面。

第四方面，本发明提供一种页面模式切换装置，包括：

接收模块，用于接收客户端发送的目标主题页面请求，所述目标主题页面请求包括目标主题页面的标识；

获取模块，用于根据所述目标主题页面的标识获取所述目标主题页面的页面数据，所述页面数据包括基础模式的全量样式文件、增量样式文件和暗色切换文件，所述增量样式文件为暗色模式的全量样式文件与基础模式的全量样式文件之间取值不同的属性对应的样式文件，所述暗色切换文件包括用于指示所述增量样式文件是否有效的第一标识；

发送模块，用于向所述客户端发送所述页面数据。

第五方面，本发明提供一种电子设备，包括：

处理器；以及

存储器，用于存储所述处理器的可执行指令；

其中，所述处理器配置为经由执行所述可执行指令来执行第一方面或第一方面各可能的实施方式中任一所述的页面模式切换方法。

第六方面，本发明提供一种服务器，包括：

处理器；以及

存储器，用于存储所述处理器的可执行指令；

其中，所述处理器配置为经由执行所述可执行指令来执行第二方面或第二方面各可能的实施方式中任一所述的页面模式切换方法。

第七方面，本发明实施例提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现第一方面或第一方面各可能的实施方式或第二方面或第二方面各可能的实施方式中任一所述的页面模式切换方法。

第八方面，本发明实施例提供一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现第一方面或第一方面各可能的实施方式或第二方面或第二方面各可能的实施方式中任一所述的页面模式切换方法。

本发明提供的页面模式切换方法、装置、设备以及存储介质，通过客户端接收服务器发送的目标主题页面的页面数据，该页面数据包括基础模式的全量样式文件、增量样式文件和暗色切换文件，当客户端确定需要将目标主题的基础模式页面切换为暗色模式页面时，根据增量样式文件和暗色切换文件将目标主题的基础模式页面切换为暗色模式页面，从而实现了暗色模式切换。由于增量样式文件为暗色模式的全量样式文件与基础模式的全量样式文件之间取值不同的属性对应的样式文件，因此增量样式文件仅包括二者属性值不同的属性，因此根据增量样式文件将目标主题的基础模式页面切换为暗色模式页面时速度较快，且增量样式文件已存储在客户端，无需从服务器再次获取，无需重复加载页面，因此速度较快，可提高暗色模式在线切换的流畅度。

附图说明

图1为本发明实施例提供的页面模式切换方法的一种应用场景示意图；

图2为本发明实施例提供的一种页面模式切换方法的流程图；

图3为本发明实施例提供的一种页面模式切换方法实施例的流程图；

图4为本发明实施例提供的一种页面模式切换方法实施例的流程图；

图5为本发明实施例提供的一种页面模式切换方法的流程图；

图6为本发明实施例提供的一种页面模式切换方法的交互流程图；

图7为本发明实施例提供的一种页面模式切换装置的结构示意图；

图8为本发明实施例提供的一种页面模式切换装置的结构示意图；

图9为本发明实施例提供的一种电子设备的结构示意图；

图10为本发明实施例提供的一种服务器的结构示意图。

具体实施方式

下面详细描述本发明的实施例，所述实施例的示例在附图中示出。下面通过参考附图描述的实施例是示例性的，旨在用于解释本发明，而不能理解为对本发明的限制。

本发明实施例的说明书、权利要求书及附图中的术语“第一”和“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明实施例的实施例例如能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

首先，下面对本发明实施例中的部分用语进行解释说明，以便于本领域技术人员理解。

1、页面元素，是指页面展示的组成元素，例如img标签、div标签、span标签等，这些元素都具有css属性，比如背景颜色(background-color)和边框颜色(border-color)等等。

2、全量样式文件，是根据一主题页面对应的基础模式变量表生成的样式文件，基础模式变量表包括该主题页面的每个页面元素的属性和属性值，可以将一主题页面对应的基础模式变量表通过css预处理器生成全量样式文件。

3、css，是指层叠样式表，是一种用来表现html文件样式的语言，html文件不能被浏览器识别，需要编译成css才能被浏览器识别。

相关技术中主流的web浏览器在实现暗色模式切换时，会存在肉眼可见的过渡效果，切换的流畅度不高。为解决这一问题，本发明实施例提供一种页面模式切换方法、装置、设备以及存储介质，通过客户端接收服务器发送的目标主题页面的页面数据，该页面数据包括基础模式的全量样式文件、增量样式文件和暗色切换文件，当客户端确定需要将目标主题的基础模式页面切换为暗色模式页面时，根据增量样式文件和暗色切换文件将目标主题的基础模式页面切换为暗色模式页面，从而实现了暗色模式切换。由于增量样式文件为暗色模式的全量样式文件与基础模式的全量样式文件之间取值不同的属性对应的样式文件，因此增量样式文件仅包括二者属性值不同的属性，因此根据增量样式文件对当前主题页面的基础模式页面的页面元素进行重绘时，只需重绘页面元素的属性值不同的属性，且增量样式文件已存储在客户端，无需从服务器再次获取，无需重复加载页面，因此速度较快，可提高暗色模式在线切换的流畅度。进一步地，增量样式文件包括全局增量样式文件和局部增量样式文件，因此还可以支持局部暗色模式的切换。

接下来，对本发明实施例涉及的应用场景进行示例说明。本发明实施例提供的页面模式切换方法至少可以应用于下述应用场景中，下面结合附图进行说明。

示例性的，图1为本发明实施例提供的页面模式切换方法的一种应用场景示意图，如图1所示，图1中所示为浏览器打开的一个页面，例如，当前显示的是一主题页面的基础模式页面，页面上显示有模式切换按钮1(button)，模式切换按钮1的位置可以在页面的任意位置。在本发明实施例的一种场景中，当用户要切换到暗色模式时，可通过鼠标点击或手指点击模式切换按钮1，客户端响应于用户的点击操作，接收到暗色模式切换请求，即可确定需要将当前主题页面从基础模式切换为暗色模式，接着执行本发明实施例提供的页面模式切换方法，将当前主题页面切换为如图1右边所示的暗色模式页面。在本发明实施例的另一种场景中，客户端可以监听系统当前的外观模式，若系统当前的外观模式为暗色模式，确定需要将当前主题页面从基础模式切换为暗色模式，接着执行本发明实施例提供的页面模式切换方法，将当前主题页面切换为如图1右边所示的暗色模式页面，实现自动适配基础模式和暗色模式的效果，与系统模式一致。图1右边所示的暗色模式页面仅为一种示例，暗色模式会涉及到颜色和透明度的切换，例如模式切换按钮1的透明度相比较在基础模式下会发生变化，颜色切换可以涉及到背景颜色和边框颜色的切换等等。本发明实施例提供的方法，可实现暗色模式在线切换时具有较高的流畅度，避免出现肉眼可见的过渡效果，提高用户体验。可以理解的是，在切换到暗色模式后，若需要切换回基础模式，可采用同样的方式，如用户点击模式切换按钮1，或者监听系统当前的外观模式，若为基础模式，则客户端将浏览器显示的页面切换回基础模式页面。

下面以具体的实施例对本发明的技术方案以及本发明的技术方案如何解决上述技术问题进行详细说明。下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例中不再赘述。下面将结合附图，对本发明的实施例进行描述。

图2为本发明实施例提供的一种页面模式切换方法的流程图，该页面模式切换方法可以由页面模式切换装置执行，该页面模式切换装置可以通过软件和/或硬件的方式实现。该页面模式切换装置可以是客户端(浏览器)。如图2所示，本实施例的方法可以包括：

s101、客户端接收服务器发送的目标主题页面的页面数据，页面数据包括基础模式的全量样式文件、增量样式文件和暗色切换文件，增量样式文件为暗色模式的全量样式文件与基础模式的全量样式文件之间取值不同的属性对应的样式文件，暗色切换文件包括用于指示增量样式文件是否有效的第一标识。

具体来说，主题页面是指浏览器在显示一网页页面时，可能有多个不同的主题对应的页面，也可能只有一个主题页面。

具体地，当用户在浏览器中激活一个网页链接，如点击一个网页链接或者在网址栏中输入页面的网址或统一资源定位符(uniformresourcelocator，url)地址等地址信息，并通过回车键或者其他方式触发进入该地址信息对应的网页时，客户端(浏览器)会向服务器发送目标主题页面请求，该页面请求包括目标主题页面的标识，若一个网页有多个主题，该标识可以是网址与主题标识或url地址与主题标识，其中的主题标识可以是主题标号或主题名称；若一个网页只有一个主题，则该标识可以是网址或url地址。服务器接收到目标主题页面请求后，根据目标主题页面的标识获取目标主题页面的页面数据，接着将目标主题页面的页面数据发送给客户端。

其中，页面数据包括基础模式的全量样式文件、增量样式文件和暗色切换文件。基础模式的全量样式文件可以是根据目标主题页面对应的基础模式变量表生成的样式文件，基础模式变量表包括该目标主题页面的每个页面元素的属性和属性值，例如背景颜色和边框颜色为两个属性，属性值可以为(r，g，b，f)，其中的r、g和b的取值范围为0-255，f为透明度，f取值范围为0-1。可以将目标主题页面对应的基础模式变量表通过css预处理器生成全量样式文件。增量样式文件为暗色模式的全量样式文件与基础模式的全量样式文件之间取值不同的属性对应的样式文件，作为一种可实施的方式，增量样式文件可以通过以下方式确定：

首先，根据目标主题页面对应的基础模式变量表生成基础模式的全量样式文件，根据目标主题页面对应的暗色模式变量表生成暗色模式的全量样式文件，基础模式变量表和暗色模式变量表均包括目标主题页面的每个页面元素的属性和属性值。

接着，将基础模式的全量样式文件和暗色模式的全量样式文件进行对比，从暗色模式的全量样式文件中取出与基础模式的全量样式文件中属性值不同的属性，例如，基础模式的全量样式文件和暗色模式的全量样式文件中有两个属性的属性值不同，边框颜色1：(r1，g1，b1，f1)，边框颜色2：(r2，g2，b2，f2)，背景颜色1(r1，g1，b1，f1)，背景颜色2(r2，g2，b2，f2)。其中边框颜色2和背景颜色2为暗色模式的全量样式文件中的属性，从暗色模式的全量样式文件中取出这两个属性，为：边框颜色2：(r2，g2，b2，f2)和背景颜色2(r2，g2，b2，f2)。

然后，对取出的每个属性值不同的属性的前缀增加数据标识，根据增加数据标识的全部属性和属性值得到增量样式文件。例如，增加的数据标识为暗黑数据[data-dark]，前缀增加数据标识后例如为：

[data-dark]：边框颜色2：(r2，g2，b2，f2)；

[data-dark]：背景颜色2(r2，g2，b2，f2)。

本实施例中，可选的，增量样式文件可以包括全局增量样式文件和局部增量样式文件，全局增量样式文件为暗色模式的全量样式文件与基础模式的全量样式文件之间取值不同的所有属性对应的样式文件，局部增量样式文件为全局增量样式文件中组成目标主题页面的每个组件对应的样式文件，即就是说，局部增量样式文件为至少一个，每个组件对应一个局部增量样式文件。

其中，暗色切换文件是用于进行暗色模式与基础模式切换的文件，暗色切换文件包括用于指示增量样式文件是否有效的第一标识，第一标识为第一值时用于指示增量样式文件无效，第一标识为第二值时用于指示增量样式文件有效，例如，第一值为“false”，第二值为“true”。

s102、客户端确定需要将目标主题的基础模式页面切换为暗色模式页面。

具体来说，客户端接收到目标主题页面的页面数据后，会先加载并显示目标主题页面的基础模式页面，可选的，在s102之后，还可以包括：

客户端将第一标识设置为第一值，加载基础模式的全量样式文件，并显示基础模式的全量样式文件对应的目标主题页面的基础模式页面，第一值用于指示增量样式文件无效。其中，页面的基础模式为页面的正常显示模式，也称为浅色模式。

具体地，服务器发送的页面数据包括的暗色切换文件中，第一标识可以为空的标识位，客户端接收到页面数据后，可以将第一标识设置为第一值，此时增量样式文件无效，客户端可以加载页面数据，即加载基础模式的全量样式文件，得到目标主题页面的基础模式页面并显示该基础模式页面。

具体地，本实施例中客户端确定需要进行暗色模式切换，有两种可实施的方式：

方式一、客户端接收到暗色模式切换请求，确定需要将目标主题的基础模式页面切换为暗色模式页面。

当用户要切换到暗色模式时，可通过鼠标点击或手指触控点击当前主题页面上的模式切换按钮，客户端响应于用户的点击操作，接收到暗色模式切换请求，接收到该暗色模式切换请求，即可确定需要将当前主题页面从基础模式切换为暗色模式。

方式二、客户端可以监听系统当前的外观模式，若系统当前的外观模式为暗色模式，确定需要将目标主题的基础模式页面切换为暗色模式页面。其中，系统的外观模式可以包括基础模式和暗色模式等，还可以包括其他模式，系统的基础模式即为一般的浅色显示模式。

s103、客户端根据增量样式文件和暗色切换文件将目标主题的基础模式页面切换为暗色模式页面。

具体地，界面当前显示的是目标主题的基础模式页面，客户端接收到服务器发送的目标主题页面的页面数据后，可以将页面数据缓存，以便进行模式切换时使用。客户端确定需要进行暗色模式切换时，可根据增量样式文件和暗色切换文件将目标主题的基础模式页面切换为暗色模式页面。

作为一种可实施的方式，s103具体可以为：

s1031、客户端将第一标识设置为第二值，第二值用于指示增量样式文件有效。

s1032、客户端根据增量样式文件对目标主题的基础模式页面的页面元素进行重绘，得到目标主题页面的暗色模式页面。

具体来说，当页面中页面元素的属性的改变并不影响它在文档流中的位置时(例如：背景颜色、边框颜色和显示或隐藏(visibility)等属性)，浏览器会将新属性赋予给元素并重新绘制它，这个过程称为重绘。增量样式文件为暗色模式的全量样式文件与基础模式的全量样式文件之间取值不同的属性对应的样式文件，因此增量样式文件仅包括二者属性值不同的属性，因此根据增量样式文件对目标主题的基础模式页面的页面元素进行重绘时，只需重绘页面元素的属性值不同的属性，即可得到目标主题页面的暗色模式页面，因此速度较快，可提高暗色模式在线切换的流畅度。

s1033、客户端显示目标主题页面的暗色模式页面。

本实施例提供的页面模式切换方法，通过客户端接收服务器发送的目标主题页面的页面数据，该页面数据包括基础模式的全量样式文件、增量样式文件和暗色切换文件，当客户端确定需要将目标主题的基础模式页面切换为暗色模式页面时，根据增量样式文件和暗色切换文件将目标主题的基础模式页面切换为暗色模式页面，从而实现了暗色模式切换。由于增量样式文件为暗色模式的全量样式文件与基础模式的全量样式文件之间取值不同的属性对应的样式文件，因此增量样式文件仅包括二者属性值不同的属性，因此根据增量样式文件将目标主题的基础模式页面切换为暗色模式页面时速度较快，且增量样式文件已存储在客户端，无需从服务器再次获取，无需重复加载页面，因此速度较快，可提高暗色模式在线切换的流畅度。

可以理解的是，在切换到暗色模式后，若需要切换回基础模式，可采用同样的方式，如用户点击模式切换按钮，或者监听系统当前的外观模式，若为基础模式，则客户端将浏览器显示的页面切换回基础模式页面。具体的实现方式下面结合图3进行说明。

图3为本发明实施例提供的一种页面模式切换方法实施例的流程图，如图3所示，本实施例的方法在图2所示方法的基础上，还可以包括：

s104、客户端确定需要将目标主题的暗色模式页面切换为基础模式页面。

具体来说，同样地，本实施例中客户端确定需要进行基础模式切换，有两种可实施的方式：

方式一、客户端接收到基础模式切换请求，确定需要将目标主题的暗色模式页面切换为基础模式页面。

当用户要切换到基础模式时，可通过鼠标点击或手指触控点击当前主题页面上的模式切换按钮，客户端响应于用户的点击操作，接收到基础模式切换请求，接收到该基础模式切换请求，即可确定需要将当前主题页面从暗色模式切换为基础模式。

方式二、客户端可以监听系统当前的外观模式，若系统当前的外观模式为基础模式，确定需要将目标主题的暗色模式页面切换为基础模式页面。其中，系统的外观模式可以包括基础模式和暗色模式等，还可以包括其他模式，系统的基础模式即为一般的浅色显示模式。

s105、客户端将第一标识设置为第一值。

第一标识为第一值时，增量样式文件是无效的。

s106、客户端根据增量样式文件和基础模式的全量样式文件，对目标主题页面的暗色模式页面的页面元素进行重绘，得到目标主题页面的基础模式页面。

具体地，在对标主题页面的暗色模式页面的页面元素进行重绘时，根据增量样式文件和基础模式的全量样式文件，将增量样式文件中的所有属性的属性值修改为基础模式的全量样式文件中对应的相同属性的属性值，然后按照修改后的属性值进行页面元素的重绘，只需重绘页面元素的属性值不同的属性，即可得到目标主题页面的基础模式页面，因此速度较快，可提高暗色模式切换为基础模式的切换流畅度。

s107、客户端显示目标主题页面的基础模式页面。

本实施例提供的页面模式切换方法，可实现从暗色模式到基础模式的切换，切换速度较快，可提高暗色模式切换为基础模式的切换流畅度。

图4为本发明实施例提供的一种页面模式切换方法实施例的流程图，如图4所示，本实施例的方法在图2或图3所示方法的基础上，在增量样式文件包括全局增量样式文件和局部增量样式文件时，可选的，上述s102可以通过如下步骤实现：

s102’、客户端接收到暗色模式切换请求，确定需要将目标主题的基础模式页面切换为暗色模式页面，暗色模式切换请求携带全局暗色模式指示或局部暗色模式指示和需要切换为暗色模式的目标组件的标识。

具体来说，用户可以选择全局暗色模式或局部暗色模式，若有局部暗色模式的选择，在图1所示的场景中，可以为模式切换按钮1设置局部暗色模式选项，例如目标主题页面包括n个组件，可以设置第一组件暗色模式、第二组件暗色模式、……以及第n组件暗色模式的选项，用户选择某一组件暗色模式，则暗色模式切换请求会携带某一组件的标识，则客户端根据该组件对应的局部增量样式文件进行暗色模式切换，仅将该组件对应的基础模式页面(为部分页面)切换为暗色模式页面。

具体的，暗色模式切换请求携带全局暗色模式指示或局部暗色模式指示和需要切换为暗色模式的目标组件的标识，即，若请求全局暗色模式，暗色模式切换请求携带用于全局暗色模式指示，若请求局部暗色模式，暗色模式切换携带局部暗色模式指示和需要切换为暗色模式的目标组件的标识，例如暗色模式切换请求包括第一组件标识，即请求切换第一组件对应的页面为暗色模式。

相应地，图2中所示的s103可以为：

s103’、若暗色模式切换请求携带全局暗色模式指示，客户端根据全局增量样式文件和暗色切换文件将目标主题的基础模式页面切换为暗色模式页面；若暗色模式切换请求携带局部暗色模式指示和需要切换为暗色模式的目标组件的标识，客户端根据目标组件对应的局部增量样式文件和暗色切换文件，将目标组件对应的基础模式页面切换为暗色模式页面。

具体来说，客户端缓存有全局增量样式文件、局部增量样式文件和暗色切换文件，若暗色模式切换请求携带全局暗色模式指示，即请求进行全局暗色模式切换，则根据全局增量样式文件和暗色切换文件将目标主题的基础模式页面切换为暗色模式页面，具体可以是将第一标识设置为第二值，第二值用于指示增量样式文件有效，即全局增量样式文件和局部增量样式文件均有效，接着根据全局增量样式文件对目标主题的基础模式页面的页面元素进行重绘，得到目标主题页面的暗色模式页面并显示。若携带局部暗色模式指示和需要切换为暗色模式的目标组件的标识，即请求进行局部暗色模式切换，具体可以是将第一标识设置为第二值，第二值用于指示增量样式文件有效，即全局增量样式文件和局部增量样式文件均有效，接着根据局部增量样式文件对目标主题的基础模式页面的页面元素进行重绘，得到目标主题页面的局部暗色模式页面并显示。

本实施例提供的页面模式切换方法，增量样式文件包括全局增量样式文件和局部增量样式文件，通过在暗色模式切换请求携带全局暗色模式指示或局部暗色模式指示和需要切换为暗色模式的目标组件的标识，客户端可根据暗色模式切换请求携带的内容，进行全局暗色模式切换或局部暗色模式切换，从而可支持局部暗色的业务场景。

图5为本发明实施例提供的一种页面模式切换方法的流程图，该页面模式切换方法可以由页面模式切换装置执行，该页面模式切换装置可以通过软件和/或硬件的方式实现。该页面模式切换装置可以是服务器。如图5所示，本实施例的方法可以包括：

s201、服务器接收客户端发送的目标主题页面请求，目标主题页面请求包括目标主题页面的标识。

具体来说，当用户在浏览器中激活一个网页链接，如点击一个网页链接或者在网址栏中输入页面的网址或统一资源定位符(uniformresourcelocator，url)地址等地址信息，并通过回车键或者其他方式触发进入该地址信息对应的网页时，客户端(浏览器)会向服务器发送目标主题页面请求，该页面请求包括目标主题页面的标识，若一个网页有多个主题，该目标主题页面的标识可以是网址与主题标识或url地址与主题标识，其中的主题标识可以是主题标号或主题名称；若一个网页只有一个主题，则主题页面的标识可以是网址或url地址。

s202、服务器根据目标主题页面的标识获取目标主题页面的页面数据，页面数据包括基础模式的全量样式文件、增量样式文件和暗色切换文件，增量样式文件为暗色模式的全量样式文件与基础模式的全量样式文件之间取值不同的属性对应的样式文件，暗色切换文件包括用于指示增量样式文件是否有效的第一标识。

具体地，服务器预存有主题页面的标识和主题页面的页面数据的对应关系，主题页面的标识可以是网址与主题标识或url地址与主题标识。增量样式文件为暗色模式的全量样式文件与基础模式的全量样式文件之间取值不同的属性对应的样式文件，作为一种可实施的方式，增量样式文件可以通过以下方式确定：

首先，根据目标主题页面对应的基础模式变量表生成基础模式的全量样式文件，根据目标主题页面对应的暗色模式变量表生成暗色模式的全量样式文件，基础模式变量表和暗色模式变量表均包括目标主题页面的每个页面元素的属性和属性值。

接着，将基础模式的全量样式文件和暗色模式的全量样式文件进行对比，从暗色模式的全量样式文件中取出与基础模式的全量样式文件中属性值不同的属性，例如，基础模式的全量样式文件和暗色模式的全量样式文件中有两个属性的属性值不同，边框颜色1：(r1，g1，b1，f1)，边框颜色2：(r2，g2，b2，f2)，背景颜色1(r1，g1，b1，f1)，背景颜色2(r2，g2，b2，f2)。其中边框颜色2和背景颜色2为暗色模式的全量样式文件中的属性，从暗色模式的全量样式文件中取出这两个属性，为：边框颜色2：(r2，g2，b2，f2)和背景颜色2(r2，g2，b2，f2)。

然后，对取出的每个属性值不同的属性的前缀增加数据标识，根据增加数据标识的全部属性和属性值得到增量样式文件。例如，增加的数据标识为暗黑数据[data-dark]，前缀增加数据标识后例如为：

[data-dark]：边框颜色2：(r2，g2，b2，f2)；

[data-dark]：背景颜色2(r2，g2，b2，f2)。

本实施例中，可选的，增量样式文件可以包括全局增量样式文件和局部增量样式文件，全局增量样式文件为暗色模式的全量样式文件与基础模式的全量样式文件之间取值不同的所有属性对应的样式文件，局部增量样式文件为全局增量样式文件中组成目标主题页面的每个组件对应的样式文件，即就是说，局部增量样式文件为至少一个，每个组件对应一个局部增量样式文件。

其中，暗色切换文件是用于进行暗色模式与基础模式切换的文件，暗色切换文件包括用于指示增量样式文件是否有效的第一标识，第一标识为第一值时用于指示增量样式文件无效，第一标识为第二值时用于指示增量样式文件有效，例如，第一值为“false”，第二值为“true”。

作为一种可实施的方式，服务器根据目标主题页面的标识获取目标主题页面的页面数据，可以为：根据目标主题页面的标识，从预存的主题页面标识与页面数据的对应关系表中查找目标主题页面的页面数据。

s203、服务器向客户端发送页面数据。

具体地，服务器将目标主题页面的页面数据发送给客户端，客户端可以根据目标主题页面的页面数据进行目标主题页面的加载、显示以及进行目标主题页面的模式切换，具体可以是：先将第一标识设置为第一值使得增量样式文件无效，加载基础模式的全量样式文件，并显示基础模式的全量样式文件对应的目标主题页面的基础模式页面，在确定需要将目标主题的基础模式页面切换为暗色模式页面时，根据增量样式文件和暗色切换文件将目标主题的基础模式页面切换为暗色模式页面。从而实现了页面模式的切换。

本实施例提供的页面模式切换方法，通过服务器接收客户端发送的目标主题页面请求，根据目标主题页面的标识获取目标主题页面的页面数据，并将页面数据发送给客户端，页面数据包括基础模式的全量样式文件、增量样式文件和暗色切换文件。可使得客户端根据目标主题页面的页面数据进行目标主题页面的加载、显示以及进行目标主题页面的模式切换，由于增量样式文件为暗色模式的全量样式文件与基础模式的全量样式文件之间取值不同的属性对应的样式文件，因此增量样式文件仅包括二者属性值不同的属性，因此根据增量样式文件进行目标主题页面的模式切换时速度较快，且增量样式文件已存储在客户端，无需从服务器再次获取，无需重复加载页面，因此速度较快，可提高暗色模式在线切换的流畅度。

下面结合一个具体的实施例，对本发明提供的页面模式切换方法的详细过程进行说明。

图6为本发明实施例提供的一种页面模式切换方法的交互流程图，如图6所示，本实施例的方法可以包括：

s301、客户端向服务器发送目标主题页面请求，目标主题页面请求包括目标主题页面的标识。

s302、服务器根据目标主题页面的标识，从预存的主题页面标识与页面数据的对应关系表中查找目标主题页面的页面数据。

其中，页面数据包括基础模式的全量样式文件、增量样式文件和暗色切换文件，增量样式文件为暗色模式的全量样式文件与基础模式的全量样式文件之间取值不同的属性对应的样式文件，暗色切换文件包括用于指示增量样式文件是否有效的第一标识。

s303、服务器向客户端发送目标主题页面的页面数据。

s304、客户端将第一标识设置为第一值，加载基础模式的全量样式文件，并显示基础模式的全量样式文件对应的目标主题页面的基础模式页面。

s305、客户端确定需要将目标主题的基础模式页面切换为暗色模式页面。

具体地，本实施例中客户端确定需要进行暗色模式切换，有两种可实施的方式：

方式一、客户端接收到暗色模式切换请求，确定需要将目标主题的基础模式页面切换为暗色模式页面。

当用户要切换到暗色模式时，可通过鼠标点击或手指触控点击当前主题页面上的模式切换按钮，客户端响应于用户的点击操作，接收到暗色模式切换请求，接收到该暗色模式切换请求，即可确定需要将当前主题页面从基础模式切换为暗色模式。

方式二、客户端可以监听系统当前的外观模式，若系统当前的外观模式为暗色模式，确定需要将目标主题的基础模式页面切换为暗色模式页面。其中，系统的外观模式可以包括基础模式和暗色模式等，还可以包括其他模式，系统的基础模式即为一般的浅色显示模式。

s306、客户端根据增量样式文件和暗色切换文件将目标主题的基础模式页面切换为暗色模式页面。

作为一种可实施的方式，s306具体可以为：

s3061、客户端将第一标识设置为第二值，第二值用于指示增量样式文件有效。

s3062、客户端根据增量样式文件对目标主题的基础模式页面的页面元素进行重绘，得到目标主题页面的暗色模式页面。

具体来说，当页面中页面元素的属性的改变并不影响它在文档流中的位置时(例如：背景颜色、边框颜色和显示或隐藏(visibility)等属性)，浏览器会将新属性赋予给元素并重新绘制它，这个过程称为重绘。增量样式文件为暗色模式的全量样式文件与基础模式的全量样式文件之间取值不同的属性对应的样式文件，因此增量样式文件仅包括二者属性值不同的属性，因此根据增量样式文件对目标主题的基础模式页面的页面元素进行重绘时，只需重绘页面元素的属性值不同的属性，即可得到目标主题页面的暗色模式页面，因此速度较快，可提高暗色模式在线切换的流畅度。

s3063、客户端显示目标主题页面的暗色模式页面。

s307、客户端确定需要将目标主题的暗色模式页面切换为基础模式页面。

同样地，本实施例中客户端确定需要进行基础模式切换，有两种可实施的方式：

方式一、客户端接收到基础模式切换请求，确定需要将目标主题的暗色模式页面切换为基础模式页面。

当用户要切换到基础模式时，可通过鼠标点击或手指触控点击当前主题页面上的模式切换按钮，客户端响应于用户的点击操作，接收到基础模式切换请求，接收到该基础模式切换请求，即可确定需要将当前主题页面从暗色模式切换为基础模式。

方式二、客户端可以监听系统当前的外观模式，若系统当前的外观模式为基础模式，确定需要将目标主题的暗色模式页面切换为基础模式页面。其中，系统的外观模式可以包括基础模式和暗色模式等，还可以包括其他模式，系统的基础模式即为一般的浅色显示模式。

s308、客户端将第一标识设置为第一值。

s309、客户端根据增量样式文件和基础模式的全量样式文件，对目标主题页面的暗色模式页面的页面元素进行重绘，得到目标主题页面的基础模式页面。

s310、客户端显示目标主题页面的基础模式页面。

以下为本申请装置实施例，可以用于执行本申请上述方法实施例。对于本申请装置实施例中未披露的细节，可参考本申请上述方法实施例。

图7为本发明实施例提供的一种页面模式切换装置的结构示意图，如图7所示，本实施例的装置可以包括：接收模块11、确定模块12和处理模块13，其中，接收模块11用于接收服务器发送的目标主题页面的页面数据，页面数据包括基础模式的全量样式文件、增量样式文件和暗色切换文件，增量样式文件为暗色模式的全量样式文件与基础模式的全量样式文件之间取值不同的属性对应的样式文件，暗色切换文件包括用于指示增量样式文件是否有效的第一标识。

确定模块12用于确定需要将目标主题的基础模式页面切换为暗色模式页面。

处理模块13用于根据增量样式文件和暗色切换文件将目标主题的基础模式页面切换为暗色模式页面。

可选的，确定模块12用于：接收到暗色模式切换请求，确定需要将目标主题的基础模式页面切换为暗色模式页面；或者，

监听系统当前的外观模式；

若系统当前的外观模式为暗色模式，确定需要将目标主题的基础模式页面切换为暗色模式页面。

可选的，处理模块13用于将第一标识设置为第二值，第二值用于指示增量样式文件有效，根据增量样式文件对目标主题的基础模式页面的页面元素进行重绘，得到目标主题页面的暗色模式页面，显示目标主题页面的暗色模式页面。

可选的，确定模块12还用于：确定需要将目标主题的暗色模式页面切换为基础模式页面。处理模块13还用于：将第一标识设置为第一值，第一值用于指示增量样式文件无效；根据增量样式文件和基础模式的全量样式文件，对目标主题页面的暗色模式页面的页面元素进行重绘，得到目标主题页面的基础模式页面；显示目标主题页面的基础模式页面。

可选的，增量样式文件包括全局增量样式文件和局部增量样式文件，全局增量样式文件为暗色模式的全量样式文件与基础模式的全量样式文件之间取值不同的所有属性对应的样式文件，局部增量样式文件为全局增量样式文件中组成目标主题页面的每个组件对应的样式文件。

可选的，确定模块12用于：接收到暗色模式切换请求，确定需要将目标主题的基础模式页面切换为暗色模式页面，暗色模式切换请求携带全局暗色模式指示或局部暗色模式指示和需要切换为暗色模式的目标组件的标识。

可选的，处理模块13用于：

若暗色模式切换请求携带全局暗色模式指示，根据全局增量样式文件和暗色切换文件将目标主题的基础模式页面切换为暗色模式页面；

若暗色模式切换请求携带局部暗色模式指示和需要切换为暗色模式的目标组件的标识，根据目标组件对应的局部增量样式文件和暗色切换文件，将目标组件对应的基础模式页面切换为暗色模式页面。

可选的，增量样式文件通过以下方式确定：

根据目标主题页面对应的基础模式变量表生成基础模式的全量样式文件，根据目标主题页面对应的暗色模式变量表生成暗色模式的全量样式文件，基础模式变量表和暗色模式变量表均包括目标主题页面的每个页面元素的属性和属性值。

将基础模式的全量样式文件和暗色模式的全量样式文件进行对比，从暗色模式的全量样式文件中取出与基础模式的全量样式文件中属性值不同的属性。

对取出的每个属性值不同的属性的前缀增加数据标识，根据增加数据标识的全部属性和属性值得到增量样式文件。

可选的，处理模块13还用于：在确定模块12确定需要将目标主题的基础模式页面切换为暗色模式页面之前，将第一标识设置为第一值，加载基础模式的全量样式文件，并显示基础模式的全量样式文件对应的目标主题的基础模式页面，第一值用于指示增量样式文件无效。

本发明实施例提供的装置，可执行上述方法实施例，其具体实现原理和技术效果，可参见上述方法实施例，本实施例此处不再赘述。

图8为本发明实施例提供的一种页面模式切换装置的结构示意图，如图8所示，本实施例的装置可以包括：接收模块21、获取模块22和发送模块23，其中，接收模块21用于接收客户端发送的目标主题页面请求，目标主题页面请求包括目标主题页面的标识。

获取模块22用于根据目标主题页面的标识获取目标主题页面的页面数据，页面数据包括基础模式的全量样式文件、增量样式文件和暗色切换文件，增量样式文件为暗色模式的全量样式文件与基础模式的全量样式文件之间取值不同的属性对应的样式文件，暗色切换文件包括用于指示增量样式文件是否有效的第一标识。

发送模块23用于向客户端发送页面数据。

可选的，获取模块22用于根据目标主题页面的标识，从预存的主题页面标识与页面数据的对应关系表中查找目标主题页面的页面数据。

可选的，增量样式文件包括全局增量样式文件和局部增量样式文件，全局增量样式文件为暗色模式的全量样式文件与基础模式的全量样式文件之间取值不同的所有属性对应的样式文件，局部增量样式文件为全局增量样式文件中组成目标主题页面的每个组件对应的样式文件。

可选的，增量样式文件通过以下方式确定：

根据目标主题页面对应的基础模式变量表生成基础模式的全量样式文件，根据目标主题页面对应的暗色模式变量表生成暗色模式的全量样式文件，基础模式变量表和暗色模式变量表均包括目标主题页面的每个页面元素的属性和属性值。

将基础模式的全量样式文件和暗色模式的全量样式文件进行对比，从暗色模式的全量样式文件中取出与基础模式的全量样式文件中属性值不同的属性。

对取出的每个属性值不同的属性的前缀增加数据标识，根据增加数据标识的全部属性和属性值得到增量样式文件。

本发明实施例提供的装置，可执行上述方法实施例，其具体实现原理和技术效果，可参见上述方法实施例，本实施例此处不再赘述。

需要说明的是，应理解以上装置的各个模块的划分仅仅是一种逻辑功能的划分，实际实现时可以全部或部分集成到一个物理实体上，也可以物理上分开。且这些模块可以全部以软件通过处理元件调用的形式实现；也可以全部以硬件的形式实现；还可以部分模块通过处理元件调用软件的形式实现，部分模块通过硬件的形式实现。例如，处理模块可以为单独设立的处理元件，也可以集成在上述装置的某一个芯片中实现，此外，也可以以程序代码的形式存储于上述装置的存储器中，由上述装置的某一个处理元件调用并执行以上处理模块的功能。其它模块的实现与之类似。此外这些模块全部或部分可以集成在一起，也可以独立实现。这里的处理元件可以是一种集成电路，具有信号的处理能力。在实现过程中，上述方法的各步骤或以上各个模块可以通过处理器元件中的硬件的集成逻辑电路或者软件形式的指令完成。

例如，以上这些模块可以是被配置成实施以上方法的一个或多个集成电路，例如：一个或多个特定集成电路(applicationspecificintegratedcircuit，asic)，或，一个或多个微处理器(digitalsignalprocessor，dsp)，或，一个或者多个现场可编程门阵列(fieldprogrammablegatearray，fpga)等。再如，当以上某个模块通过处理元件调度程序代码的形式实现时，该处理元件可以是通用处理器，例如中央处理器(centralprocessingunit，cpu)或其它可以调用程序代码的处理器。再如，这些模块可以集成在一起，以片上系统(system-on-a-chip，soc)的形式实现。

在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行计算机程序指令时，全部或部分地产生按照本发明实施例的流程或功能。计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(dsl))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，dvd)、或者半导体介质(例如固态硬盘solidstatedisk(ssd))等。

图9为本发明实施例提供的一种电子设备的结构示意图，如图9所示，本实施例的电子设备可以包括处理器31和存储器32，

其中，存储器32用于存储处理器31的可执行指令。

处理器31配置为经由执行可执行指令来执行上述方法实施例中的页面模式切换方法。

可选地，存储器32既可以是独立的，也可以跟处理器31集成在一起。

当存储器32是独立于处理器31之外的器件时，本实施例的电子设备还可以包括：

总线33，用于连接存储器32和处理器31。

可选地，本实施例的电子设备还可以包括：通信接口34，该通信接口34可以通过总线33与处理器31连接。

图10为本发明实施例提供的一种服务器的结构示意图，如图10所示，本实施例的服务器可以包括处理器41和存储器42，

其中，存储器42用于存储处理器41的可执行指令。

处理器41配置为经由执行可执行指令来执行上述方法实施例中的页面模式切换方法。

可选地，存储器42既可以是独立的，也可以跟处理器41集成在一起。

当存储器42是独立于处理器41之外的器件时，本实施例的服务器还可以包括：

总线43，用于连接存储器42和处理器41。

可选地，本实施例的服务器还可以包括：通信接口44，该通信接口44可以通过总线43与处理器41连接。

本申请还提供一种计算机可读存储介质，计算机可读存储介质中存储有计算机执行指令，当其在计算机上运行时，使得计算机执行如上述实施例的页面模式切换方法。

本申请实施例还提供一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现如上实施例中的页面模式切换方法。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必须针对的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。

尽管上面已经示出和描述了本发明的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本发明的限制，本领域的普通技术人员在本发明的范围内可以对上述实施例进行变化、修改、替换和变型。