搜索文件 /

黑暗模式

betway东盟体育app离子可以轻松更改应用的主题,包括支持深色方案。随着对本机应用中的暗模式的增长支持,开发人员现在正在寻找将其添加到他们的应用程序以支持用户偏好。

使用媒体查询

启用暗模式的第一种方法是使用 CSS媒体查询用户首选配色方案 。此媒体查询将挂钩用户设备的系统设置,并在启用暗模式时应用主题。


               @媒体
              
               
               更喜欢 - 颜色方案
               
              黑暗的
               的)
             
              {
             
              :根
             
              {
             
              / *黑暗模式变量去这里* /
             
              }
             
              }
复制 复制

目前,这 更喜欢 - 颜色方案 媒体查询有 有限的浏览器支持 ,因此用户无法在某些浏览器中使用此媒体查询应用的暗模式。但是,暗模式仍然可以通过使用a应用 CSS类逆后

CSS类逆后

作为不支持媒体查询的设备的回退方法,可以通过对CSS选择器进行样式并将类应用于文档主体来应用暗模式。


               @媒体
              
               
               更喜欢 - 颜色方案
               
              黑暗的
               的)
             
              {
             
              :根
             
              {
             
              / *黑暗模式变量去这里* /
             
              }
             
              }
             
              / *旧浏览器或手动模式的回退* /
             
              身体.Dark.
             
              {
             
              / *黑暗模式变量去这里* /
             
              }
复制 复制

与瞄准的变量 身体.Dark. 选择器,现在所需的一切是将类添加到 在应用程序中。这可以以各种方式完成,具体取决于您的应用程序的内置框架。

请注意,变量应在此示例中的两个位置。我们可以 使用JavaScript. 为了避免在两个地方设置变量。

结合JavaScript.

为了保留一次编写的CSS变量并避免在多个位置更新它们,可以通过使用JavaScript来组合回退和类来检查值 更喜欢 - 颜色方案 媒体查询和添加 黑暗的 课程如果偏好是 黑暗的 。这就是CSS看起来的样子:


              身体.Dark.
             
              {
             
              / *黑暗模式变量去这里* /
             
              }
复制 复制

请注意,上述变量仅在其中 身体.Dark. 选择器现在,和 更喜欢 - 颜色方案 媒体查询已被删除。

自动启用暗模式

在JavaScript中, 黑暗的 类可以添加到 通过检查文档是否与媒体查询匹配使用 matchmedia() 。这将使暗模式仍然基于用户偏好工作。


              //使用matchMedia检查用户首选项
             
              Const.
             优秀
              =
             窗户
              
              匹配媒体
              
              '(更喜欢 - 颜色方案:黑暗)'
              的)
              ;
             
              toglegledarktheme.
              
             优秀
              
             火柴
              的)
              ;
             
              //侦听更改prepers-color-scheme媒体查询
             优秀
              
              AddListener.
              
              
              MediaQuery.
              的)
             
              =>
             
              toglegledarktheme.
              
             MediaQuery.
              
             火柴
              的)
              的)
              ;
             
              //基于媒体查询匹配,添加或删除“暗”类
             
              功能
             
              toglegledarktheme.
              
              肩膀
              的)
             
              {
             文档
              
             身体
              
             类别列表
              
              拨动
              
              '黑暗的'
              
             肩膀
              的)
              ;
             
              }
复制 复制

提示:确保在下面查看Codepen 支持的浏览器 然后尝试在光和暗模式之间更改设备上的系统偏好。这是 如何在Windows 10上启用黑暗模式 如何在Mac上启用它

手动切换黑暗模式

