颜色

主题色

展开音乐播放器后,当前歌曲封面取色成功时会自动更新主题色;部分实验室页面也会按页面或所选内容切换主题色。切换深色模式和浅色模式时,显示颜色会自动适配。

可以在设置的「主题色」选项或本页颜色选择器中手动修改,确认后全站主题色及下面的色块会同步更新。

明暗适配

当前为浅色模式

原始颜色 #0099FF --main-color-original

适配后的主题色 #0099FE --main-color

以浅色模式的纯白背景、深色模式的纯黑背景为基准,对比度至少达到 3:1。原始颜色已达标时保持不变;不足时,浅色模式逐步混入黑色,深色模式逐步混入白色,找到达标所需的最小混色量。

当前适配色对纯白背景的对比度:3.01:1。计算采用 WCAG 相对亮度与对比度公式。

透明主题色

主题色(20% 不透明度) #0099FE33 --main-color-alpha

固定明暗色

这两种派生色会随原始颜色更新,但不随明暗模式切换。

主题色(始终偏暗) #007ACC --main-color-deep

原始颜色 #0099FF --main-color-original

主题色(始终偏亮) #4DB8FF --main-color-light

状态色

用于危险、警告和成功状态;透明色用于状态背景,alpha-opaque 是透明背景叠加到标准 section 后的不透明版本,用于悬浮胶囊等需要遮住下方内容的区域;deep 变量保留固定颜色,不随明暗模式切换。

危险 --danger-color状态文字、图标和强调

危险固定色 --danger-color-deep固定状态强调色

危险透明色 --danger-color-alpha状态背景

危险不透明背景 --danger-color-alpha-opaque遮挡下方内容的状态背景,随明暗主题切换

警告 --warning-color状态文字、图标和强调

警告固定色 --warning-color-deep固定状态强调色

警告透明色 --warning-color-alpha状态背景

警告不透明背景 --warning-color-alpha-opaque遮挡下方内容的状态背景,随明暗主题切换

成功 --success-color状态文字、图标和强调

成功固定色 --success-color-deep固定状态强调色

成功透明色 --success-color-alpha状态背景

成功不透明背景 --success-color-alpha-opaque遮挡下方内容的状态背景,随明暗主题切换

文字与边框

主要文字 --text-color正文和主要内容

次要文字 --text-sub-color辅助说明和次要信息

不透明次要色 --text-sub-color-opaque需要不透明颜色的次要图标,避免图形重叠时颜色加深;浅色与深色主题分别提供对应色值

弱化文字 --text-light-color低强调文字

文章标题 --article-title-color文章正文中的二、三级标题

浅边框 --border-light-color边框和分隔线

页面与区块背景

页面背景 --page-background全局页面底色

页面背景 RGB --page-background-rgbRGB 通道值,可组合自定义透明度

区块背景 --section-color内容区块底色

区块背景 RGB --section-color-rgbRGB 通道值,可组合自定义透明度

区块内部背景 --section-inside-color内嵌内容和控件背景

浅内部背景 --section-inside-light-color低强调内嵌背景

浅叠加背景 --back-light-color轻量背景叠加

弹窗与阴影

弹窗背景和遮罩还会随设置中的背景模糊开关变化;阴影预览使用实际阴影组合。

弹窗遮罩 --dialog-back-color弹窗后方遮罩

弹窗背景 --dialog-color弹窗面板底色

弹窗阴影色 --dialog-shadow-color弹窗阴影的颜色

区块阴影色 --section-shadow-color普通区块阴影的颜色

大区块阴影色 --section-big-shadow-color大范围区块阴影的颜色

弹窗阴影 --dialog-shadow弹窗多层阴影组合

区块阴影 --section-shadow普通区块多层阴影组合

大区块阴影 --section-big-shadow大范围多层阴影组合

滚动条

滚动条滑块 --scrollbar-thumb默认状态

滚动条悬停 --scrollbar-thumb-hover鼠标悬停状态

滚动条按下 --scrollbar-thumb-active按下状态

代码高亮

注释 --hljs-color1注释和引用

关键词 --hljs-color2关键词、文档标签和公式

名称与删除 --hljs-color3名称、章节和删除内容

字面量 --hljs-color4字面量

字符串与新增 --hljs-color5字符串、正则和新增内容

内置名称 --hljs-color6内置名称和类标题

数字与变量 --hljs-color7数字、变量、类型和属性选择器

标题与链接 --hljs-color8标题、链接、符号和元信息