Color颜色主题

2024-06-19 00:12:34首发，2个月前更新

本框架的颜色主要分三大类：主色系，通用色系，文本色系；通用色系和文本色系通常不会变，如果要修改网页的主题风格，主要是调整主色系；本框架通过_c-*来独立设置文本颜色，支持以上三大类颜色，特别的可使用_c-stage来使用网页背景色（白色）。

色系

框架颜色采用HSLA的色值模式。HSLA其中的H表示色轮度数（取值范围0~360），S表示饱和度（取值范围0%~100%），L为亮度（取值范围0%~100%），A为透明度（取值范围0~1），目前框架默认主色值为HSLA(210,100%,55%,1)。

颜色变量

本框架在css文件的:root中定义了颜色变量。用户可以根据项目需要使用这些变量以保持网站主题风格统一。详细说明如下：

• 主色系
  • --_h-prim：主色色轮值
  • --_s-prim：主色饱和度
  • --_l-prim：主色亮度
  • --_a-prim：主色透明度
  • --_c-prim：主色
  • --_c-prim-bg：主色浅色背景色，带透明值0.04（bg:background）
  • --_c-prim-bd：主色浅色边框色（bd:border）
  • --_c-prim-fc：主色焦点色（fc:focus）
  • --_c-prim-ht：主色半调色（ht:halftone）
  • --_c-prim-lt：主色变浅色（lt:lighten）
  • --_c-prim-dp：主色加深色（dp:deepen）
  • --_c-prim-aj：主色相似色，色轮+50（aj:adjacent）
  • --_c-prim-gy：主色中灰色（gr:grey）
  • --_c-prim-dk：主色深灰色（dk:dark）
  • --_c-prim-sg：主色深色但是较高饱和度，类似太阳镜（sg:sunglasses）
  • --_c-prim-ct：主色对比色，色轮+180（ct:contrast）
  • --_c-prim-tp：主色透明色，带透明值0（tp:transparent）
  • --_c-prim-ac：主色亚克力色，带透明值0.08（ac:acrylic）
  • --_c-prim-sd：主色阴影色，带透明值0.2（sd:shadow）
  • --_c-prim-tl：主色半透明色，带透明值0.6（tl:translucent）
  • --_c-prim-fg：主色毛玻璃色，带透明值0.8（fg:frosted glass）
• 正文色系
  • --_h-text：正文色色轮值
  • --_s-text：正文色饱和度
  • --_l-text：正文色亮度
  • --_a-text：正文色透明度
  • --_c-text：正文色
  • --_c-text-bg：正文色浅色背景色
  • --_c-text-bd：正文色浅色边框色
  • --_c-text-fc：正文色焦点色
  • --_c-text-ht：正文色半调色
  • --_c-text-lt：正文色变浅色
  • --_c-text-dp：正文色加深色
  • --_c-text-aj：正文色相似色
  • --_c-text-ct：正文色对比色
  • --_c-text-tp：正文色全透明色
  • --_c-text-ac：正文色亚克力色
  • --_c-text-sd：正文色阴影色
  • --_c-text-tl：正文色半透明色
  • --_c-text-fg：正文色毛玻璃色
• 简介色系（色轮值同正文色轮值）
  • --_c-brief：简介色，同--_c-text-aj
  • --_c-brief-bg：简介色浅色背景色，同--_c-text-bg
  • --_c-brief-bd：简介色浅色边框色，同--_c-brief
  • --_c-brief-sd：简介色阴影色，同--_c-text-sd
• 忽略色系（色轮值同正文色轮值）
  • --_c-ignore：忽略色
  • --_c-ignore-bg：忽略色浅色背景色，比--_c-text-bg略深
  • --_c-ignore-bd：忽略色浅色边框色，同--_c-ignore
  • --_c-ignore-sd：忽略色阴影色，比--_c-text-sd略浅
• 禁用色系（色轮值同正文色轮值）
  • --_c-disable：禁用色
  • --_c-disable-bg：禁用色浅色背景色，比--_c-text-bg略深
  • --_c-disable-bd：禁用色浅色边框色，同--_c-ignore
  • --_c-disable-sd：禁用色阴影色，比--_c-text-sd略浅
• 状态色系（succ、error、warn、info、issue）
  • --_h-warn：状态色色轮值
  • --_s-warn：状态色饱和度
  • --_l-warn：状态色亮度
  • --_a-warn：状态色透明度
  • --_c-warn：状态色
  • --_c-warn-bg：状态色浅色背景色
  • --_c-warn-bd：状态色浅色边框色
  • --_c-warn-fc：状态色焦点色
  • --_c-warn-ht：状态色半调色
  • --_c-warn-lt：状态色变浅色
  • --_c-warn-dp：状态色加深色
  • --_c-warn-aj：状态色相似色
  • --_c-warn-tp：状态色全透明色
  • --_c-warn-ac：状态色亚克力色
  • --_c-warn-sd：状态色阴影色
  • --_c-warn-tl：状态色半透明色
  • --_c-warn-fg：状态色毛玻璃色