本主題的“主色調變換”以及“夜間模式”功能原理上均使用“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%
}