本主题的“主色调变换”以及“夜间模式”功能原理上均使用“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%
}