黑暗的模式
betway东盟体育app离子可以很容易地改变应用程序的主题，包括支持深色方案。随着本地应用对暗模式的支持越来越多，开发者现在希望将其添加到自己的应用中，以支持用户的偏好。
使用媒体查询
启用暗模式的第一种方法是使用 CSS媒体查询用户的首选配色方案 ．这个媒体查询将连接到用户设备的系统设置中，并在启用暗模式时应用主题。
@media
（
prefers-color-scheme
：
黑暗
）
｛
:根
｛
/*暗模式变量到这里*/
｝
｝
目前,
prefers-color-scheme
媒体查询
有限的浏览器支持
，因此用户将无法从使用该媒体查询在某些浏览器中的暗模式中受益。但是，暗模式仍然可以使用
CSS类回退
．
CSS类回退
作为不支持媒体查询的设备的后备方法，可以通过样式化CSS选择器并将类应用于文档主体来应用黑暗模式。
@media
（
prefers-color-scheme
：
黑暗
）
｛
:根
｛
/*暗模式变量到这里*/
｝
｝
/*返回旧浏览器或手动模式*/
body.dark
｛
/*暗模式变量到这里*/
｝
变量的目标是
body.dark
选择器，现在需要做的就是将类添加到
身体< >
这可以通过多种方式实现，这取决于你的应用程序是如何构建的。
注意，在这个例子中变量应该在两个地方。我们可以 使用JavaScript 为了避免在两个地方设置变量。
结合JavaScript
为了一次性写入CSS变量并避免在多个地方更新它们，可以使用JavaScript来组合回退和类来检查
prefers-color-scheme
媒体查询和添加
黑暗
类，如果首选项为
黑暗
．下面是CSS的样子:
body.dark
｛
/*暗模式变量到这里*/
｝
注意，上面的变量只在
body.dark
选择器，然后
prefers-color-scheme
媒体查询已被删除。
自动启用暗模式
在JavaScript中
黑暗
类可以添加到
身体< >
通过检查文档是否匹配使用的媒体查询
matchMedia ()
．这将使黑暗模式仍然工作基于用户的偏好。
//使用matchMedia检查用户偏好
常量
prefersDark
＝
窗口
．
matchMedia
（
“(prefers-color-scheme:深色)”
）
；
toggleDarkTheme
（
prefersDark
．
匹配
）
；
//监听prefer -color-scheme媒体查询的变化
prefersDark
．
addListener
（
（
mediaQuery
）
＝＞
toggleDarkTheme
（
mediaQuery
．
匹配
）
）
；
//根据媒体查询是否匹配，添加或删除“dark”类
函数
toggleDarkTheme
（
shouldAdd
）
｛
文档
．
身体
．
班级名册
．
切换
（
“黑暗”
，
shouldAdd
）
；
｝提示:确保查看下面的Codepen 支持的浏览器 然后尝试在亮和暗模式之间改变设备上的系统偏好。这是 如何在Windows 10上启用暗模式 和 如何在Mac上启用它 ．
手动切换黑暗模式
除了呼叫
toggleDarkTheme ()
当应用程序加载和媒体查询改变时
toggleDarkTheme ()
函数可以被应用程序调用，例如当用户改变一个开关时，在光明和黑暗主题之间切换:
//查询用于在主题之间更改的切换
常量
切换
＝
文档
．
querySelector
（
“# themeToggle”
）
；
//在上监听切换检查/取消检查以切换dark类
切换
．
addEventListener
（
“ionChange”
，
（
电动汽车
）
＝＞
｛
文档
．
身体
．
班级名册
．
切换
（
“黑暗”
，
电动汽车
．
细节
．
检查
）
；
｝
）
；
常量
prefersDark
＝
窗口
．
matchMedia
（
“(prefers-color-scheme:深色)”
）
；
//监听prefer -color-scheme媒体查询的变化
prefersDark
．
addListener
（
（
e
）
＝＞
checkToggle
（
e
．
匹配
）
）
；
//当应用加载时调用
函数
loadApp
（
）
｛
checkToggle
（
prefersDark
．
匹配
）
；
｝
//被媒体查询调用来检查/取消选择
函数
checkToggle
（
shouldCheck
）
｛
切换
．
检查
＝
shouldCheck
；
｝
调整系统UI组件
在开发黑暗主题时，您可能会注意到某些系统UI组件没有正确地适应黑暗模式。要解决这个问题，您需要指定
台灯
．看到
颜色方案的浏览器兼容性
有关跨浏览器支持的详细信息。
虽然你可能主要使用离子组件而不是本地组件，betway东盟体育app
台灯
也会影响应用程序的某些方面，比如滚动条。为了使用
台灯
您需要将下列HTML添加到
头
您的应用程序:
<
元
的名字
＝
＂
台灯
＂
内容
＝
＂
光暗
＂
/>这允许页面指示使用哪种颜色方案进行渲染。或者，你可以添加以下CSS来实现每个元素:
台灯
：
光暗
；| 默认的滚动条 |
滚动条和
台灯 |
|---|---|
|
|
|
有关
台灯
请参阅
https://web.dev/color-scheme/
．
台灯不适用于键盘。有关暗模式如何使用键盘的详细信息，请参见键盘的文档 ．
betway东盟体育app离子黑暗的主题
betway东盟体育appIonic有一个推荐的变量主题，用于基于运行应用的设备获得黑暗模式。它可以分为以下几个部分:
-
更改默认
betway东盟体育app离子的颜色 对所有模式 以补充黑暗的背景body.dark选择器。 -
为黑色主题设置变量
ios设备。 -
为黑色主题设置变量
医学博士设备。
下面的代码可以复制和粘贴到一个应用程序，以获得爱奥尼亚的黑色主题。betway东盟体育app我们添加
黑暗
类中提到的使用JavaScript的文档主体
结合JavaScript
部分。暗模式将不会被启用，直到
黑暗
类添加到文档主体。
有关正在更改的变量(包括可以添加到进一步自定义的其他变量)的更多信息，请参见
主题 ．
/ * *黑暗的颜色 * ------------------------------------------- */
body.dark
｛
——ion-color-primary
：
# 428 cff
；
——ion-color-primary-rgb
：
66
，
140
，
255
；
——ion-color-primary-contrast
：
# ffffff
；
——ion-color-primary-contrast-rgb
：
255
，
255
，
255
；
——ion-color-primary-shade
：
# 3 a7be0
；
——ion-color-primary-tint
：
# 5598 ff
；
——ion-color-secondary
：
# 50 c8ff
；
——ion-color-secondary-rgb
：
80
，
200
，
255
；
——ion-color-secondary-contrast
：
# ffffff
；
——ion-color-secondary-contrast-rgb
：
255
，
255
，
255
；
——ion-color-secondary-shade
：
# 46 b0e0
；
——ion-color-secondary-tint
：
# 62 ceff
；
——ion-color-tertiary
：
# 6 a64ff
；
——ion-color-tertiary-rgb
：
106
，
One hundred.
，
255
；
——ion-color-tertiary-contrast
：
# ffffff
；
——ion-color-tertiary-contrast-rgb
：
255
，
255
，
255
；
——ion-color-tertiary-shade
：
# 5 d58e0
；
——ion-color-tertiary-tint
：
# 7974 ff
；
——ion-color-success
：
# 2 fdf75
；
——ion-color-success-rgb
：
47
，
223
，
117
；
——ion-color-success-contrast
：
# 000000
；
——ion-color-success-contrast-rgb
：
0
，
0
，
0
；
——ion-color-success-shade
：
# 29 c467
；
——ion-color-success-tint
：
# 44 e283
；
——ion-color-warning
：
# ffd534
；
——ion-color-warning-rgb
：
255
，
213
，
52
；
——ion-color-warning-contrast
：
# 000000
；
——ion-color-warning-contrast-rgb
：
0
，
0
，
0
；
——ion-color-warning-shade
：
# e0bb2e
；
——ion-color-warning-tint
：
# ffd948
；
——ion-color-danger
：
# ff4961
；
——ion-color-danger-rgb
：
255
，
73
，
97
；
——ion-color-danger-contrast
：
# ffffff
；
——ion-color-danger-contrast-rgb
：
255
，
255
，
255
；
——ion-color-danger-shade
：
# e04055
；
——ion-color-danger-tint
：
# ff5b71
；
——ion-color-dark
：
# f4f5f8
；
——ion-color-dark-rgb
：
244
，
245
，
248
；
——ion-color-dark-contrast
：
# 000000
；
——ion-color-dark-contrast-rgb
：
0
，
0
，
0
；
——ion-color-dark-shade
：
# d7d8da
；
——ion-color-dark-tint
：
# f5f6f9
；
——ion-color-medium
：
# 989 aa2
；
——ion-color-medium-rgb
：
152
，
154
，
162
；
——ion-color-medium-contrast
：
# 000000
；
——ion-color-medium-contrast-rgb
：
0
，
0
，
0
；
——ion-color-medium-shade
：
# 86888 f
；
——ion-color-medium-tint
：
# a2a4ab
；
——ion-color-light
：
# 222428
；
——ion-color-light-rgb
：
34
，
36
，
40
；
——ion-color-light-contrast
：
# ffffff
；
——ion-color-light-contrast-rgb
：
255
，
255
，
255
；
——ion-color-light-shade
：
# 1 e2023
；
——ion-color-light-tint
：
# 383 a3e
；
｝
/ * * iOS黑暗的主题 * ------------------------------------------- */
.ios body.dark
｛
——ion-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
：
# 0 d0d0d
；
——离子-颜色- 100步
：
# 1 a1a1a
；
——离子-颜色- 150步
：
# 262626
；
——离子-颜色- 200步
：
# 333333
；
——离子-颜色- 250步
：
# 404040
；
——离子-颜色- 300步
：
# 4 d4d4d
；
——离子-颜色- 350步
：
# 595959
；
——离子-颜色- 400步
：
# 666666
；
——离子-颜色- 450步
：
# 737373
；
——离子-颜色- 500步
：
# 808080
；
——离子-颜色- 550步
：
# 8 c8c8c
；
——离子-颜色- 600步
：
# 999999
；
——离子-颜色- 650步
：
# a6a6a6
；
——离子-颜色- 700步
：
# b3b3b3
；
——离子-颜色- 750步
：
# bfbfbf
；
——离子-颜色- 800步
：
# cccccc
；
——离子-颜色- 850步
：
# d9d9d9
；
——离子-颜色- 900步
：
# e6e6e6
；
——离子-颜色- 950步
：
# f2f2f2
；
——ion-item-background
：
# 000000
；
——ion-card-background
：
# 1 c1c1d
；
｝
.ios body.darkion-modal
｛
——ion-background-color
：
var
（
——离子-颜色- 100步
）
；
——ion-toolbar-background
：
var
（
——离子-颜色- 150步
）
；
——ion-toolbar-border-color
：
var
（
——离子-颜色- 250步
）
；
——ion-item-background
：
var
（
——离子-颜色- 150步
）
；
｝
/ * *材料设计黑暗的主题 * ------------------------------------------- */
。海事body.dark
｛
——ion-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
：
# 1 e1e1e
；
——离子-颜色- 100步
：
# 2 a2a2a
；
——离子-颜色- 150步
：
# 363636
；
——离子-颜色- 200步
：
# 414141
；
——离子-颜色- 250步
：
# 4 d4d4d
；
——离子-颜色- 300步
：
# 595959
；
——离子-颜色- 350步
：
# 656565
；
——离子-颜色- 400步
：
# 717171
；
——离子-颜色- 450步
：
# 7 d7d7d
；
——离子-颜色- 500步
：
# 898989
；
——离子-颜色- 550步
：
# 949494
；
——离子-颜色- 600步
：
# a0a0a0
；
——离子-颜色- 650步
：
# acacac
；
——离子-颜色- 700步
：
# b8b8b8
；
——离子-颜色- 750步
：
# c4c4c4
；
——离子-颜色- 800步
：
# d0d0d0
；
——离子-颜色- 850步
：
# dbdbdb
；
——离子-颜色- 900步
：
# e7e7e7
；
——离子-颜色- 950步
：
# f3f3f3
；
——ion-item-background
：
# 1 e1e1e
；
——ion-toolbar-background
：
# 1 f1f1f
；
——ion-tab-bar-background
：
# 1 f1f1f
；
——ion-card-background
：
# 1 e1e1e
；
｝