除了打电话 toggledarktheme() 当应用程序加载以及媒体查询更改时, toggledarktheme() 可以通过应用程序调用功能,例如当用户更改切换时,在灯和黑暗主题之间切换:


              //查询用于在主题之间更改的切换
             
              Const.
             拨动
              =
             文档
              
              QuerySelector.
              
              '#themetoggle'
              的)
              ;
             
              //侦听切换检查/取消选中以在上切换黑暗类
             拨动
              
              addeventlistener.
              
              'IonChange'
              
             
              
              EV.
              的)
             
              =>
             
              {
             文档
              
             身体
              
             类别列表
              
              拨动
              
              '黑暗的'
              
             EV.
              
             细节
              
             检查
              的)
              ;
             
              }
              的)
              ;
             
              Const.
             优秀
              =
             窗户
              
              匹配媒体
              
              '(更喜欢 - 颜色方案:黑暗)'
              的)
              ;
             
              //侦听更改prepers-color-scheme媒体查询
             优秀
              
              AddListener.
              
              
              E.
              的)
             
              =>
             
              checktoggle.
              
             E.
              
             火柴
              的)
              的)
              ;
             
              //在应用加载时调用
             
              功能
             
              loadapp.
              
              的)
             
              {
             
              checktoggle.
              
             优秀
              
             火柴
              的)
              ;
             
              }
             
              //由媒体查询调用以检查/取消选中切换
             
              功能
             
              checktoggle.
              
              应答
              的)
             
              {
             拨动
              
             检查
              =
             应答
              ;
             
              }
复制 复制

调整系统UI组件

开发暗主题时,您可能会注意到某些系统UI组件无法正确调整为暗模式。要修复此问题,您需要指定 颜色方案 。看看 浏览器颜色方案的兼容性 有关交叉浏览器支持的详细信息。

虽然您可能主要是使用离子组件而不是仅使用本地组件,betway东盟体育app 颜色方案 也可以影响您的应用程序的方面,例如滚动条。为了使用 颜色方案 您需要将以下HTML添加到 您的申请:


                <
               荟萃
              
               姓名
                =
                
               颜色方案
                
              
               内容
                =
                
               光线暗
                
              
               />
复制 复制

这允许页面指示它呈现的颜色方案是呈现的。或者,您可以添加以下CSS以按元素执行此操作:


              颜色方案
              
             光线暗
              ;
复制 复制
默认滚动条 滚动条带 颜色方案
应用没有颜色方案“src=
用颜色方案应用“src=

有关 颜色方案 请参见 https://web.dev/color-scheme/

颜色方案 不适用于键盘。有关暗模式如何与键盘合作的详细信息,请参阅 键盘文档

betway东盟体育app离子黑暗主题

betway东盟体育app离子有一个推荐的主题,用于变量使用,以便根据运行应用程序的设备获得黑暗模式。它可以分解为以下部分:

  1. 更改默认值 betway东盟体育app离子颜色 对所有人 模式 补充黑暗的背景 身体.Dark. 选择器。
  2. 为黑暗主题设置变量 iOS. 设备。
  3. 为黑暗主题设置变量 m 设备。

可以将以下代码复制并粘贴到应用程序中以获取离子的黑暗主题。betway东盟体育app我们补充说 黑暗的 类中提到的使用JavaScript的文档主体 结合JavaScript. 部分。暗模式将不会启用直到 黑暗的 类被添加到文档正文中。

