介绍
颜色
主题色
展开音乐播放器后,当前歌曲封面取色成功时会自动更新主题色;部分实验室页面也会按页面或所选内容切换主题色。切换深色模式和浅色模式时,显示颜色会自动适配。
可以在设置的「主题色」选项或本页颜色选择器中手动修改,确认后全站主题色及下面的色块会同步更新。
明暗适配
当前为浅色模式
原始颜色 #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标题、链接、符号和元信息