CSS 变量概述
更新于：2023年4月3日
本页目录
本主题的“主色调变换”以及“夜间模式”功能原理上均使用“CSS 变量”来实现的。因此在进行二次开发时，对于自己新增或者重写的样式，建议也遵循这个规则来进行开发
参考：W3C CSS 变量规范
主题默认变量介绍
主题原则上使用了：主色调(primary)、基础白色(white)、灰度 0~灰度 9(gray)来作为基调。在使用时，这些色调被主题自动生成了不同亮度、不同透明度的主色调、邻近色调、半透明灰、半透明白等。这些颜色都是根据基调自动生成的，二次开发时只需使用这些颜色即可，无需掌握颜色的生成方法。
主色及附属色
主色调(primary)在主题使用中，除了默认的颜色外，还被自动生成了增亮的 3 个不同的等级和变暗的 3 个不同等级的颜色用来适应不同场景的需要。同时还生成了不同的透明度进行使用，下面我们一一来认识它们。
例如，当主色调选取为 #20a0ff 时，主题自动生成了以下的颜色用在 CSS 样式中：
:root { --primary_light_3: #76c5ff; //主色调增亮3 --primary_light_2: #59b8ff; //主色调增亮2 --primary_light_1: #3dacff; //主色调增亮1 --primary_default: #20A0FF; //默认主色调 --primary_dark_1: #0394ff; //主色调变暗1 --primary_dark_2: #0084e6; //主色调变暗2 --primary_dark_3: #0073c9; //主色调变暗3 --primary_opacity_0: rgba(32,160,255,0); //主色调完全透明 --primary_opacity_1: rgba(32,160,255,0.1); //主色调不透明度10% --primary_opacity_2: rgba(32,160,255,0.2); //主色调不透明度20% --primary_opacity_3: rgba(32,160,255,0.3); //主色调不透明度30% --primary_opacity_4: rgba(32,160,255,0.4); //主色调不透明度40% --primary_opacity_5: rgba(32,160,255,0.5); //主色调不透明度50% --primary_opacity_6: rgba(32,160,255,0.6); //主色调不透明度60% --primary_opacity_7: rgba(32,160,255,0.7); //主色调不透明度70% --primary_opacity_8: rgba(32,160,255,0.8); //主色调不透明度80% --primary_opacity_9: rgba(32,160,255,0.9); //主色调不透明度90%}邻近色及附属色
邻近色调(analogous)是由主色调(primary)根据色相偏移生成的，在主题中除了使用它本身以外，和主色调一样，还生成了 3 个梯度的增亮颜色和 3 个梯度的变暗颜色。
R 主题默认的邻近色是在主色调的 Hue 基础上增加 12°获得的
暗色模式下邻近色=主色
例如，当主色调选取为 #20a0ff 时，主题自动生成的邻近色为 #20baff，可在 CSS 中调用的变量有：
:root { --analogous_light_3: #76d5ff; //邻近色增亮3 --analogous_light_2: #59ccff; //邻近色增亮2 --analogous_light_1: #3dc3ff; //邻近色增亮1 --analogous_default: #20baff; //默认邻近色 --analogous_dark_1: #03b1ff; //邻近色变暗1 --analogous_dark_2: #009fe6; //邻近色变暗2 --analogous_dark_3: #008bc9; //邻近色变暗3}基础白色及附属色
基础白色(white)在主题中生成了不同的透明度进行使用。
例如，当基础白色选取为 #fff 时，可在 CSS 中调用的变量有：
:root { --white_default: #FFFFFF; //基础白色 --white_opacity_0: rgba(255,255,255,0); //基础白色完全透明 --white_opacity_1: rgba(255,255,255,0.1); //基础白色不透明度10% --white_opacity_2: rgba(255,255,255,0.2); //基础白色不透明度20% --white_opacity_3: rgba(255,255,255,0.3); //基础白色不透明度30% --white_opacity_4: rgba(255,255,255,0.4); //基础白色不透明度40% --white_opacity_5: rgba(255,255,255,0.5); //基础白色不透明度50% --white_opacity_6: rgba(255,255,255,0.6); //基础白色不透明度60% --white_opacity_7: rgba(255,255,255,0.7); //基础白色不透明度70% --white_opacity_8: rgba(255,255,255,0.8); //基础白色不透明度80% --white_opacity_9: rgba(255,255,255,0.9); //基础白色不透明度90%}不同灰度及附属色
本主题有灰度 0~灰度 9 共 10 个灰度等级。其中：灰度 0 主要用于黑色显示，并生成了不同的透明度进行使用；灰度 1~灰度 5 用于不同等级的文字颜色；灰度 6~灰度 9 用于边框、背景等较浅的场景
例如，主题默认可在 CSS 中调用的变量有：
:root { --gray_0: #1F2D3D; //灰度0（最深） --gray_1: #475669; --gray_2: #657487; --gray_3: #738192; --gray_4: #8492A6; --gray_5: #99A9BF; --gray_6: #CAD1DB; --gray_7: #D8E0EA; --gray_8: #EFF2F7; --gray_9: #F0F2F7; //灰度9（最浅） --gray_opacity_0: rgba(31,45,61,0); //根据最深的灰度生成的不透明度0% --gray_opacity_1: rgba(31,45,61,0.1); //根据最深的灰度生成的不透明度10% --gray_opacity_2: rgba(31,45,61,0.2); //根据最深的灰度生成的不透明度20% --gray_opacity_3: rgba(31,45,61,0.3); //根据最深的灰度生成的不透明度30% --gray_opacity_4: rgba(31,45,61,0.4); //根据最深的灰度生成的不透明度40% --gray_opacity_5: rgba(31,45,61,0.5); //根据最深的灰度生成的不透明度50% --gray_opacity_6: rgba(31,45,61,0.6); //根据最深的灰度生成的不透明度60% --gray_opacity_7: rgba(31,45,61,0.7); //根据最深的灰度生成的不透明度70% --gray_opacity_8: rgba(31,45,61,0.8); //根据最深的灰度生成的不透明度80% --gray_opacity_9: rgba(31,45,61,0.9); //根据最深的灰度生成的不透明度90%}