1.本发明涉及电子设备技术领域，尤其是一种页面样式切换方法、装置以及存储介质和电子设备。
背景技术：2.暗黑(深色)模式，给用户带来了两个好处：一是暗黑(深色)模式下手机电池，电量消耗的更少了；二是在暗黑(深色)模式下降低了手机亮度减轻了眼睛疲劳，可以改善视力和强光下的人的可视性，并可帮助人体释放褪黑色激素，更有利于改善睡眠，因而，目前不同操作系统的移动终端都相继尝试推出暗黑模式。在传统方案中，需要为不同模式分别设计并维护一套ui界面，较为繁琐。
技术实现要素：3.为克服上述现有技术存在的不足，本发明之目的在于提供一种页面样式切换方法、装置以及存储介质和电子设备，以适配高亮(普通)模式和暗黑(深色)模式下不同类型的主题色，提高用户视觉体验。
4.为达到上述目的，本发明提供一种页面样式切换方法，包括以下步骤：
5.对前端页面中的页面元素进行全局变量设置；
6.响应目标页面下由第一背景模式切换至第二背景模式的操作，确定第二背景模式下各全局变量值；
7.基于确定的全局变量确定第二背景模式下的页面样式信息；
8.根据确定的第二背景模式的页面样式信息，加载所述目标页面的页面元素。
9.可选地，在本发明上述各方法实施例中，在所述对前端页面中的页面元素进行全局变量设置的步骤中，设置三大类型主题颜色全局变量，包括背景色全局变量、颜色全局变量以及纯色图标颜色全局变量，并将各全局变量值默认赋值为第一背景模式或第二背景模式下对应的值。
10.可选地，在本发明上述各方法实施例中，在所述对前端页面中的页面元素进行全局变量设置的步骤中，通过css原生变量在页面的样式表中声明两种模式下的全局变量。
11.可选地，在本发明上述各方法实施例中，在所述响应目标页面下由第一背景模式切换至第二背景模式的操作，确定第二背景模式下各全局变量值步骤中，通过媒体查询判断当前模式，根据确定的模式确定全局变量值。
12.可选地，在本发明上述各方法实施例中，所述基于确定的全局变量确定第二背景模式下的页面样式信息步骤包括：
13.对所述目标页面中的文字颜色样式信息，引用所确定的颜色全局变量；
14.对目标页面中的背景色样式信息，引用所确定的背景色全局变量；
15.对所述目标页面中的纯色图标，引用所确定的纯色图标颜色全局变量。
16.可选地，在本发明上述各方法实施例中，所述方法还包括：
17.对于目标页面中的非纯色图标或图片，通过设置反相色与色相旋转实现两种模式下图片视觉效果的适配。
18.可选地，在本发明上述各方法实施例中，所述对于目标页面中的非纯色图标或图片，通过设置反相色与色相旋转实现两种模式下图片视觉效果的适配步骤包括：
19.通过第一类滤镜功能，将所述目标页面中的非纯色图标或图片设置为反相色；
20.通过第二类滤镜功能，对设置反相色后的非纯色图标或图片执行色相旋转，以消除第一类滤镜功能对非纯色图标或图片的原始彩色主题的影响。
21.为达到上述目的，本发明还提供一种页面样式切换装置，包括：
22.全局变量设置模块，用于对前端页面中的页面元素进行全局变量设置；
23.背景模式确定模块，用于响应目标页面下由第一背景模式切换至第二背景模式的操作，确定第二背景模式下各全局变量值；
24.页面样式信息确定模块，用于基于确定的全局变量确定第二背景模式的页面样式信息；
25.切换加载模块，用于根据确定的第二背景模式的页面样式信息，加载所述目标页面的页面元素。
26.为达上述目的，本发明还提供一种存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述页面样式切换方法的步骤。
27.为达上述目的，本发明还提供一种电子设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现上述页面样式切换方法的步骤。
28.与现有技术相比，本发明一种页面样式切换方法、装置以及存储介质和电子设备，通过对不同模式下的字体颜色、页面背景、图标和图片设计两套主题规范，在样式表中定义三大类型主题颜色全局变量，并根据媒体查询判断当前模式，从而引用当前模式下的主题，使得切换后的页面的主题和字体和图片等元素能够快速适配系统模式，提高用户视觉体验。
29.下面通过附图和实施例，对本发明的技术方案做进一步的详细描述。
附图说明
30.通过结合附图对本发明实施例进行更详细的描述，本发明的上述以及其他目的、特征和优势将变得更加明显。附图用来提供对本发明实施例的进一步理解，并且构成说明书的一部分，与本发明实施例一起用于解释本发明，并不构成对本发明的限制。在附图中，相同的参考标号通常代表相同部件或步骤。
31.图1是本发明一示例性实施例提供的一种页面样式切换方法的流程示意图；
32.图2是本发明一示例性实施例提供的一种页面样式切换装置的结构示意图
33.图3是本发明一示例性实施例提供的电子设备的结构。
具体实施方式
34.下面，将参考附图详细地描述根据本发明的示例实施例。显然，所描述的实施例仅仅是本发明的一部分实施例，而不是本发明的全部实施例，应理解，本发明不受这里描述的
示例实施例的限制。
35.应注意到：除非另外具体说明，否则在这些实施例中阐述的部件和步骤的相对布置、数字表达式和数值不限制本发明的范围。
36.本领域技术人员可以理解，本发明实施例中的“第一”、“第二”等术语仅用于区别不同步骤、设备或模块等，既不代表任何特定技术含义，也不表示它们之间的必然逻辑顺序。
37.还应理解，在本发明实施例中，“多个”可以指两个或两个以上，“至少一个”可以指一个、两个或两个以上。
38.还应理解，对于本发明实施例中提及的任一部件、数据或结构，在没有明确限定或者在前后文给出相反启示的情况下，一般可以理解为一个或多个。
39.另外，本发明中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，a和/或b，可以表示：单独存在a，同时存在a和b，单独存在b这三种情况。另外，本发明中字符“/”，一般表示前后关联对象是一种“或”的关系。
40.还应理解，本发明对各个实施例的描述着重强调各个实施例之间的不同之处，其相同或相似之处可以相互参考，为了简洁，不再一一赘述。
41.同时，应当明白，为了便于描述，附图中所示出的各个部分的尺寸并不是按照实际的比例关系绘制的。
42.以下对至少一个示例性实施例的描述实际上仅仅是说明性的，决不作为对本发明及其应用或使用的任何限制。
43.对于相关领域普通技术人员已知的技术、方法和设备可能不作详细讨论，但在适当情况下，技术、方法和设备应当被视为说明书的一部分。
44.应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步讨论。
45.本发明实施例可以应用于终端设备、计算机系统、服务器等电子设备，其可与众多其它通用或专用计算系统环境或配置一起操作。适于与终端设备、计算机系统、服务器等电子设备一起使用的众所周知的终端设备、计算系统、环境和/或配置的例子包括但不限于：个人计算机系统、服务器计算机系统、瘦客户机、厚客户机、手持或膝上设备、基于微处理器的系统、机顶盒、可编程消费电子产品、网络个人电脑、小型计算机系统﹑大型计算机系统和包括上述任何系统的分布式云计算技术环境，等等。
46.终端设备、计算机系统、服务器等电子设备可以在由计算机系统执行的计算机系统可执行指令(诸如程序模块)的一般语境下描述。通常，程序模块可以包括例程、程序、目标程序、组件、逻辑、数据结构等等，它们执行特定的任务或者实现特定的抽象数据类型。计算机系统/服务器可以在分布式云计算环境中实施，分布式云计算环境中，任务是由通过通信网络链接的远程处理设备执行的。在分布式云计算环境中，程序模块可以位于包括存储设备的本地或远程计算系统存储介质上。
47.示例性方法
48.图1是本发明一示例性实施例提供的一种页面样式切换方法的流程示意图。本实施例可应用在电子设备上，如图1所示，本发明一种页面样式切换方法，包括以下步骤：
49.步骤101，对前端页面中的页面元素进行全局变量设置，得到全局变量。
50.本发明实施例中，所述前端页面可以是各领域的前端界面，包括web页面或各种app页面等，所述页面元素可以为文本元素，也可以为图片元素，所述全局变量设置是指根据页面元素中的颜色变量对页面元素进行全局设定。
51.在本发明实施例中，设定三大类型主题颜色全局变量，分别为主题库(背景色全局变量)，颜色样式库(颜色全局变量)，图片样式库(纯色icon小图标颜色全局变量)，并将各变量值默认赋值为第一背景模式或第二背景模式下的值，所述第一背景模式和第二背景模式，不同的背景模式，背景模式包括暗黑模式和常规模式，即，第一背景模式为暗黑模式时，第二背景模式为常规模式，或者，第一背景模式为常规模式，第二背景模式为暗黑模式。
52.在本发明实施例，可以利用css(cascading style sheets，层叠样式表)对前端页面中的页面元素进行全局变量设置。所述css层叠样式表(cascading style sheets)是一种用来表现html(标准通用标记语言的一个应用)或xml(标准通用标记语言的一个子集)等文件样式的计算机语言，css不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。也就是说，通过css原生变量在页面的样式表中声明两种模式下的全局css变量，并预先赋值为第一背景模式或第二背景模式的css变量值。
53.步骤102，响应由第一背景模式切换至第二背景模式的操作，确定第二背景模式，确定各全局变量对应的值。
54.在本步骤中，在接收到由第一背景模式切换至第二背景模式的操作指令后，先通过媒体查询判断应用本发明的当前设备的当前模式，其中目标页面为在接收到模式切换指令时，终端设备正在显示的当前页面，目标页面上显示有多个页面元素，页面元素可以为文本元素，也可以为图片元素，其中，各个页面元素以相同或不同的页面样式进行显示，在本发明实施例中，页面样式信息包括以下信息中的至少一种：背景颜色信息、文字颜色信息、图标颜色信息。
55.在本发明实施例中，通过媒体查询@media(prefers-color-scheme:属性值)判断当前设备处于哪种模式下，根据不同模式给全局变量赋予不同的值，例如，以当前设备为智能手机为例，假设第一背景模式为普通模式，第二背景模式为暗黑模式，当用户通过操作切换了将智能手机从常规模式切换为暗黑模式，则判断目标页面当前切换的第二背景模式为暗黑模式，则引用暗黑模式设置的三大类型的主题颜色全局变量，背景色全局变量、颜色全局变量以及纯色图标颜色全局变量。
56.相比较使用javascript判断系统模式，本发明实施例通过css媒体查询适配两种模式，不需要编写javascript，只关注于css编写即可，坚持ui样式采用css样式实现，用户的行为采用javascript的实现。
57.本发明通过样式库对语义颜色与实际色值做映射存储，并对颜色实现了统一管理，样式库方便业务和各组件快速调整ui样式，适配深色模式
58.步骤103，基于确定的全局变量确定第二背景模式的页面样式信息。
59.在本发明实施例中，对于不同的页面样式信息，其确定的方式有所不同。具体地，步骤103进一步包括：
60.步骤103-1，对目标页面中的文字颜色样式信息，引用所确定的颜色全局变量。
61.具体地，对于页面元素为文本元素的情况，其页面样式信息为文字颜色样式信息，即页面字体颜色信息，则引用步骤102所确定的字体的全局变量，即颜色全局变量作为当前
模式下的页面字体颜色信息。具体地，可通过样式表css中提供的var()函数来读取颜色全局变量，并对第二背景模式的颜色样式信息，即页面字体颜色赋值，该值就是通过var()函数读取的变量，该变量在不同模式下等于不同的颜色值。
62.可选地，通过var()函数中传递第二个参数defaultcolor，以便var()函数读取的颜色全局变量值为不存在时，使用该var()函数的第二个参数作为颜色样式信息的默认值。也就是说，当从第一背景模式切换到第二背景模式，某个主题颜色全局变量无法确定时，例如目标页面中第一背景模式(普通模式)下有个文本元素的字体颜色为“蓝色”，而第二背景模式(暗黑模式)规范中并没有该颜色，那么步骤102则无法确定第二背景模式下该颜色全局变量的值，此时，在步骤103中，当通过var()函数来读取该颜色全局变量时，则该全局变量值会不存在，此时则会使用该var()函数的第二个参数作为颜色全局变量的默认值。
63.步骤103-2，对目标页面中的背景色样式信息，引用所确定的背景色全局变量。
64.在本发明实施例中，对于第二背景模式下背景色样式信息的确定与文字颜色样式信息的确定方法相同，在此不予赘述。
65.步骤103-3，对所述目标页面中的纯色图标，引用所确定的纯色图标颜色全局变量。
66.在本发明实施例中，对于目标页面中的统一采用iconfont中的svg形式，颜色引用步骤102确定的纯色图标颜色全局变量。其确定方法与步骤103-1的方法相同，在此不予赘述。
67.在本发明实施例中，通过将纯色icon图标转换成svg的形式，通过修改css就可以实现icon图标ui的变化，不需要多设计一套icon图标，减少了时间和人力成本，非常便于后期维护。
68.步骤104，根据确定的第二背景模式的页面样式信息，加载所述目标页面的页面元素。
69.在该步骤中，在基于确定的全局变量确定第二背景模式的页面样式信息后，则加载所述目标页面的页面元素，实现从第一背景模式到第二背景模式的切换。
70.可选地，本发明一种页面样式切换方法还包括：
71.步骤105，对于目标页面中的非纯色图标或图片，通过设置反相色与色相旋转实现两种模式下图片视觉效果的适配。
72.在目标页面的页面元素中，包括文本元素与图片元素，其中图片元素既包含图标icon元素，也包含图片元素，图标icon元素中又可以包含纯色图标icon和非纯色图标icon，其中，非纯色图标icon例如有渐变色的图标icon或者彩色的图标icon，对于纯色图标icon在不同模式下的适配可以通过引用定义好的纯色图标颜色全局变量，而对于非纯色图标和图片的适配则要采用其他方法。
73.具体地，步骤105包括：
74.步骤105-1，通过第一类滤镜功能，将所述目标页面中的非纯色图标或图片设置为反相色；
75.在本发明实施例中，可利用css3的filter属性，通过设置filter：invert(1)来设置反相色，简单地说，以常规模式到暗黑模式切换为例，也就是将白纸黑字变成黑纸白字。
但是这样的话，彩色也会跟着反向，比如红色类的元素会变成绿色，而切换想要的效果是暗黑(深色)模式下保持图片的基础色的同时去掉白色背景，所以还需要尽量保留原始图片的彩色的主题。
76.步骤105-2，通过第二类滤镜功能，对设置反相色后的非纯色图标或图片执行色相旋转，以消除第一类滤镜功能对非纯色图标或图片的原始彩色主题的影响。
77.在本发明实施例中，可通过设置filter(滤镜)的第二个属性hue-rotate来实现色相旋转，该属性只对彩色生效。所以图片的黑白色还是可以很好地保持原样。本发明通过设置filter:invert(1)hue-rotate(180deg)，即反相后，再进行180度的色相旋转就能保留图片的原色。
78.可见，本发明实施例通过采用css3中的滤镜给图片设置反相色和色相旋转实现两种模式下图片视觉效果的适配,相比在页面中加载两套主题的图片来说，可使页面体积明显减少。
79.示例性装置
80.图2是本发明一示例性实施例提供的一种页面样式切换装置的结构示意图。如图2所示，本实施例一种页面样式切换装置，包括：
81.全局变量设置模块201，用于对前端页面中的页面元素进行全局变量设置，得到全局变量。
82.本发明实施例中，所述前端页面可以是各领域的前端界面，包括web页面或各种app页面等，所述页面元素可以为文本元素，也可以为图片元素，所述全局变量设置是指根据页面元素中的颜色变量对页面元素进行全局设定。
83.在本发明实施例中，设定三大类型主题颜色全局变量，分别为主题库(背景色全局变量)，颜色样式库(颜色全局变量)，图片样式库(纯色icon小图标颜色全局变量)，并将各变量值默认赋值为第一背景模式或第二背景模式下的值，所述第一背景模式和第二背景模式，不同的背景模式，背景模式包括暗黑模式和常规模式，即，第一背景模式为暗黑模式时，第二背景模式为常规模式，或者，第一背景模式为常规模式，第二背景模式为暗黑模式。
84.在本发明实施例，可以利用css(cascading style sheets，层叠样式表)对前端页面中的页面元素进行全局变量设置。所述css层叠样式表(cascading style sheets)是一种用来表现html(标准通用标记语言的一个应用)或xml(标准通用标记语言的一个子集)等文件样式的计算机语言，css不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。也就是说，通过css原生变量在页面的样式表中声明两种模式下的全局css变量，并预先赋值为第一背景模式或第二背景模式的css变量值。
85.背景模式确定模块202，用于响应由第一背景模式切换至第二背景模式的操作，确定第二背景模式，确定各全局变量对应的值。
86.在本步骤中，背景模式确定模块202在接收到由第一背景模式切换至第二背景模式的操作指令后，先通过媒体查询判断应用本发明的当前设备的当前模式，其中目标页面为在接收到模式切换指令时，终端设备正在显示的当前页面，目标页面上显示有多个页面元素，页面元素可以为文本元素，也可以为图片元素，其中，各个页面元素以相同或不同的页面样式进行显示，在本发明实施例中，页面样式信息包括以下信息中的至少一种：背景颜色信息、文字颜色信息、图标颜色信息。
87.在本发明实施例中，通过媒体查询@media(prefers-color-scheme:属性值)判断当前设备处于哪种模式下，根据不同模式给全局变量赋予不同的值，例如，以当前设备为智能手机为例，假设第一背景模式为普通模式，第二背景模式为暗黑模式，当用户通过操作切换了将智能手机从常规模式切换为暗黑模式，则判断目标页面当前切换的第二背景模式为暗黑模式，则引用暗黑模式设置的三大类型的主题颜色全局变量，背景色全局变量、颜色全局变量以及纯色图标颜色全局变量。
88.页面样式信息确定模块203，用于基于确定的全局变量确定第二背景模式的页面样式信息。
89.在本发明实施例中，对于不同的页面样式信息，其确定的方式有所不同。具体地，页面样式信息确定模块203进一步包括：
90.文字颜色样式信息确定单元，用于对目标页面中的文字颜色样式信息，引用所确定的颜色全局变量。
91.具体地，对于页面元素为文本元素的情况，其页面样式信息为文字颜色样式信息，即页面字体颜色信息，则引用背景模式确定模块202所确定的字体的全局变量，即颜色全局变量作为当前模式下的页面字体颜色信息。具体地，可通过样式表css中提供的var()函数来读取颜色全局变量，并对第二背景模式的颜色样式信息，即页面字体颜色赋值，该值就是通过var()函数读取的变量，该变量在不同模式下等于不同的颜色值。
92.可选地，通过var()函数中传递第二个参数defaultcolor，以便var()函数读取的颜色全局变量值为不存在时，使用该var()函数的第二个参数作为颜色样式信息的默认值。也就是说，当从第一背景模式切换到第二背景模式，某个主题颜色全局变量无法确定时，例如目标页面中第一背景模式(普通模式)下有个文本元素的字体颜色为“蓝色”，而第二背景模式(暗黑模式)规范中并没有该颜色，那么背景模式确定模块202则无法确定第二背景模式下该颜色全局变量的值，此时，在页面样式信息确定模块203中，当通过var()函数来读取该颜色全局变量时，则该全局变量值会不存在，此时则会使用该var()函数的第二个参数作为颜色全局变量的默认值。
93.背景色样式信息确定单元，用于对目标页面中的背景色样式信息，引用所确定的背景色全局变量。
94.在本发明实施例中，对于第二背景模式下背景色样式信息的确定与文字颜色样式信息的确定方法相同，在此不予赘述。
95.纯色图标颜色样式信息确定单元，用于对所述目标页面中的纯色图标，引用所确定的纯色图标颜色全局变量。
96.在本发明实施例中，对于目标页面中的统一采用iconfont中的svg形式，颜色引用背景模式确定模块202确定的纯色图标颜色全局变量。其确定方法与文字颜色样式信息确定单元的方法相同，在此不予赘述。
97.切换加载模块204，用于根据确定的第二背景模式的页面样式信息，加载所述目标页面的页面元素。
98.在该步骤中，在基于确定的全局变量确定第二背景模式的页面样式信息后，则加载所述目标页面的页面元素，实现从第一背景模式到第二背景模式的切换。
99.可选地，本发明一种页面样式切换方法还包括：
100.图片适配模块205，用于对目标页面中的非纯色图标或图片，通过设置反相色与色相旋转实现两种模式下图片视觉效果的适配。
101.在目标页面的页面元素中，包括文本元素与图片元素，其中图片元素既包含图标icon元素，也包含图片元素，图标icon元素中又可以包含纯色图标icon和非纯色图标icon，其中，非纯色图标icon例如有渐变色的图标icon或者彩色的图标icon，对于纯色图标icon在不同模式下的适配可以通过引用定义好的纯色图标颜色全局变量，而对于非纯色图标和图片的适配则要采用其他方法。
102.具体地，图片适配模块205包括：
103.反相色设置单元，用于通通过第一类滤镜功能，将所述目标页面中的非纯色图标或图片设置为反相色；
104.在本发明实施例中，反相色设置单元利用css3的filter属性，通过设置filter：invert(1)来设置反相色，简单地说，以常规模式到暗黑模式切换为例，也就是将白纸黑字变成黑纸白字。但是这样的话，彩色也会跟着反向，比如红色类的元素会变成绿色，而切换想要的效果是暗黑(深色)模式下保持图片的基础色的同时去掉白色背景，所以还需要尽量保留原始图片的彩色的主题。
105.色相旋转单元，用于对设置反相色后的非纯色图标或图片执行色相旋转，以消除第一类滤镜功能对非纯色图标或图片的原始彩色主题的影响。
106.在本发明实施例中，可通过设置filter(滤镜)的第二个属性hue-rotate来实现色相旋转，该属性只对彩色生效。所以图片的黑白色还是可以很好地保持原样。本发明通过设置filter:invert(1)hue-rotate(180deg)，即反相后，再进行180度的色相旋转就能保留图片的原色。
107.示例性电子设备
108.图3是本发明一示例性实施例提供的电子设备的结构。该电子设备可以是第一设备和第二设备中的任一个或两者、或与它们独立的单机设备，该单机设备可以与第一设备和第二设备进行通信，以从它们接收所采集到的输入信号。图3图示了根据本公开实施例的电子设备的框图。如图3所示，电子设备包括一个或多个处理器31和存储器32。
109.处理器31可以是中央处理单元(cpu)或者具有数据处理能力和/或指令执行能力的其他形式的处理单元，并且可以控制电子设备中的其他组件以执行期望的功能。
110.存储器32可以包括一个或多个计算机程序产品，所述计算机程序产品可以包括各种形式的计算机可读存储介质，例如易失性存储器和/或非易失性存储器。所述易失性存储器例如可以包括随机存取存储器(ram)和/或高速缓冲存储器(cache)等。所述非易失性存储器例如可以包括只读存储器(rom)、硬盘、闪存等。在所述计算机可读存储介质上可以存储一个或多个计算机程序指令，处理器31可以运行所述程序指令，以实现上文所述的本公开的各个实施例的软件程序的页面样式切换方法以及/或者其他期望的功能。在一个示例中，电子设备还可以包括：输入装置33和输出装置34，这些组件通过总线系统和/或其他形式的连接机构(未示出)互连。
111.此外，该输入装置33还可以包括例如键盘、鼠标等等。
112.该输出装置34可以向外部输出各种信息。该输出设备34可以包括例如显示器、扬声器、打印机、以及通信网络及其所连接的远程输出设备等等。
113.当然，为了简化，图3中仅示出了该电子设备中与本公开有关的组件中的一些，省略了诸如总线、输入/输出接口等等的组件。除此之外，根据具体应用情况，电子设备还可以包括任何其他适当的组件。
114.示例性计算机程序产品和计算机可读存储介质
115.除了上述方法和设备以外，本公开的实施例还可以是计算机程序产品，其包括计算机程序指令，所述计算机程序指令在被处理器运行时使得所述处理器执行本说明书上述“示例性方法”部分中描述的根据本公开各种实施例的页面样式切换方法中的步骤。
116.所述计算机程序产品可以以一种或多种程序设计语言的任意组合来编写用于执行本公开实施例操作的程序代码，所述程序设计语言包括面向对象的程序设计语言，诸如java、c++等，还包括常规的过程式程序设计语言，诸如“c”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。
117.此外，本公开的实施例还可以是计算机可读存储介质，其上存储有计算机程序指令，所述计算机程序指令在被处理器运行时使得所述处理器执行本说明书上述“示例性方法”部分中描述的根据本公开各种实施例的页面样式切换方法中的步骤。
118.所述计算机可读存储介质可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以包括但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(ram)、只读存储器(rom)、可擦式可编程只读存储器(eprom或闪存)、光纤、便携式紧凑盘只读存储器(cd-rom)、光存储器件、磁存储器件、或者上述的任意合适的组合。
119.以上结合具体实施例描述了本公开的基本原理，但是，需要指出的是，在本公开中提及的优点、优势、效果等仅是示例而非限制，不能认为这些优点、优势、效果等是本公开的各个实施例必须具备的。另外，上述公开的具体细节仅是为了示例的作用和便于理解的作用，而非限制，上述细节并不限制本公开为必须采用上述具体的细节来实现。
120.本说明书中各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似的部分相互参见即可。对于系统实施例而言，由于其与方法实施例基本对应，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
121.本公开中涉及的器件、装置、设备、系统的方框图仅作为例示性的例子并且不意图要求或暗示必须按照方框图示出的方式进行连接、布置、配置。如本领域技术人员将认识到的，可以按任意方式连接、布置、配置这些器件、装置、设备、系统。诸如“包括”、“包含”、“具有”等等的词语是开放性词汇，指“包括但不限于”，且可与其互换使用。这里所使用的词汇“或”和“和”指词汇“和/或”，且可与其互换使用，除非上下文明确指示不是如此。这里所使用的词汇“诸如”指词组“诸如但不限于”，且可与其互换使用。
122.可能以许多方式来实现本公开的方法和装置。例如，可通过软件、硬件、固件或者软件、硬件、固件的任何组合来实现本公开的方法和装置。用于所述方法的步骤的上述顺序仅是为了进行说明，本公开的方法的步骤不限于以上具体描述的顺序，除非以其它方式特
别说明。此外，在一些实施例中，还可将本公开实施为记录在记录介质中的程序，这些程序包括用于实现根据本公开的方法的机器可读指令。因而，本公开还覆盖存储用于执行根据本公开的方法的程序的记录介质。
123.还需要指出的是，在本公开的装置、设备和方法中，各部件或各步骤是可以分解和/或重新组合的。这些分解和/或重新组合应视为本公开的等效方案。提供所公开的方面的以上描述以使本领域的任何技术人员能够做出或者使用本公开。对这些方面的各种修改对于本领域技术人员而言是非常显而易见的，并且在此定义的一般原理可以应用于其他方面而不脱离本公开的范围。因此，本公开不意图被限制到在此示出的方面，而是按照与在此公开的原理和新颖的特征一致的最宽范围。
124.为了例示和描述的目的已经给出了以上描述。此外，此描述不意图将本公开的实施例限制到在此公开的形式。尽管以上已经讨论了多个示例方面和实施例，但是本领域技术人员将认识到其某些变型、修改、改变、添加和子组合。
技术特征：1.一种页面样式切换方法，包括以下步骤：对前端页面中的页面元素进行全局变量设置；响应目标页面下由第一背景模式切换至第二背景模式的操作，确定第二背景模式下各全局变量值；基于确定的全局变量确定第二背景模式下的页面样式信息；根据确定的第二背景模式的页面样式信息，加载所述目标页面的页面元素。2.如权利要求1所述的页面样式切换方法，其特征在于，在所述对前端页面中的页面元素进行全局变量设置的步骤中，设置三大类型主题颜色全局变量，包括背景色全局变量、颜色全局变量以及纯色图标颜色全局变量，并将各全局变量值默认赋值为第一背景模式或第二背景模式下对应的值。3.如权利要求2所述的页面样式切换方法，其特征在于：在所述对前端页面中的页面元素进行全局变量设置的步骤中，通过css原生变量在页面的样式表中声明两种模式下的全局变量。4.如权利要求2所述的页面样式切换方法，其特征在于：在所述响应目标页面下由第一背景模式切换至第二背景模式的操作，确定第二背景模式下各全局变量值步骤中，通过媒体查询判断当前模式，根据确定的模式确定全局变量值。5.如权利要求2所述的页面样式切换方法，其特征在于，所述基于确定的全局变量确定第二背景模式下的页面样式信息步骤包括：对所述目标页面中的文字颜色样式信息，引用所确定的颜色全局变量；对目标页面中的背景色样式信息，引用所确定的背景色全局变量；对所述目标页面中的纯色图标，引用所确定的纯色图标颜色全局变量。6.如权利要求5所述的页面样式切换方法，其特征在于，所述方法还包括：对于目标页面中的非纯色图标或图片，通过设置反相色与色相旋转实现两种模式下图片视觉效果的适配。7.如权利要求6所述的页面样式切换方法，其特征在于，所述对于目标页面中的非纯色图标或图片，通过设置反相色与色相旋转实现两种模式下图片视觉效果的适配步骤包括：通过第一类滤镜功能，将所述目标页面中的非纯色图标或图片设置为反相色；通过第二类滤镜功能，对设置反相色后的非纯色图标或图片执行色相旋转，以消除第一类滤镜功能对非纯色图标或图片的原始彩色主题的影响。8.一种页面样式切换装置，包括：全局变量设置模块，用于对前端页面中的页面元素进行全局变量设置；背景模式确定模块，用于响应目标页面下由第一背景模式切换至第二背景模式的操作，确定第二背景模式下各全局变量值；页面样式信息确定模块，用于基于确定的全局变量确定第二背景模式的页面样式信息；切换加载模块，用于根据确定的第二背景模式的页面样式信息，加载所述目标页面的页面元素。9.一种存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至7任意一项所述页面样式切换方法的步骤。
10.一种电子设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至7任意一项所述页面样式切换方法的步骤。
技术总结本发明实施例公开了一种页面样式切换方法、装置以及存储介质和电子设备，其中方法包括：对前端页面中的页面元素进行全局变量设置；响应目标页面下由第一背景模式切换至第二背景模式的操作，确定第二背景模式下各全局变量值；基于确定的全局变量确定第二背景模式下的页面样式信息；根据确定的第二背景模式的页面样式信息，加载所述目标页面的页面元素。加载所述目标页面的页面元素。加载所述目标页面的页面元素。
技术研发人员：马丽
受保护的技术使用者：北京金堤科技有限公司
技术研发日：2022.07.11
技术公布日：2022/11/1