有关正在更改的变量的更多信息,包括可以添加以进一步自定义的其他变量,请参阅 主题


              / * *深色* ------------------------------------- */
             
              身体.Dark.
             
              {
             
              --ion-color-primary
              
             #428cff
              ;
             
              -  inion-color-primary-RGB
              
             66.
              
             140.
              
             255.
              ;
             
              - 颜色初级对比度
              
             #ffffff.
              ;
             
              -  oion-color-primary-contrast-RGB
              
             255.
              
             255.
              
             255.
              ;
             
              - 颜色仿生
              
             #3a7be0
              ;
             
              - 颜色 - 初级色彩
              
             #5598ff#5598ff
              ;
             
              -  oion-color-edueric
              
             #50c8ff
              ;
             
              -ion-color-secondary-RGB
              
             80
              
             200.
              
             255.
              ;
             
              - 太阳 - 二级对比
              
             #ffffff.
              ;
             
              -  oion-color-secondary-对比度-RGB
              
             255.
              
             255.
              
             255.
              ;
             
              - 彩色二级阴影
              
             #46b0e0.
              ;
             
              --ion-color-execondic-tint
              
             #62CEFF.
              ;
             
              - 彩色三级
              
             #6a64ff
              ;
             
              --ion-color-tertiary-RGB
              
             106.
              
             100.
              
             255.
              ;
             
              - 颜色 -  Tertiary  - 对比度
              
             #ffffff.
              ;
             
              -  oion-color-tertiary  - 对比度-RGB
              
             255.
              
             255.
              
             255.
              ;
             
              - 彩色三纹
              
             #5d58e0.
              ;
             
              - 颜色 -  TERTIAD-TINT
              
             #7974ff
              ;
             
              - 颜色成功
              
             #2fdf75
              ;
             
              ——ion-color-success-rgb
              
             47.
              
             223.
              
             117.
              ;
             
              - 颜色成功 - 对比度
              
             # 000000
              ;
             
              - 颜色成功 - 对比度-RGB
              
             0.
              
             0.
              
             0.
              ;
             
              - 颜色成功阴影
              
             #29c467
              ;
             
              - 颜色成功 - 色调
              
             #44e283.
              ;
             
              - 彩色警告
              
             #ffd534
              ;
             
              - 彩色警告 -  RGB
              
             255.
              
             213.
              
             52.
              ;
             
              - 阴性警告 - 对比度
              
             # 000000
              ;
             
              --ion-彩色警告对比度-RGB
              
             0.
              
             0.
              
             0.
              ;
             
              - 彩色警告遮荫
              
             #e0bb2e.
              ;
             
              --ion-彩色警告色调
              
             #ffd948
              ;
             
              - 阴性危险
              
             #ff4961
              ;
             
              - 彩色危险-RGB
              
             255.
              
             73.
              
             97.
              ;
             
              - 阴性危险 - 对比度
              
             #ffffff.
              ;
             
              - 阴性 - 危险 - 对比度-RGB
              
             255.
              
             255.
              
             255.
              ;
             
              - 阴性危险阴影
              
             #e04055
              ;
             
              - 阴性危险 - 色调
              
             #ff5b71
              ;
             
              - 阴性黑暗
              
             #f4f5f8
              ;
             
              -ion-color-arch-rgb
              
             244.
              
             245.
              
             248.
              ;
             
              - 阴性黑暗对比度
              
             # 000000
              ;
             
              -  oion-color-arport-contrast-RGB
              
             0.
              
             0.
              
             0.
              ;
             
              - 阴性暗阴影
              
             #d7d8da.
              ;
             
              - 颜色 - 暗色调
              
             #f5f6f9.
              ;
             
              - 彩色介质
              
             #989AA2
              ;
             
              -  inion-color-medium-RGB
              
             152.
              
             154.
              
             162.
              ;
             
              - 彩色中等对比度
              
             # 000000
              ;
             
              --ion-color-medium-contrast-RGB
              
             0.
              
             0.
              
             0.
              ;
             
              - 中色中间阴影
              
             #86888f
              ;
             
              - 彩色中等色调
              
             #a2a4ab.
              ;
             
              - 彩光
              
             #222428
              ;
             
              - 彩色光 -  RGB
              
             34.
              
             36.
              
             40
              ;
             
              - 彩色光对比度
              
             #ffffff.
              ;
             
              --ion-颜色光对比度-RGB
              
             255.
              
             255.
              
             255.
              ;
             
              - 彩色浅色阴影
              
             #1e2023
              ;
             
              - 彩色浅色色调
              
             #383a3e
              ;
             
              }
             
              / * * ios黑暗主题* ------------------------------------* /
             
              .ios body.dark.
             
              {
             
              -  ulion-background-color
              
             # 000000
              ;
             
              -ion-background-color-rgb
              
             0.
              
             0.
              
             0.
              ;
             
              -ion-text-color
              
             #ffffff.
              ;
             
              -ion-text-color-rgb
              
             255.
              
             255.
              
             255.
              ;
             
              -ion-color-step-50
              
             #0d0d0d.
              ;
             
              --ion-Color-Step-100
              
             #1a1a1a.
              ;
             
              -ion-color-step-150
              
             #262626
              ;
             
              -ion-color-step-200
              
             #333333
              ;
             
              --ion-color-step-250
              
             #404040
              ;
             
              -ion-color-step-300
              
             #4d4d4d.
              ;
             
              -ion-color-step-350
              
             # 595959
              ;
             
              --ion-color-step-400
              
             #666666
              ;
             
              -ion-color-step-450
              
             #737373
              ;
             
              -ion-color-step-500
              
             #808080
              ;
             
              --ion-color-step-550
              
             #8c8c8c.
              ;
             
              -ion-color-step-600
              
             #999999
              ;
             
              --ion-color-step-650
              
             #a6a6a6.
              ;
             
              -ion-color-step-700
              
             #b3b3b3
              ;
             
              -ion-color-step-750
              
             #bfbfbf.
              ;
             
              -ion-color-step-800
              
             #ccccc.
              ;
             
              -ion-color-step-850
              
             #d9d9d9.
              ;
             
              --ion-color-step-900
              
             #E6E6E6.
              ;
             
              -ion-color-step-950
              
             #f2f2f2
              ;
             
              -  Item-Background
              
             # 000000
              ;
             
              -ion卡背景
              
             # 1 c1c1d
              ;
             
              }
             
              。osite.dark离子模态
             
              {
             
              -  ulion-background-color
              
             
              var.
              
             --ion-Color-Step-100
              的)
              ;
             
              -ion-toolbar-背景
              
             
              var.
              
             -ion-color-step-150
              的)
              ;
             
              -ion-toolbar边界颜色
              
             
              var.
              
             --ion-color-step-250
              的)
              ;
             
              -  Item-Background
              
             
              var.
              
             -ion-color-step-150
              的)
              ;
             
              }
             
              / * *材料设计黑暗主题* -------------------------------------------------------  * /
             
              .md body.dark.
             
              {
             
              -  ulion-background-color
              
             #121212
              ;
             
              -ion-background-color-rgb
              
             18.
              
             18.
              
             18.
              ;
             
              -ion-text-color
              
             #ffffff.
              ;
             
              -ion-text-color-rgb
              
             255.
              
             255.
              
             255.
              ;
             
              ——ion-border-color
              
             #222222
              ;
             
              -ion-color-step-50
              
             #1e1e1e.
              ;
             
              --ion-Color-Step-100
              
             #2a2a2a
              ;
             
              -ion-color-step-150
              
             #363636
              ;
             
              -ion-color-step-200
              
             #414141
              ;
             
              --ion-color-step-250
              
             #4d4d4d.
              ;
             
              -ion-color-step-300
              
             # 595959
              ;
             
              -ion-color-step-350
              
             #656565
              ;
             
              --ion-color-step-400
              
             #717171
              ;
             
              -ion-color-step-450
              
             #7d7d7d.
              ;
             
              -ion-color-step-500
              
             #898989
              ;
             
              --ion-color-step-550
              
             #949494
              ;
             
              -ion-color-step-600
              
             #a0a0a0.
              ;
             
              --ion-color-step-650
              
             #acacac.
              ;
             
              -ion-color-step-700
              
             #b8b8b8
              ;
             
              -ion-color-step-750
              
             #c4c4c4
              ;
             
              -ion-color-step-800
              
             #d0d0d0.
              ;
             
              -ion-color-step-850
              
             #dbdbdb.
              ;
             
              --ion-color-step-900
              
             #e7e7e7.
              ;
             
              -ion-color-step-950
              
             #f3f3f3
              ;
             
              -  Item-Background
              
             #1e1e1e.
              ;
             
              -ion-toolbar-背景
              
             #1f1f1f
              ;
             
              -  ion tab  - 标签 - 背景
              
             #1f1f1f
              ;
             
              -ion卡背景
              
             #1e1e1e.
              ;
             
              }
复制 复制
以前的
主题
下一个
高级主题
Baidu